如何在VSCode中调试Android模拟器Chrome内的Web应用？

完全可以实现，无需借助桌面端Chrome DevTools，直接通过VSCode的Chrome调试器绑定安卓模拟器的Chrome实例即可，操作流程如下：

前置准备 #

• 开启安卓模拟器的开发者选项：连续点击「设置-关于手机-版本号」5次触发开发者模式
• 进入「设置-系统-开发者选项」，开启USB调试开关
• 本地Android SDK环境配置完成，终端执行adb devices可以正常识别到当前运行的模拟器
• 模拟器内打开Chrome，访问你需要调试的Web应用页面

配置端口转发 #

执行adb命令将模拟器Chrome的调试端口映射到本地：

adb forward tcp:9222 localabstract:chrome_devtools_remote

修改VSCode launch.json配置 #

将原有launch模式的配置替换为attach模式，参考配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "attach",
      "name": "Attach to Android Emulator Chrome",
      "port": 9222,
      "address": "localhost",
      "url": "http://localhost:3000", // 替换为你实际的Web应用访问地址，和模拟器打开的地址保持一致
      "webRoot": "${workspaceFolder}"
    }
  ]
}

启动调试 #

• 确保模拟器Chrome已经打开目标应用页面
• VSCode侧边栏切换到「运行和调试」面板，选中上面新增的Attach to Android Emulator Chrome配置，点击启动按钮
• 稍等几秒调试器连接成功后，就可以直接在VSCode的项目源码中打断点调试，和调试本地Chrome的体验完全一致

注意事项 #

• 如果本地9222端口被占用，可以自行替换为其他空闲端口，保持adb forward命令里的端口和launch.json里的port参数一致即可
• 该方案同样适用于安卓真机的Chrome调试，操作流程完全相同，只需提前给真机开启USB调试并通过数据线连接电脑即可
• 如果是调试App内的WebView页面，需要额外在原生代码中给WebView实例开启setWebContentsDebuggingEnabled(true)配置

内容的提问来源于stack exchange，提问作者Dashiell Rose Bark-Huss