Replies: 32 comments 32 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.
-
|
same problem, any solution? |
Beta Was this translation helpful? Give feedback.
-
|
Neither us or Expo have solved this one yet 😅. We reckon the solution will be to package the DevTools frontend as its own standalone application (potentially, an Electron app) — having reverted a Chrome guest profile approach which nearly solved this internally. Unfortunately, solving this exactly is a lower priority than getting other debugger features ready and stable. |
Beta Was this translation helpful? Give feedback.
-
|
We've resolved this in React Native DevTools by reverting to the approach of asking Chrome to open an app window within the context of your primary Chrome profile.
We aim to evolve and improve this in future, but for now it was medium-to-low pri. |
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.
-
|
Same here, none of it seems to work beyond console and hitting explicit |
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.
-
|
waiting for network debugging! |
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.
-
|
Hi~ floyd ㅋㅋㅋㅋ |
Beta Was this translation helpful? Give feedback.
-
|
@WayneKim92 hi 😄 discussion에 코멘트 달리면 참여자들 모두에게 github 알림이 가더라구요 😅 주의 요망.. ㅎㅎ |
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
|
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.
-
I can confirm that this issue is fixed in the latest release |
Beta Was this translation helpful? Give feedback.
-
[Known issue] Keyboard shortcuts for zoom controls are nonfunctional |
Beta Was this translation helpful? Give feedback.
-
|
Its possible to map dynamically loaded scripts, evaluated by Function constructor? https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/debug_eval_sources/index.html |
Beta Was this translation helpful? Give feedback.
-
|
If you need to debug network. you can use it. proxyman refer to this document to set up the tool: https://docs.proxyman.io/debug-devices/react-native 
|
Beta Was this translation helpful? Give feedback.
-
|
Managed to view network logs using requestly. Both for iOS and Android https://developers.requestly.com/guides/debugging-https-traffic-in-ios-simulator/ Also tested using android studio network inspector and it seems to work |
Beta Was this translation helpful? Give feedback.
-
|
The Charles does it the same. |
Beta Was this translation helpful? Give feedback.
-
|
I'm using Really it's a tough moment in which we haven't got any official tool to debug network interactions. The Peculiar, but real!!! |
Beta Was this translation helpful? Give feedback.
-
|
Can we make the ui like flipper ? It was very confortable and user expérience was great. |
Beta Was this translation helpful? Give feedback.
-
|
When creating an app with the CLI and trying to open the experimental debugger the app opens a Chrome window but nothing loads and the Metro running freezes. app verions: Screenshots: 
|
Beta Was this translation helpful? Give feedback.
This comment has been hidden.
This comment has been hidden.
-
|
The Network panel isn't provided by our frontend or supported by React Native at this time — did you open this in Chrome? Going forward, direct Hermes debugging via Chrome isn't one of our supported flows. When we do add Network debugging support to React Native, it will become available in our frontend. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I opened it in chrome. |
Beta Was this translation helpful? Give feedback.
-
|
Is it possible to add an own plugin? |
Beta Was this translation helpful? Give feedback.
-
|
Not for now. We're exploring the ability to load third party Chrome extensions, but this won't be coming any time soon. |
Beta Was this translation helpful? Give feedback.
-
|
Is possible install the debugger in oldest versions of react-native ? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, unfortunately not. (Sidenote: Thanks, I'll note this as an FAQ!) |
Beta Was this translation helpful? Give feedback.
-
|
It would help to see a table of the features available in the new debugger. Debugging features supported by the new debugger:
Feel free to take the table over and improve/correct it 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Guys, its possible to take a look on this feature? It would be very nice to be possible to debug dynamic loaded snippets. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for this amazing work. I'm using I've found that by fetching the JavaScript bundle using 
Likewise, the contents of the debugger window only seem to populate if I load from Metro as Do any minimal examples exist on how to setup an isolated debugging session for an arbitrary file bundle? |
Beta Was this translation helpful? Give feedback.
-
|
Issue with Experimental Debugger on Android Emulators in React Native 0.73 Hey Guys, 
|
Beta Was this translation helpful? Give feedback.
-
IntroductionHi, Details
Screenshots
|
Beta Was this translation helpful? Give feedback.
-
|
PS: I've gone through the above thread and it looks like these features are low priority right now — no worries |
Beta Was this translation helpful? Give feedback.
and others
-
Important
This discussion thread covers React Native 0.73-0.75, which shipped with an experimental debugger frontend, but not with our next gen debugger stack rewrite.
If you are using React Native 0.76 (including RCs), you are now on React Native DevTools. This experience provides a fundamentally different and more reliable experience than every debugger shipped in previous versions.
If you are on React Native 0.76, please use the correct feedback thread:
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