调试Android Ionic Application (Android WebView 调试) Unbound Breakpoints答案

【问题标题】：Debug Android Ionic Application (Android WebView Debugging) Unbound Breakpoints调试Android Ionic Application (Android WebView 调试) Unbound Breakpoints
【发布时间】：2022-01-19 18:45:48
【问题描述】：

我在使用 VScode 调试部署在本机 android 设备上的 Angular Ionic 应用时遇到问题。

我遵循以下 - 在 Android 中使用 Visual Studio Code 进行调试

https://ionicframework.com/docs/troubleshooting/debugging

我的launch.json如下

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "https://localhost:4300",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "android-webview",
            "request": "attach",
            "name": "Attach to Android WebView",
            "webRoot": "${workspaceFolder}/www",
            "trace": true,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:/*": "${workspaceFolder}/*"
            }
        }
    ]
}

我成功连接到 ADB，因为我可以在调试器上单击刷新，并且本机 android 上的应用程序确实会刷新，所以我知道连接良好。

我在 app.component.ts 上放了一个断点，它显示了一个灰色的轮廓圆圈。鼠标悬停显示未绑定断点。

我错过了什么？

我的进程是我运行的

离子上限同步离子帽打开android

Android 工作室我选择我的设备并点击调试

Visual Studio Code 我选择“附加到 Android Webview”配置并附加选择我的设备选择应用名称

【问题讨论】：

标签： android debugging ionic-framework visual-studio-code

【解决方案1】：

我对 Ionic Apps 的建议是使用 chrome://inspect（或类似的）调试 typescript 端，并将浏览器控制台用作“ionic serve”。

我知道这不是您要找的东西，但它可能是一个有效的解决方法：D

在我看来，它也更有效，因为它允许您查询网络调用和其他...

【讨论】：

【解决方案2】：

你需要确保

您正在使用命令运行应用程序

ionic cap run android -l --external

您已在 webview 启动后启动了 android webview 调试（显示在 chrome 检查中）

【讨论】：