From f4ab712bce5112934efe1194c7d9e3b7fb67499a Mon Sep 17 00:00:00 2001 From: EzioLi Date: Tue, 15 Aug 2023 14:03:57 +0800 Subject: [PATCH] Add Expo web debugging documentation --- README.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8085f7630..6907be38b 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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: