VSCode 中的 Android 模拟器 Chrome 调试

Question

我通常如何在 chrome 中调试

当我在 VSCode 中调试我的网络应用程序时，我可以在 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 进行调试。

Answer 1

我设法使用这个 VS Code 扩展让它工作:

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

您需要知道您的 adb 设备序列号，可以通过在您的终端上运行 adb devices 获得(如果您没有安装 adb，您可以使用 sudo apt 安装它安装 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"
}

然后您必须启动您的 Web 应用程序(例如，通过 yarn start)，然后使用桌面的本地 IP(例如 192.168.1.10:3000).

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