Debug Android Ionic Application (Android WebView调试) Unbound Breakpoints

Question

我在使用 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 studios 我选择我的设备并点击调试

Visual Studio Code I select“附加到 Android Webview”配置并附加 Select 我的设备 Select 应用程序名称

Answer 1

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

我知道这不是您要寻找的东西，但它可以成为有效的解决方法：D

在我看来，它也更有效，因为它允许您咨询网络呼叫和 rest...

Answer 2

您需要确保

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

ionic cap run android -l --external

2. 在 webview 启动后，您已经开始了 android webview 调试（显示在 chrome 检查中）

Answer 3

我今天遇到了几乎同样的问题，终于让它工作了。 我不想在 Visual Studio Code 中调试它，只在浏览器中调试它，但先决条件应该是相同的。 所以即使我迟到了，我也会分享我的发现

为了能够调试 angular 应用程序，更一般地说是 *.ts 文件，您需要源映射出现在客户端中。 “通常”只加载最小化的文件。 因为这些文件与您放置断点的文件不匹配，所以调试器无法匹配行号、变量名......

要创建源地图，您需要在angular.json的构建选项中的某处添加"sourceMap": true, 。 然后在您的应用程序中获取它，您有不同的选择，我只测试了第一个。

1. 将--inline选项添加到ionic cap sync ，如ionic cap sync --inline 。 （参见 [capacitor cli docu]( https://capacitorjs.com/docs/cli/commands/sync我通过ionic 论坛中的这篇文章找到了 thankfullu 。
2. 我还阅读了 Ravith B. 发布的内容。
3. 创建您自己的内联源 map function。 这里有描述

我没有测试 2. 和 3. 所以我只是引用了它们。

验证源map是否实际可用

1. 在设备上部署您的应用
2. 在你的开发机器（不是设备）上打开 chrome 浏览器
3. 输入 chrome://inspect/devices
4. 你应该看到你的设备，连接到它（ inspect ）
5. 打开开发者工具 (F12)
6. 在“ Sources ”选项卡中，您应该会看到最小化的文件以及webpack://

当您打开webpack://时，您应该会找到与 IDE 类似的结构，您可以在那里导航文件并设置断点。 您现在应该还可以使用 IDE / Visual Studio Code 进行调试。