Android Debugging

Ionic Framework
1

Just tried with Visual Studio Code to debug my Ionic Angular App.
I am using following launch.json.
I hit F5 and select my Device and Webview it will load and the debug bar is visable.
After a view seconds the bar disappear.
If i add in the launch.json a port it works but in the console red messages: “Could not read source map for http://localhost/pages-login-login-module-es2015.js: Unexpected 503 response from http://localhost/pages-login-login-module-es2015.js.map: connect ECONNREFUSED 127.0.0.1:80”

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "android-webview",
            "request": "attach",
            "name": "Attach to Android WebView",
            "webRoot": "${workspaceFolder}/www",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:/*": "${workspaceFolder}/*"
            }
        }
    ]
}
1 Like
2

Sloved the problem by myself.

You need to downgrade two vscode extensions

  • Android WebView Debugging to Version: 1.1.2
  • Debugger for Chrome to 4.12.12

I think the problem comes with the new extension version from the “Android Webview Debugging”
it uses “ms-vscode.js-debug” instead of “Debugger for Chrome” and for me it was not possible to debug some things with it.

Also i added the port attribute to my launch.json it looks like:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "android-webview",
            "request": "attach",
            "name": "Attach to Android WebView",
            "port": 9222,
            "webRoot": "${workspaceFolder}/www",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:/*": "${workspaceFolder}/*"
            }
        }
    ]
}
1 Like