VSCode 中的 Android 模拟器 Chrome 调试答案

【问题标题】：Android Emulator Chrome Debug in VSCodeVSCode 中的 Android 模拟器 Chrome 调试
【发布时间】：2021-10-21 00:44:34
【问题描述】：

我通常如何在 chrome 中调试

当我在 VSCode 中调试我的 Web 应用程序时，我可以在 launch.json 中创建一个配置并在调试器中运行它，以便将调试器附加到 Chrome 实例。

{
  "version": "0.2.0",
  "configurations": [
      {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",

      "webRoot": "${workspaceFolder}"
    }
  ]
}

这允许我在 VSCode 中而不是在 DevTool 中创建断点。在 VSCode 中浏览我的 React 文件比在 DevTools 中更容易。

我如何在 Android Studio 模拟器的 chrome 上进行调试

要在模拟 Android 上检查我的网络应用，我在模拟 Android 的 Chrome 浏览器中打开我的网络应用。然后我转到我的桌面 Chrome 浏览器并导航到 chrome://inspect/#devices 并单击模拟设备上的“检查”。然后我可以在 Chrome DevTools 中设置断点。

我可以在 vscode 中调试模拟的 Android 吗？

是否可以像我通常使用 Chrome 一样将这个 Android 模拟器的 Chrome 附加到 VSCode 调试器？我宁愿在 VSCode 中进行调试，而不是通过 DevTools。

【问题讨论】：

标签： android google-chrome debugging visual-studio-code android-emulator

【解决方案1】：

我设法使用这个 VS Code 扩展使其工作：

https://marketplace.visualstudio.com/items?itemName=mpotthoff.vscode-android-webview-debug

您需要知道您的 adb 设备序列号，可以通过在终端上运行 adb devices 获得（如果您没有安装 adb，则可以使用 sudo apt install adb 安装它）。就我而言，它返回了：

List of devices attached
emulator-5554   device

注意：我建议在启动模拟设备之前至少运行一次前面的命令，因为当我第一次运行并且我的模拟设备已经打开时，它无法被检测到。运行一次后，它会启动它的守护进程，然后您可以启动模拟器并使用命令列出设备。

然后您可以将此配置添加到您的 launch.json 文件中：

{
  "type": "android-webview",
  "request": "attach",
  "name": "Attach to Chrome on Emulated Android Device",            
  "webRoot": "${workspaceFolder}",
  "device": "emulator-5554",
  "application": "com.android.chrome"
}

然后您必须启动您的网络应用程序（例如通过yarn start），然后使用您桌面的本地 IP（例如192.168.1.10:3000）在模拟设备的 chrome 浏览器中访问该应用程序。

配置完所有这些后，我能够启动 VS Code 调试器，将其附加到模拟设备的 chrome 上，并且运行良好。

【讨论】：