ENG-9602: feat: add frontend inspector for mapping DOM nodes to Python source#6411
ENG-9602: feat: add frontend inspector for mapping DOM nodes to Python source#6411FarhanAliRaza wants to merge 10 commits into
Conversation
- Add `frontend_inspector`, `frontend_inspector_shortcut`, and `frontend_inspector_editor` config options; "dev" mode fails the prod build (validated at Config init and re-checked at compile time). - New `reflex_base.inspector` package: state flag, capture registry that records source location per component, and an integration module owning compile-time wiring. - `Component.create` stamps emitted tags with a `data-rx-source` id when capture is enabled (Fragments skipped). - Vite config and package.json now react to inspector state and are re-rendered each compile; `launch-editor` pulled in as a dev dep on demand. - Extract framework-frame walking from `console.py` into shared `reflex_base.utils.frames`, reused by the inspector. - Exclude `_inspector_id` from generated pyi stubs. - Docs: new `advanced_onboarding/frontend_inspector.md` page, sidebar entry, and pointer from the configuration guide. - Tests for config validation, runtime gating, capture lifecycle, frame walking, browser contract, and the component data-attribute.
…n alt - Build inspector script src and runtime URLs through prepend_frontend_path so the script and its assets load when the app is hosted under a base path (e.g. docs at /docs/). Inspector JS now reads the URLs from the window config instead of hardcoding /__reflex/... - Editor middleware matches /__open-in-editor as a substring so it still fires when the request comes in prefixed. - Dedupe capture entries by (file, line, column, component); identical call sites now share an id, cutting the docs source-map from ~200MB to ~600KB. - Require alt at click time and add a 350ms post-focus guard so re-focusing the browser window doesn't hijack a click into 'open in editor'; hide the overlay on blur to avoid stale snap on return. - Update the inspector docs to reflect alt+click.
Merging this PR will not alter performance
Comparing 
Footnotes
|
Greptile SummaryThis PR adds a dev-only frontend inspector that maps rendered DOM nodes back to their Python
Confidence Score: 5/5Safe to merge; the inspector is gated entirely behind a dev-mode check and is a no-op in production builds. The feature is well-isolated: the plugin is inactive in production, the compiler change is minimal, and the implementation is backed by comprehensive tests covering capture, state, shortcut, browser contract, and Playwright integration. The noted issues are theoretical edge cases with no impact on current usage. capture.py (empty-tuple sentinel) and frontend_inspector.py (silent Vite anchor miss) deserve attention before future refactoring of those modules. Important Files Changed
Reviews (2): Last reviewed commit: "fix underscore links" | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
…prod frontend_inspector="dev" is already inert under REFLEX_ENV_MODE=prod (is_active gates every emission site), so the validate() raise just broke shared rxconfigs that get reused across run modes — including the docs CI which runs reflex run --env prod against a config that keeps the inspector on for local dev.
Cache the source map per modifier-press/click so edits are picked up without reloading the page, and gate clicks on the configured shortcut (alt/ctrl/meta/shift) instead of hard-coding altKey.
| frontend_inspector: FrontendInspectorMode = "off" | ||
|
|
||
| frontend_inspector_shortcut: str = "alt+x" | ||
|
|
||
| frontend_inspector_editor: str = "" | ||
|
|
There was a problem hiding this comment.
i would rather this be implemented as a plugin, and the config options belong in that plugin, similar to sitemap
masenf
left a comment
masenf
left a comment
There was a problem hiding this comment.
agree with full implementing this as a plugin.
not sure if it's possible, but the first thing i wished this had was the ability to see the stack of where the component was instantiated. maybe i want to jump to the component instantiation? or maybe i want to jump into the page function or sidebar function that called the helper.
lot of potential here though; hopefully we can integrate this into claude code's preview browser to automatically select context from UI 🤤
# Conflicts: # reflex/app.py
Move every dev-only inspector concern (head scripts, vite plugin file + vite.config.js splice, launch-editor dev dep, browser asset copy, source map emit, runtime state toggle) into FrontendInspectorPlugin. Add a single new Plugin.start_compile(app) hook because pre_compile fires after page evaluation — too late to reset capture or extend app.head_components before compile_document_root reads them. Drops the frontend_inspector / *_shortcut / *_editor BaseConfig fields, the inspector= arg on vite_config_template, the now-unused inspector/integration.py, inspector/emit.py, compiler/inspector_plugins.py, and the dead refresh_framework_roots / discover_framework_roots_fast pair.
|
we currently send this data for each component and dedupe it. We can store whatever data it is our will, but if we do alot of work it will slow down compilation and increase size of the source map that we send to the frontend. Now for the docs app we send about 500+ kb. That is for development so size is, I think, not an issue. |
Align the plugin start_compile hook with the other lifecycle hooks by threading the app through a typed context kwargs dict instead of a positional argument.
masenf
changed the title
|
Need to test it with memoized components. |
Dynamic components compile in a one-shot subprocess and re-render in a freshly spawned Granian worker, so the worker never sees the parent's in-memory registry or env writes. Hash (file, line, column, component) to a stable id and use source-map.json on disk as the enable signal, so data-rx values emitted at request time match the ids the compile pass wrote.
3 participants
frontend_inspector,frontend_inspector_shortcut, andfrontend_inspector_editorconfig options; "dev" mode fails the prod build (validated at Config init and re-checked at compile time).reflex_base.inspectorpackage: state flag, capture registry that records source location per component, and an integration module owning compile-time wiring.Component.createstamps emitted tags with adata-rx-sourceid when capture is enabled (Fragments skipped).launch-editorpulled in as a dev dep on demand.console.pyinto sharedreflex_base.utils.frames, reused by the inspector._inspector_idfrom generated pyi stubs.advanced_onboarding/frontend_inspector.mdpage, sidebar entry, and pointer from the configuration guide.All Submissions:
Type of change
Please delete options that are not relevant.
New Feature Submission:
Changes To Core Features:
Alt-click actually opens the file in the editor.