如何使用VSCode结合Expo调试react-native-web项目？

现有React Native Tools扩展自带的调试配置仅适配Expo客户端运行场景，要在浏览器中调试react-native-web运行表现，直接按以下步骤配置即可：

• 修改项目下.vscode/launch.json文件，新增浏览器调试配置，原有Expo客户端调试配置可保留共存，完整配置参考如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug RN Web (Chrome)",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:19006",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
                "webpack:///./*": "${workspaceFolder}/*",
                "webpack:///*": "*"
            }
        },
        {
            "name": "Debug in Exponent",
            "request": "launch",
            "type": "reactnative",
            "cwd": "${workspaceFolder}",
            "platform": "exponent",
            "expoHostType": "local"
        }
    ]
}

• 配置完成后，先在VSCode终端执行npx expo start --web启动web端开发服务，Expo web开发模式默认服务端口为19006，如果你手动修改过端口，同步调整配置中url字段的端口值即可。
• 等待浏览器自动打开web端页面并加载完成后，切换到VSCode运行和调试面板，选中Debug RN Web (Chrome)配置项启动调试。
• 调试启动后可直接在源码文件中打行断点，触发对应页面交互时断点会正常命中，支持单步执行、变量查看、调用栈追踪等所有常规调试能力。

注意事项 #

• 无需额外调整React Native Tools扩展的默认设置，扩展不会对web端浏览器调试流程造成干扰。
• 如果启动调试后断点显示为未绑定的空心状态，先确认Expo启动web时处于开发模式，开发模式默认会自动生成sourcemap；如果自定义过webpack配置，将devtool选项设置为eval-source-map即可保证源码映射正常。
• 如果需要调试DOM结构、样式表现，直接在调试打开的Chrome窗口按F12调出开发者工具即可，操作逻辑和普通web项目完全一致。

内容的提问来源于stack exchange，提问作者Mehmet Kaplan