Unable to debug with webpack enabled

[joshcomley]

On a brand new fresh project generated from a brand new install of SideKick (using the Angular tabbed template), if I add the appropriate "tnsArgs":["--bundle"] into launch.json then and run "Launch on Android", VS Code fails to hit any breakpoints, and breakpoints are greyed out, marked as an "Unverified breakpoint".

I can confirm my web.config.js is unchanged from the template, including having the correct devtool: sourceMap ? "inline-source-map" : "none".

If I put debugger; in my code and run, it is hit, but in a separate window to the original source code.

My set up: Windows - 10 NativeScript - 4.2.4 VS Code - 1.27.2 nativescript-dev-webpack - 0.16.0

Is there anything I can try to get them working? As I understand, debugging webpacked NS in VS Code is supported (according to: https://docs.nativescript.org/tooling/visual-studio-code-extension#debug-webpack).

Many thanks

[joshcomley]

The answer to this lies in the mismatch between the documentation for how to debug webpack and the starter template.

launch.json should be edited as follows:

{
    "name": "Launch on Android",
    "type": "nativescript",
    "request": "launch",
    "platform": "android",
    "appRoot": "${workspaceRoot}",
    "sourceMaps": true,
    "watch": true,
    "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceRoot}/src/*"
    },
    "tnsArgs": ["--bundle"]
},

Specifically pertaining above to the sourceMapPathOverrides section; the root application code folder in the templates generated by SideKick (at least the one I used) is src, not app, so "webpack:///*": "${workspaceRoot}/src/*" is needed instead of "webpack:///*": "${workspaceRoot}/app/*".

[sis0k0]

Good catch! Thank you!