debugging 调试Android Ionic应用程序(Android WebView调试)未绑定断点

rt4zxlrg  于 2023-02-04  发布在  Android
关注(0)|答案(3)|浏览(187)

我在使用VSCode调试部署在原生Android设备上的Angular 离子应用程序时遇到了问题。
我遵循了以下步骤-在Android中使用Visual Studio代码进行调试
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 studios我选择我的设备,然后单击调试
Visual Studio代码我选择"连接到Android Webview"配置并连接选择我的设备选择应用程序名称

de90aj5v

de90aj5v1#

我对离子应用程序的建议是使用Chrome://Inspect(或类似的)调试 typescript 端,并像在“离子服务器”上一样使用浏览器控制台。
我知道这不完全是你想要的,但它可以是一个有效的变通办法:D
在我看来,它也更有效率,因为它可以让您咨询网络电话和其余的...

w80xi6nr

w80xi6nr2#

你得确保
1.您正在使用以下命令运行应用程序
ionic cap run android -l --external
1.您已经在webview启动后启动了android webview调试(显示在chrome inspect上)

wfypjpf4

wfypjpf43#

今天我也在和几乎同样的问题斗争,最后终于让它工作了。我不想在Visual Studio代码中调试它,只想在浏览器中调试,但是前提条件应该是相同的。所以即使我迟到了,我也会分享我的发现
为了能够调试Angular 应用程序,更一般的是 *.ts文件,你需要源Map存在于客户端。“通常”只有最小化的文件被加载。因为那些文件不匹配你放置断点的文件,调试器不能匹配行号,变量名,...。
要创建源Map,您需要将"sourceMap": true,添加到angular.json的构建选项中。要将其添加到应用中,您有不同的选项,我只测试了第一个选项。
1.将--inline选项添加到ionic cap sync中,就像ionic cap sync --inline一样。(参见[capacitor cli docu](https://capacitorjs.com/docs/cli/commands/sync,我通过ionic forums中的这篇文章找到了它。
1.我也读了Ravith B.发布的内容。
1.创建自己的内联源Map函数。这是here描述的
我没有测试2和3,所以我只是参考了它们。
验证源Map是否确实可用
1.在设备上部署应用
1.在你的开发者机器上打开chrome浏览器(不是设备)
1.输入chrome://检查/设备
1.你应该看到你的设备,连接到它(inspect
1.打开开发人员工具(F12)
1.在“Sources”选项卡中,您应看到最小化的文件以及webpack://
当你打开webpack://的时候,你会发现它的结构和你的IDE类似,你可以在那里浏览文件和设置断点。你现在也可以使用你的IDE / Visual Studio代码来调试了。

相关问题