[docs] Overhaul "Debugging Basics" guide by huntie · Pull Request #3898 · react/react-native-website

huntie · 2023-10-24T14:01:13Z

This is an opinionated refresh of the "Debugging Basics" guide.

Note

Please use the hosted preview site to browse (/docs/next/debugging).

Key changes

Add instructions about launching the JS debugger (existing and new methods — detailed below).
Add "React DevTools" intro.
Refreshes and adds new images, tighten existing wording.
Remove "Safari Developer Tools" instructions (this is being imminently relocated under an "Other Debugging Methods" page).

"Opening the Debugger"

This contains three tabs of instructions which will represent available debugging options in 0.73:

Hermes Debugger / Expo
Flipper
New Debugger (Experimental)

Default — "Flipper" tab

Why this is the default selection:
- While Flipper is going away, potentially in the next React Native release, it remains the default action for "Open Debugger" in 0.73.
- The "In Expo projects"... notice above this should short-circuit the instructions for Expo users.
Ordering: The "Flipper" tab is ordered after "Hermes Debugger / Expo", since this is 1/ the Expo default today, 2/ more likely to stick around after we've removed the "Flipper" tab.
Sidenote: This is the first reference to Flipper in our docs(!) — but again represents the current state of the system.

netlify · 2023-10-24T14:05:37Z

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	`722a320`
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/6537cf53a27c140008941478
😎 Deploy Preview	https://deploy-preview-3898--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

huntie · 2023-10-24T14:09:05Z


 Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal.

-![](/docs/assets/DevMenu.png)


FYI: Previous asset remains referenced in the 0.72-versioned docs.

blakef

LGTM

blakef · 2023-10-24T14:30:54Z

-Console errors and warnings are displayed as on-screen notifications with a red or yellow badge, and the number of errors or warning in the console respectively. To view a console error or warnings, tap the notification to view the full screen information about the log and to paginate through all of the logs in the console.
-
-These notifications can be hidden using `LogBox.ignoreAllLogs()`. This is useful when giving product demos, for example. Additionally, notifications can be hidden on a per-log basis via `LogBox.ignoreLogs()`. This is useful when there's a noisy warning that cannot be fixed, like those in a third-party dependency.
+The debugger allows you to understand and debug how your JavaScript code is running, similar to a web browser.


[Subjective]: The debugger allows you to understand and debug how your JavaScript application code is running. The experience is very similar to a popular web browser's debugging experience.

blakef · 2023-10-24T14:32:44Z


 :::info
-Ignore logs as a last resort and create a task to fix any logs that are ignored.
+**In Expo projects**, press <kbd>j</kbd> in the CLI to directly open the Hermes Debugger.


Maybe with something similar for the new debugger?

blakef · 2023-10-24T14:34:51Z

-// Ignore all log notifications:
-LogBox.ignoreAllLogs();
-```
+Hermes supports the Chrome debugger by implementing the Chrome DevTools Protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a physical device.


Maybe a chance to link to our new generated docs?

Hermes supports the Chrome debugger by implementing the Chrome DevTools Protocol.

[Opinion] I'm not sure if it's too verbose, but emphasising the application code seems important. Totally subjective perspective here.

This means Chrome's tools can be used to debug the React Native JavaScript application code running on a Hermes VM. Applications can be debugged on both emulators or physical devices.

blakef · 2023-10-24T14:40:06Z


-### Unhandled Errors
+1. In a Chrome browser window, navigate to `chrome://inspect`.
+2. Use the "Configure..." button to add the dev server address (typically `localhost:8081`).


typically -> by default?

blakef · 2023-10-24T14:44:21Z

+:::

-## Chrome Developer Tools
+The React Native team is working on a new JavaScript debugger experience, intended to replace Flipper, with a preview available as of React Native 0.73.


[Opinion]

The React Native team is working to replace Flipper witha new JavaScript debugger experience. A preview is available as of React Native 0.73.

blakef · 2023-10-24T15:03:35Z


-:::info
-**Starting from version 0.73, Remote Debugging is deprecated.** These Chrome DevTools steps use the _Remote Debugging_ workflow, where JS code is executed in Chrome's V8 engine on the dev machine during debugging, instead of on-device. This method is incompatible with some New Architecture features such as JSI.
+The new debugger can be enabled via React Native CLI. This will also enable <kbd>j</kbd> to debug.


[Opinion]
To use the new debugger, start your React Native application with this experimental flag:

npx react-native start --experimental-debugger

You can then launch the debugger by pressing j. A video might also be useful?

CleanShot.2023-10-24.at.16.02.08.mp4

facebook-github-bot added CLA Signed p: Facebook Partner labels Oct 24, 2023

huntie requested review from blakef and motiz88 October 24, 2023 14:01

[docs] Overhaul "Debugging Basics" guide

722a320

huntie force-pushed the new-debugging-docs branch from 5c3f329 to 722a320 Compare October 24, 2023 14:06

huntie commented Oct 24, 2023

View reviewed changes

blakef approved these changes Oct 24, 2023

View reviewed changes

huntie merged commit f6360b2 into react:main Oct 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[docs] Overhaul "Debugging Basics" guide#3898

[docs] Overhaul "Debugging Basics" guide#3898
huntie merged 1 commit into
react:mainfrom
huntie:new-debugging-docs

huntie commented Oct 24, 2023 •

edited

Loading

Uh oh!

netlify Bot commented Oct 24, 2023 •

edited

Loading

Uh oh!

huntie Oct 24, 2023

Uh oh!

blakef left a comment

Uh oh!

blakef Oct 24, 2023

Uh oh!

blakef Oct 24, 2023

Uh oh!

blakef Oct 24, 2023

Uh oh!

blakef Oct 24, 2023

Uh oh!

blakef Oct 24, 2023

Uh oh!

blakef Oct 24, 2023

Uh oh!

blakef Oct 24, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal.

		![](/docs/assets/DevMenu.png)

Uh oh!

Conversation

huntie commented Oct 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Key changes

"Opening the Debugger"

Uh oh!

netlify Bot commented Oct 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for react-native ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

blakef left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

huntie commented Oct 24, 2023 •

edited

Loading

netlify Bot commented Oct 24, 2023 •

edited

Loading