Skip to content
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

Merged
merged 3 commits into from
Aug 19, 2022

Conversation

tyao1
Copy link
Contributor

@tyao1 tyao1 commented Aug 18, 2022

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.

@tyao1 tyao1 marked this pull request as draft August 18, 2022 02:58
@tyao1 tyao1 marked this pull request as ready for review August 18, 2022 05:32
@tyao1 tyao1 requested a review from lunaruan August 18, 2022 17:39
Copy link
Contributor

@lunaruan lunaruan left a 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,
Copy link
Contributor

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?

Copy link
Contributor Author

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!

@tyao1 tyao1 merged commit 26ba5fb into facebook:main Aug 19, 2022
GrinZero added a commit to GrinZero/react that referenced this pull request Aug 31, 2022
* '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)
  ...
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Sep 1, 2022
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
rickhanlonii pushed a commit that referenced this pull request Oct 6, 2022
* Add inspectingNative events for RN

* Enable inspection toggle UI for RN

* Add a stopInspectingNative method for agent
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants