Skip to content

Commit

Permalink
Update debugging docs as of RNW 0.73
Browse files Browse the repository at this point in the history
  • Loading branch information
jonthysell committed Mar 14, 2024
1 parent 5f22fe7 commit 856478a
Show file tree
Hide file tree
Showing 6 changed files with 463 additions and 12 deletions.
14 changes: 8 additions & 6 deletions docs/debugging-javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,22 @@ This page details how to debug the JavaScript code in your RNW applications, inc
## Web Debugging

*Web Debugging* (also referred to as *Remote JS Debugging*) is the original JS debugging solution for RN.
*Web Debugging* (also referred to as *Remote JS Debugging*) is the original JS debugging solution for RN and the default solution enabled in new RNW projects.

It works by running your app's JS code within the JS engine of an external process, usually a web browser such as Edge (or Chrome). You're then able to debug your app using the development tools of that external process, i.e. the browser's web development tools.

> Web Debugging requires the Metro Packager, as Metro proxies the connection between your native Windows app and the remote JS engine.
> **Important:**: Web Debugging was officially marked as deprecated in RN 0.73 and will be removed in a later release.
### Web Debugging Tool Support

| JavaScript Engine | Edge Developer Tools | Visual Studio Code<br/> w/ React Native Tools |
|:------------------|:-:|:-:|
| Chakra (Default) |||
| Hermes |||
| Hermes (Default) |||
| Chakra |||

> **Important:** As your code is run in the remote JS engine, the app's embedded engine is not used. This can cause your released app to behave differently when it *is* using the embedded engine. See [Web vs. Direct Debugging](#web-vs-direct-debugging) for details.
> **Important:** As your code is run in the remote JS engine, the app's embedded engine is not used. This can cause your released app to behave differently when it *is* using the embedded engine. See [Web vs. Direct Debugging](#web-vs-direct-debugging) for details.
### Step 1: Enable Web Debugging

Expand Down Expand Up @@ -167,8 +169,8 @@ Rather than running your app's JS code on an external JS engine (as with Web Deb

| JavaScript Engine | Edge Developer Tools | Visual Studio | Visual Studio Code | Visual Studio Code<br/> w/ React Native Tools |
|:------------------|:-:|:-:|:-:|:-:|
| Chakra (Default) | 🟥 | ✅ | 🟥 | 🟥 |
| Hermes | | ✅ | | |
| Hermes (Default) | | ✅ | | |
| Chakra | 🟥 | ✅ | 🟥 | 🟥 |

> **Important:** Direct Debugging is relatively new and may still have some rough edges, depending on your choice of engine and debugger. See [Web vs. Direct Debugging](#web-vs-direct-debugging) for details.

Expand Down
4 changes: 2 additions & 2 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Remember to call `react-native init` from the place you want your project direct
<!-- See https://www.npmjs.com/package/react-native?activeTab=versions for the RN version tags. -->

```bat
npx react-native@nightly init <projectName> --version "nightly"
npx --yes react-native@nightly init <projectName> --version "nightly"
```

### Navigate into this newly created directory
Expand All @@ -38,7 +38,7 @@ cd projectName
Lastly, install the React Native for Windows packages.

```bat
npx react-native-windows-init --overwrite
npx --yes react-native-windows-init --overwrite
```

> The --overwrite flag copies a custom `metro.config.js` file. If you are starting a new app, this should have no impact. If you are adding Windows to your existing app and you have modified the `metro.config.js` file, please back up your changes, run the command and copy over to take effect.
Expand Down
2 changes: 1 addition & 1 deletion docs/hermes.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Hermes is supported on Windows, generally providing better performance character

### Enabling Hermes for new projects

Hermes is enabled by default for React Native Windows project.
Hermes is enabled by default for React Native Windows projects.

### Using Hermes in an existing project

Expand Down
Loading

0 comments on commit 856478a

Please sign in to comment.