Skip to content

phase 3 of 4: a devframe shell as good as Vue and Nuxt DevTools #312

Closed as duplicate

Description

@erkamyaman

Goal

Vue DevTools v9 and Nuxt DevTools v4 now run as docks inside Vite DevTools, which is built on devframe, our own base. They get a command palette, messages, terminals, settings and a plugin API from it. We use only docks.register, rpc, sharedState and agent, so most of this phase is wiring up what devframe already ships. Rough size: 4 to 6 weeks. Follows #310 and #311.

Shell

  • Command palette (Cmd/Ctrl+K) through ctx.commands, with a command for every tab and action (pick, record change detection, clear, dock mode). Use a local palette when there is no hub. Add a global popup shortcut, configurable through popup.hotkey.
  • Settings page: theme toggle, hide, pin and reorder tabs, and a passive mode where the popup stays hidden until the shortcut.
  • A splitter for the docked popup, and pop-out into its own window.
  • Deep links to an item, not just a tab (#tab=&id=&page=), plus an open-in-panel agent tool.
  • One timeline with toggleable layers for router, HTTP, NgRx, change detection, forms and signals, instead of five separate timelines.
  • Errors inspector: wrap ErrorHandler, error and unhandledrejection, parse NG0xxx codes with a doc link, and link the owning component. Replace the three console patches with one console tap. Add list-errors, explain-error and list-console agent tools.
  • A terminals dock (ctx.terminals) for ng build and ng test output.

Setup and distribution

  • An ng add schematic that patches main.ts and server.ts, plus a dev-server builder that mounts the hub middleware. This removes the CLI, proxy and one-time-code steps from the client-only setup.
  • Publish the extension to the Chrome Web Store and Edge Add-ons, and ship a Firefox build.
  • Docs: a one-path quick start, screenshots on every inspector page, and an "Angular DevTools vs Pangular Inspector" FAQ entry.

Performance and scale

  • Push deltas instead of full snapshots for the component tree, injectors, change detection and forms. Use MutationObserver dirty flags, throttle to about once a second, and add an activity lease so idle pages stop pushing.
  • Virtualize long lists and trees (2,000-row tables), starting with content-visibility.

Done when

  • The shell rows in the comparison match Nuxt DevTools v4.
  • First-run setup is one command.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

featureA feature request or a pull request that adds one

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions