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

Posted 2023-03-16

技术标签:

【中文标题】调试Android Ionic Application (Android WebView 调试) Unbound Breakpoints【英文标题】：Debug Android Ionic Application (Android WebView Debugging) 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”配置并附加选择我的设备选择应用名称

【问题讨论】：

【参考方案1】：

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

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

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