-
Notifications
You must be signed in to change notification settings - Fork 47k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DevTools] Add events necessary for click to inspect on RN #25111
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good pending testing on Safari!
@@ -256,7 +256,7 @@ function initialize(socket: WebSocket) { | |||
|
|||
store = new Store(bridge, { | |||
checkBridgeProtocolCompatibility: true, | |||
supportsNativeInspection: false, | |||
supportsNativeInspection: true, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One other place the standalone
is used in Safari. Could you test there as well to make sure inspection works there as well?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just tested on a react app on Safari, inspection works!
* 'main' of ssh://github.com/GrinZero/react: (26 commits) [devtools][easy] Fix flow type (facebook#25147) Remove Symbol Polyfill (again) (facebook#25144) Remove ReactFiberFlags MountLayoutDev and MountPassiveDev (facebook#25091) experimental_use(promise) (facebook#25084) [Transition Tracing] onMarkerIncomplete - Tracing Marker/Suspense Boundary Deletions (facebook#24885) [Flight] Add support for Webpack Async Modules (facebook#25138) Fix typo: supportsMicrotask -> supportsMicrotasks (facebook#25142) Allow functions to be used as module references (facebook#25137) Test the node-register hooks in unit tests (facebook#25132) Return closestInstance in `getInspectorDataForViewAtPoint` (facebook#25118) [DevTools] Highlight RN elements on hover (facebook#25106) Update fixtures/flight to webpack 5 (facebook#25115) Align StrictMode behaviour with production (facebook#25049) Scaffolding for useMemoCache hook (facebook#25123) devtools: Fix typo from directores to directories (facebook#25124) fixture: Fix typo from perfomrance to performance (facebook#25100) [DevTools] Add events necessary for click to inspect on RN (facebook#25111) Add missing createServerContext for experimental shared subset (facebook#25114) support subresource integrity for bootstrapScripts and bootstrapModules (facebook#25104) make preamble and postamble types explicit and fix typo (facebook#25102) ...
Summary: Changelog: [General][Added] - Added an overlay similar to Inspector.js that allows directly selecting elements on RN from React DevTools This diff updates DevToolsHighlighter into DevToolsOverlay. It now also allows DevTools user to select an element to inspect directly from DevTools. Depends on facebook/react#25111 to work. TODOs: - Currently once an element selected on RN, the inspector toggle isn't turned off automatically. - Fabric support depends on facebook/react#25118 Reviewed By: lunaruan Differential Revision: D38815494 fbshipit-source-id: 7e1e3a78f6594960b5dfaec142bafd3ca4b146af
* Add inspectingNative events for RN * Enable inspection toggle UI for RN * Add a stopInspectingNative method for agent
We want to enable the inspector toggle on devtools and allow click to inspect on RN.
The changes here are necessary to enable the toggle and pass events to RN.
The change is tested locally on RN. Verified events are received on RN and toggle is shown.