Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Expo web debugging documentation #2019

Merged
merged 1 commit into from Aug 16, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 26 additions & 1 deletion README.md
Expand Up @@ -41,6 +41,7 @@ Using this extension, you can **debug your code and quickly run `react-native` c
- [Expo applications](#expo-applications)
- [Debug on Expo Go](#debug-on-expo-go)
- [Debug on expo-dev-client](#debug-on-expo-dev-client)
- [Debug on Expo Web](#debug-on-expo-web)
- [Configuring Expo](#configuring-expo)
- [Expo Hermes](#expo-hermes)
- [Windows applications](#react-native-for-windows)
Expand Down Expand Up @@ -365,9 +366,33 @@ If you want to debug Expo app using [expo-dev-client](https://docs.expo.dev/deve

9. Run `Attach` command in debug tab and debugger will start to work(If debugger not go into breakpoint, you need to reload app from Metro to refresh app since maybe it had some conflicts between Browser devtools debug session and RNT debug session).

### Debug on Expo Web

Expo support open application in browser, the expo web application is generated by [react-native-web](https://necolas.github.io/react-native-web/). It can help user open application without any Android emulator, iOS simulator or device. React-native-tools supports debugging Expo Web application in Chrome and Edge. Follow below steps to start Expo Web debugging:

1. Open your project in VS Code with this extension installed.
2. Check and install related package: `react-dom`, `react-native-web` and `@expo/webpack-config` (this package is deprecated from Expo 49) by `npx expo install` command.
3. Add Expo Web debugging configure in `launch.json`:

```json
"configurations": [
{
"name": "Debug Expo Web - Experimental",
"request": "launch",
"type": "reactnativedirect",
"cwd": "${workspaceFolder}",
"platform": "expoweb",
"browserTarget": "chrome",
"url": "http://localhost:19006"
}
]
```

4. Execute and start debugging

### Configuring Expo

The extension supports running through Exponent not just the applications created with Expo but even pure React Native applications (in that case you need to add `expo` package to `node_modules` in order to make it work with Expo: `npm install expo --save-dev`. In either cases it uses `app.json` configuration file in the root of the project.
The extension supports running through Exponent not just the applications created with Expo but even pure React Native applications (in that case you need to add `expo` package to `node_modules` in order to make it work with Expo: `npm install expo --save-dev`. In either cases it uses `app.json` configuration file in the root of the project.)

If you are running `Debug in Exponent` configuration or any of pallette commands like `Run in Exponent`, `Publish to Exponent` then this file will be created automatically if absent or updated with the following basic configuration section:

Expand Down