Replies: 19 comments 12 replies
-
[Known issue] Crash on paused debuggerIf you reload the app while the debugger is paused on a breakpoint, the app will crash.
|
Beta Was this translation helpful? Give feedback.
-
[Known issue] Interactively setting a breakpoint doesn't work after a reloadSetting a breakpoint interactively (via the Sources panel UI) will not be persisted after an app reload — making some code paths difficult to pause on via a breakpoint. Workarounds
|
Beta Was this translation helpful? Give feedback.
-
[Known issue][Frontend] Clicking the Chrome app icon in the macOS dock opens separate empty windowWhen navigating back to an opened debugger window on macOS using the dock icon, this will foreground the app window but also will open a new empty browser window in front. 
This appears to be an issue/limitation with passing the |
Beta Was this translation helpful? Give feedback.
This comment has been hidden.
This comment has been hidden.
-
|
Am I doing something wrong in Chrome Console to suppress lines/multiline, or should there be more of the error showing? 
|
Beta Was this translation helpful? Give feedback.
-
|
I can confirm on Code I tested: <Button
onPress={() => {
console.info(JSON.stringify({foo: {bar: {baz: [{foo: '123'}]}}}));
console.log(JSON.stringify({foo: {bar: {baz: [{foo: '123'}]}}}));
console.warn(JSON.stringify({foo: {bar: {baz: [{foo: '123'}]}}}));
console.debug(JSON.stringify({foo: {bar: {baz: [{foo: '123'}]}}}));
console.error(JSON.stringify({foo: {bar: {baz: [{foo: '123'}]}}}));
}}
title="Test Log"
/>
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks for highlighting this. We've confirmed this was a regression 0.73 and will be pursuing a fix. |
Beta Was this translation helpful? Give feedback.
-
Sources tab doesn't render loaded filesThe React Native JS inspector uses a relatively modern version of Chrome DevTools. This version includes the revamped "File system" list, under the Sources tab. Unfortunately, this is not fully functional and doesn't show any useful information about all loaded files within the bundle.
The only way to open a bundled file is through
Ideally, the "Page" file tree would work for React Native apps.
During some experimenting, I think we have to support a couple of different CDP domains to get this working: I hacked a basic implementation together including the following events. Unfortunately, this still did NOT enable the desired "Page" panel under the Sources tab.
One very important side-effect of adding support for the events listed above was the |
Beta Was this translation helpful? Give feedback.
-
|
I'm also seeing this (or rather not seeing any sources in the sources tab). It seems the sources tab is completely broken/missing. Didn't realize that cmd+p would work. @huntie this has been broken since the introduction of the experimental debugger AFAIK and it caused me to think that the debugger was uselessly broken since I didn't realize cmd+p would work. Is this actively tracked by anyone working on the debugger? |
Beta Was this translation helpful? Give feedback.
-
|
Under the memory tab, none of the snapshotting or sampling functionality works. |
Beta Was this translation helpful? Give feedback.
-
|
FWIW, I was able to do a snapshot of the heap. |
Beta Was this translation helpful? Give feedback.
-
|
I'm also unable to get profiling working. Only the console works as expected. I'm confused what functionality actually exists today aside from the debugger UI. |
Beta Was this translation helpful? Give feedback.
This comment has been hidden.
This comment has been hidden.
-
|
Any possibility to network debugging? |
Beta Was this translation helpful? Give feedback.
-
|
This is in our future aspirational plans. For Expo users, network debugging (via Expo's existing CDP implementation) will be available soon — see more here. |
Beta Was this translation helpful? Give feedback.
-
|
and for which does not use expo?
|
Beta Was this translation helpful? Give feedback.
-
|
in absence of network and application debugging it is becoming difficult to debug things. Any update when it would get resolved? |
Beta Was this translation helpful? Give feedback.
-
|
Looks awesome! Love the idea of having the CDP server persist the session between bundle changes. Do you know if it will be possible to bundle the new tools into release builds? |
Beta Was this translation helpful? Give feedback.
-
|
JS console.log('map', new Map([['a', 1], ['b', 2]]))
console.log('set', new Set([1, 2, 3, 4, 5]))
tested on |
Beta Was this translation helpful? Give feedback.
-
[FAQ] Network debuggingThis has been a popular question, so this is a dedicated comment on the status of this feature. TLDR: Available in Expo now, available for other apps in the futureThe Network panel in Chrome DevTools is currently supported in Expo since SDK 49, but not in core React Native. We envision having Network support for all React Native apps, but are sequencing this work later in our roadmap. MotivationAs mentioned above, the React Native team are currently focused on reimplementing React Native's debugger server (an in-place replacement of the Hermes debugger), giving us a modern debugging platform base that is fundamentally more reliable and more extendable.
After this point, we will be in a position to build out our debugging features, with supporting the Network panel high up in our plans.
At this time, we aren't committing to a timeline for Network debugging in React Native core. We are collaborating with the Expo team on future improvements to the debugger (including new Network support), with React Native and Expo sharing a common implementation further down the line. Updates[Future] |
Beta Was this translation helpful? Give feedback.
-
|
Is this support for Physical device iPad or iPhone because for physical I am getting ''''' |
Beta Was this translation helpful? Give feedback.
-
|
Yes, we support physical devices ✅. So long as you are serving your app to the connected device via Metro, this should work. Please review the Running on Device guide (including troubleshooting) — and if this still doesn't work, consider opening a new issue (you can debug by querying |
Beta Was this translation helpful? Give feedback.
-
|
how i can use Redux extentions in this debugger, just like Flipper? |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately, supporting third party Chrome extensions are not in our immediate plans. We're prioritising building a stable core debugging experience and a first party integration with React DevTools. We understand that this leaves a tooling gap for popular developer extensions such as Redux — for the time being you will need to use an alternative debugger (e.g. |
Beta Was this translation helpful? Give feedback.
-
|
except that react native debugger can not be used anymore with v73+, so we lost network and redux debugging in the process. I just updated our app tp v73 and I cannot debug the redux state or see network request, and the compatibility of RN with tools like react native debugger or reacttotron was removed, so it is a straight up downgrade. |
Beta Was this translation helpful? Give feedback.
-
you can add redux devtools yourself. Have a look here https://github.com/reduxjs/redux-devtools Basically you need to
|
Beta Was this translation helpful? Give feedback.
-
|
cannot copy objects from the console |
Beta Was this translation helpful? Give feedback.
-
|
I don't think there's a bug here, as we match behaviour with Chrome. Chrome's "Copy object" menu item captures a minimal plain text representation. Chrome 123 (web) 
React Native (Hermes/New Debugger) 
|
Beta Was this translation helpful? Give feedback.
-
|
Try to right click the object in the new debugger and then click |
Beta Was this translation helpful? Give feedback.
-
[Known issue] Keyboard shortcuts for zoom controls are nonfunctional |
Beta Was this translation helpful? Give feedback.
-
Introduction
In React Native 0.73, we're shipping a Technical Preview of our experimental new debugger experience (opt-in via
npx react-native start --experimental-debugger).This comes with:
jto debug shortcut in React Native CLI.The new debugger is experimental and does not represent the desired stable launch of this experience in future — which we will be holding to a higher quality bar than the existing debugging offerings.
What we haven't improved, yet!
The new debugger does not yet come with some fundamental improvements we are making to our backend debugging stack. Among other things, these future improvements aim to:
Discussion points
⬆️ So, as of 0.73, the new debugger shares some of the reliability issues and traps with the current debugging architecture(!). We want to use this thread to:
Beta Was this translation helpful? Give feedback.
All reactions