add React DevTools Components and Profiler panels #102
+104,491
−91
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Update devtools-frontend submodule with react_devtools panel, react_native model, third_party/react-devtools from reference - Register panels in devtools_app; show only when clientType=react-native - Add visibility for bindings/logs to react_devtools; grd and third_party readme paths - Copy build output to devtools/bundled - Add guide doc and sub-agent for react-native-devtools-frontend - Panel order 1010/1011 so Components and Profiler appear at end of tabs
There was a problem hiding this comment.
Pull request overview
This PR adds React DevTools Components and Profiler panels to the inspector, matching the reference react-native-devtools-frontend. The panels appear only when clientType=react-native and are positioned at the end of the tab bar (order 1010/1011).
Changes:
- Updated devtools-frontend submodule to include react_devtools panels, models/react_native (ReactDevToolsBindingsModel), and third_party/react-devtools UI
- Copied build output to devtools/bundled with all necessary TypeScript configs and resource files
- Added comprehensive documentation guide for implementing React DevTools panels
Reviewed changes
Copilot reviewed 46 out of 91 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| devtools/devtools-frontend | Submodule updated to commit with react_devtools panels and models |
| devtools/bundled/front_end/panels/react_devtools/* | Built panel files for Components and Profiler views |
| devtools/bundled/front_end/models/react_native/* | ReactDevToolsBindingsModel for CDP Runtime messaging |
| devtools/bundled/front_end/third_party/react-devtools/* | React DevTools UI bundle (bridge, store, initializers) |
| devtools/bundled/front_end/entrypoints/devtools_app/* | Updated to import new panel meta files |
| devtools/bundled/front_end/ui/visual_logging/* | Added "sendFeedback" context value |
| devtools/bundled/front_end/devtools_resources.grd | Resource file entries for new modules |
| document/docs/en/guide/react-devtools-components-profiler.md | Implementation guide for React DevTools panels |
| document/docs/en/guide/_meta.json | Navigation entry for new guide |
| .cursor/agents/sub-agent-react-native-devtools-frontend.mdc | Agent ruleset for RN DevTools reference comparison |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ing and docs - react-native-inspector: Runtime.evaluate returns expression value so waitForFuseboxDispatcher succeeds; Runtime.addBinding/bindingCalled; tests for evaluate return value. - inspector: pass clientId in DevTools URL for panel condition. - client: use indirect eval in runtime. - devtools bundled: CSP (unsafe-eval, blob, worker-src) and ReactDevToolsViewBase content wrapper so CSS is never cleared. - docs: guide updated with implementation status and fixes.
📊 Test Coverage Report - ClientSummary
File CoverageClick to expand
Generated by test coverage script |
📊 Test Coverage Report - React Native InspectorSummary
File CoverageClick to expand
Generated by test coverage script |
📊 Test Coverage Report - InspectorSummary
File CoverageClick to expand
Generated by test coverage script |
Integration Tests1 tests 1 ✅ 18s ⏱️ Results for commit 03a18a7. ♻️ This comment has been updated with latest results. |
📊 Test Results✅ Test Status: PASSED📸 ScreenshotsScreenshots are available as artifacts. Download them here. Artifact name: Screenshot files
|
…nt doc - Document Runtime.enable, executionContextCreated, getProperties, releaseObject (methods + wire format) in en/ko runtime.md - Note Runtime.callFunctionOn as not implemented in react-native-inspector - Add implemented-in-RN full list (commands + events) to runtime.md - Update sub-agent-react-native-devtools-frontend.mdc for Components/Profiler completion
…d tests - Add test: addBinding sends result and calling binding sends Runtime.bindingCalled with name, payload, executionContextId - Add test: binding called with object sends JSON string payload (React DevTools wire format) - Clean up installed bindings in afterEach
Owner
Author
AI reviewPurpose and descriptionThe PR purpose (adding React DevTools Components and Profiler panels for React Native clients) matches the changes. The description accurately covers frontend (devtools-frontend panels, models, CSP, CSS wrapper), Inspector (clientId in URL), react-native-inspector (Runtime.evaluate return value, addBinding/bindingCalled), client (indirect eval), and documentation. The latest commit adds tests for Runtime.addBinding and Runtime.bindingCalled, which is reflected in the PR body. What's done well
Improvement suggestions
Testing
Overall the PR is in good shape for merge; purpose, implementation, docs, and tests are aligned. |
📱 Maestro Android Test Results✅ PASSED Maestro Android tests have completed. Check the workflow run for details. |
📱 Maestro iOS Test Results✅ PASSED Maestro iOS tests have completed. Check the workflow run for details. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add React DevTools Components and Profiler panels
Purpose
Add React DevTools Components and Profiler panels to the inspector so that React Native clients see the same tab set as the reference react-native-devtools-frontend. Panels are shown only when
clientType=react-native(orclientIdstarts withrn-inspector-) and appear at the end of the tab bar. Rendering and functionality are working after the fixes below.Description
Frontend (devtools-frontend)
clientType === 'react-native'orclientId.startsWith('rn-inspector-'), order 1010/1011.#clearView()never removes the<style>fromcontentElement; loader/error/DevTools UI render into the wrapper only.'unsafe-eval'andblob:to script-src, andworker-src 'self' blob:so the React DevTools bundle (which usesnew Function()and Worker from Blob) runs without EvalError/SecurityError.Inspector
clientId(andclientType) in the DevTools iframe URL so the panel condition shows Components/Profiler for RN clients.react-native-inspector
globalThis.x != undefined→true/false) so the frontend’swaitForFuseboxDispatcherToBeInitializedsucceeds; previously the expression was run without returning its value, so the panel stayed empty.Runtime.bindingCalledwhen the app invokes the binding.1+2→ 3, comparison → boolean); Runtime.addBinding and Runtime.bindingCalled (response + calling binding sends event with name, payload, executionContextId; object payload serialized as JSON string).client
(0, eval)(...)to satisfy lint for expression evaluation.Documentation
How to test
bun run build:devtoolsif devtools-frontend source or submodule changed.clientType=react-nativeorclientId=rn-inspector-...).__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__and the React DevTools backend.Additional info
mise exec -- bun run format,mise exec -- bun run lint.packages/react-native-inspectorRuntime.evaluate, Runtime.addBinding / bindingCalled, and panel-related handler tests (cdp-message-handler.test.ts).