Skip to content

Commit 907c0e3

Browse files
authored
Add Expo web debugging documentation (microsoft#2019)
1 parent 9f8c460 commit 907c0e3

1 file changed

Lines changed: 26 additions & 1 deletion

File tree

README.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ Using this extension, you can **debug your code and quickly run `react-native` c
4141
- [Expo applications](#expo-applications)
4242
- [Debug on Expo Go](#debug-on-expo-go)
4343
- [Debug on expo-dev-client](#debug-on-expo-dev-client)
44+
- [Debug on Expo Web](#debug-on-expo-web)
4445
- [Configuring Expo](#configuring-expo)
4546
- [Expo Hermes](#expo-hermes)
4647
- [Windows applications](#react-native-for-windows)
@@ -365,9 +366,33 @@ If you want to debug Expo app using [expo-dev-client](https://docs.expo.dev/deve
365366

366367
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).
367368

369+
### Debug on Expo Web
370+
371+
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:
372+
373+
1. Open your project in VS Code with this extension installed.
374+
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.
375+
3. Add Expo Web debugging configure in `launch.json`:
376+
377+
```json
378+
"configurations": [
379+
{
380+
"name": "Debug Expo Web - Experimental",
381+
"request": "launch",
382+
"type": "reactnativedirect",
383+
"cwd": "${workspaceFolder}",
384+
"platform": "expoweb",
385+
"browserTarget": "chrome",
386+
"url": "http://localhost:19006"
387+
}
388+
]
389+
```
390+
391+
4. Execute and start debugging
392+
368393
### Configuring Expo
369394

370-
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.
395+
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.)
371396

372397
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:
373398

0 commit comments

Comments
 (0)