Replies: 10 comments 12 replies
-
[FAQ Thread] Network inspectionTLDR: Should be available from Expo SDK 52, support in core is WIPReact Native DevTools does not ship with Network inspection as of 0.76. We are aware this is a highly-requested feature. First party support, built into our new C++ debugger stack, is work in progress and will ship in a future release. Alternatives
At this time, we aren't committing to a timeline for Network debugging in React Native core. Updates
|
Beta Was this translation helpful? Give feedback.
-
[FAQ Thread] Third party Chrome extensionsTLDR: Use Expo Dev Plugins, no timeline yet on support in coreReact Native DevTools does not ship with support for loading third party Chrome extensions (such as Relay DevTools or Redux DevTools) as of 0.76. This is a feature that conceptually fits what we want to offer, but is further out in our plans. We are in early exploration on this feature, in partnership with Expo. We want JS dev plugins in React Native DevTools to share the same reliable debugger connection as the rest of our infra, and we want to design the necessary APIs for this precisely. Another concern will be how we safely load 3P extension code and meet our quality bar. Prior art such as Expo Dev Plugins may inform us about how we make third party plugins loadable into DevTools. Alternatives
Updates
|
Beta Was this translation helpful? Give feedback.
-
|
Through the console you can inject snippets of code into your app in the global state, or on any paused breakpoint context. Unfortunately, this snippet of code seems to be heavily tied to what Hermes can execute, e.g.
Would be awesome if we can figure out a way to A - make this and the reason more visible, e.g. error/warning as response for that snippet with this info, B - support basic language level features (like |
Beta Was this translation helpful? Give feedback.
-
|
Great observation. I guess this behaviour is correct (from Hermes' point of view), but unintuitive 😅. Raising internally 👍🏻 |
Beta Was this translation helpful? Give feedback.
-
|
Option for people not using Chrome or Microsoft edge ? |
Beta Was this translation helpful? Give feedback.
-
|
Which browser are you intending to use? React Native DevTools, based on the Chrome DevTools frontend, requires a Chromium based browser to run. Our launch flow (also historically in Expo) uses either Chrome or Microsoft Edge, which are highly likely to be already installed on a developer's machine, across desktop environments. We don't require that either browser is your system default 😄. |
Beta Was this translation helpful? Give feedback.
-
|
I am using Arc (Chromium Based), and i don't want to the debugger to be chrome every time. Is there any way to select the browser i want to open debugger in ? |
Beta Was this translation helpful? Give feedback.
-
|
Sure (I use Arc as well!). As @sntg-p mentioned, you can try setting CHROME_PATH, however Arc's launch behaviour is different to base Chromium and I don't think this will work. Instead, try this workaround (power users only) — paste the following URL into your browser (assuming Metro is running at localhost:8081), and it will redirect to React Native DevTools. Note that this approach is unstable and unsupported:
In future, we're looking at packaging React Native DevTools so that it doesn't require an external browser at all. |
Beta Was this translation helpful? Give feedback.
-
|
and how I can select one browser over another? right now I have both installed (with Chrome being my default, btw) and it always opens Edge, being successful 1 of each 5 launches or so, I wanna change it to Chrome and see if something changes, I'm on Mac |
Beta Was this translation helpful? Give feedback.
-
|
When using Linux, I thought I wouldn't be able to use the new DevTools unless I installed Edge or Google Chrome via APT or similar. But I managed to use them with Ungoogled Chromium installed via Flatpak like this: EDGE_PATH=/var/lib/flatpak/app/io.github.ungoogled_software.ungoogled_chromium/current/active/export/bin/io.github.ungoogled_software.ungoogled_chromium; export EDGE_PATH
yarn run startThen pressing the |
Beta Was this translation helpful? Give feedback.
-
|
when can we expect an offical update on this as this is much needed. |
Beta Was this translation helpful? Give feedback.
-
|
Great work, thank you for this. React Native debugging has been a pain for some time. This is a welcome change and am personally glad to have moved away from Flipper. Understand that it will take time but personally Redux debugging is more important to me than networking or performance. I need to use the Redux Debugger every time i debug something but Networking and Performance are more situational. Thanks again. 🍻 |
Beta Was this translation helpful? Give feedback.
-
|
@SeanDunford do you have any idea how to debug network api calls in 0.76 or how to debug redux in this version? |
Beta Was this translation helpful? Give feedback.
-
This is the only official response at the moment. |
Beta Was this translation helpful? Give feedback.
-
|
ok i thought some one had any idea about it |
Beta Was this translation helpful? Give feedback.
-
|
Just a question why can't meta open source the debugger so that the community can also help to make the development fast ? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @hrithik73, React Native DevTools is built into React Native and is already open source. Our customised Chrome DevTools frontend lives in its own repo. See links below: |
Beta Was this translation helpful? Give feedback.
-
|
I am getting this error when trying to start the devtools by pressing on a fresh install, fresh project on my Mac. Any idea why? |
Beta Was this translation helpful? Give feedback.
-
|
Is this reliably failing? Please create an issue in the Expo repo. |
Beta Was this translation helpful? Give feedback.
-
|
Could this be related to the MacOS Sequoia update requiring apps to have permission to access local network? https://support.apple.com/en-gb/guide/mac-help/mchla4f49138/mac |
Beta Was this translation helpful? Give feedback.
-
|
The copy option is not functioning. Device (MAC) |
Beta Was this translation helpful? Give feedback.
-
|
Can you give more info? |
Beta Was this translation helpful? Give feedback.
-
Introduction
In React Native 0.76, we're shipping the first stable release of React Native DevTools, our new debugging experience for React Native apps using Hermes.
React Native DevTools features:
jto debug in the CLI server. See a new “Paused in Debugger” overlay and simplified LogBox states while debugging.React Native DevTools is designed for debugging React app concerns, and not to replace native tools. If you want to inspect React Native’s underlying platform layers (for example, while developing a Native Module), please use the debugging tools available in Xcode and Android Studio.
Tip
Learn more about React Native DevTools in the 0.76 release blog post or the announcement talk 🎬.
Compatibility
React Native DevTools supports all React Native 0.76 apps running Hermes. It replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) entry points.
It is not possible to set up React Native DevTools with any older versions of React Native.
chrome://inspectis no longer supported. Features may not work correctly, as the latest versions of Chrome DevTools (which are built to match the latest browser capabilities and APIs) have not been tested, and this frontend lacks our customisations. Instead, we ship a supported version with React Native DevTools.Available debugging options from 0.76
If you are using a debugging option other than React Native DevTools, this will not be connected to the React Native DevTools backend, and therefore issues should be raised outside this discussion thread.
Related deprecations in 0.76
npx react-devtools) will no longer work with 0.76, and this entry point is deprecated.FAQs
React Native DevTools is fundamentally separate from the previous “Experimental Debugger” (React Native 0.73-0.75). Please use the previous thread if you see the old frontend.
How do I know if I’m on React Native DevTools?
Welcome to React Native DevToolsshould be printed to the console.When is React Native DevTools coming to Expo?
React Native DevTools should land in Expo in the next Expo SDK that aligns with React Native 0.76, so long as Expo is happy with end to end compatibility. At time of writing, this will be SDK 52.
How do I use the Network panel?
React Native DevTools does not ship with Network inspection as of 0.76. We are aware this is a highly-requested feature. First party support, built into our new C++ debugger stack, is work in progress and will ship in a future release.
Alternatives:
How do I use third party Chrome extensions?
React Native DevTools does not ship with support for loading third party Chrome extensions (such as Relay DevTools or Redux DevTools) as of 0.76. This is a feature that conceptually fits what we want to offer, but is further out in our plans.
We are in early exploration on this feature, in partnership with Expo. We want JS dev plugins in React Native DevTools to share the same reliable debugger connection as the rest of our infra, and we want to design the necessary APIs for this precisely. Another concern will be how we safely load 3P extension code and meet our quality bar. Prior art such as Expo Dev Plugins may inform us about how we make third party plugins loadable into DevTools.
Alternatives:
react-native-debuggeris a community project that includes built in DevTools plugins for popular third party JavaScript libraries. (Note: This will eject out of the React Native DevTools backend and to Remote JavaScript Debugging.)Why are JavaScript logs leaving Metro?
We want every aspect of React Native debugging to behave reliably, and to match the functionality of modern browser tooling. To meet this quality bar, we are removing log forwarding via Metro in 0.77, with a warning logged today.
Please use React Native DevTools and its fully featured Console panel — supporting log filtering, rich object inspection, and Live Expressions.
If you really want to view inline logs in your IDE, the modern approach would be to consider one of the third party VS Code offerings, which stream logs over CDP.
When will we remove Remote JavaScript Debugging?
No time soon(!). This debugging mode remains deprecated, but we appreciate the use case for third party Chrome extensions. Remote JavaScript Debugging won't stay around forever — but we'll consider down the line if we've replaced enough of its functionality (or this functionality is implemented robustly by frameworks), to remove it.
What features are coming next?
Beta Was this translation helpful? Give feedback.
All reactions