Enable debugging with source maps

[manoldonev]

Currently debugging with webpack is available but you cannot debug the original source -- enable this functionality by inlining source maps when app is started with tns debug ... --bundle command.

Debugging with source maps should be supported both from chrome devtools as well as vscode.

[manoldonev]

Comparison of webpack performance without source maps, with inline-cheap-module-source-map, and with inline-source-map:

Tests executed on https://github.com/NativeScript/nativescript-sdk-examples-ng and https://github.com/NativeScript/nativescript-sdk-examples-js apps and represent the "total" column (in seconds) from the time ./node_modules/.bin/webpack --env.android command output (e.g. ./node_modules/.bin/webpack --env.android 3.71s user 0.39s system 109% cpu 3.733 total).

[manoldonev]

Also [for typescript projects], it seems there is something different about how https://github.com/s-panferov/awesome-typescript-loader handles inline-source-map vs inline-cheap-module-source-map webpack devtool option (the former is automagically handled by the loader, while the latter isn't). This(?) results in a different folder structure generated for the webpack:// protocol.

TypeScript project with inline-source-map:

TypeScript project with inline-cheap-module-source-map:

Ultimately this requires different sourceMapPathOverrides in the NativeScript vscode extension:

inline-source-map:

            "sourceMapPathOverrides": {
               "webpack:///*": "${workspaceRoot}/app/*"
           }

inline-cheap-module-source-map:

            "sourceMapPathOverrides": {
               "webpack:///*": "${workspaceRoot}/*"
           }

[IAMtheIAM]

I tried adding-env.sourceMapbut it did nothing to my webpack bundle. Is this merged into NPM yet?

[NickIliev]

@IAMtheIAM you don't need to provide --env.sourceMap just the latest nativescript-dev-webpack (version 0.15.0 and above)

To enable debugging of a bundled app (Webpacked) with Chrome Dev Tools use

rm -rf node_modules platforms hooks webpack.config.js
npm i nativescript-dev-webpack@latest --save-dev
tns debug android --bundle

If you want to debug a Webpack enabled app with VSCode you need to manually add tnsArgs: ["--bundle"] to the launch.json

rm -rf node_modules platforms hooks
npm i nativescript-dev-webpack@latest --save-dev

and the options in launch.json should look like this one

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

[IAMtheIAM]

@NickIliev thanks for the fast reply. I have followed the instructions and am running nativescript-dev-webpack@0.15.0 - removed node_modules platforms hooks folders, and began the debug session.

I also updated my webpack.config.js to match the new settings by running the updater script and then reapplying my small changes.

It works

devtool: sourceMap ? "inline-source-map" : "none",

that was the missing piece in my webpack config which needed to be enabled. At first I forgot that line, no sourcemaps. Now it works. Thank you!

Only thing now is, it is showing the generated JS instead of the source TS. The file names are mapped properly, but not the TS source. Hmm... any ideas?

[NickIliev]

@IAMtheIAM you should see the TS files (if debugging TS or Angular project) at least these are the files I am seeing through my test project. The TS files (along with all XML, CSS) in ChromeDevTools should be located in

Elements tab > webpack:// > .

[NickIliev]

Implemented in the latest nativescript-dev-webpack via the linked PRs

[farfromrefug]

@NickIliev I still dont see the correct stacktrace with the latest dev webpack.
I run my app through the terminal using tns run anroid --bundle --env.sourceMap
And i get stacktrace like that on error:

System.err: Error calling module function 
System.err: 
System.err: TypeError: Cannot read property 'value' of undefined
System.err: File: "file:///data/data/com.microoled.mini2.smartapp/files/app/bundle.js, line: 7994, column: 36
System.err: 
System.err: StackTrace: 
System.err:     Frame: function:'timelineProfileFunctionFactory', file:'file:///data/data/com.microoled.mini2.smartapp/files/app/bundle.js', line: 7994, column: 37
System.err:     Frame: function:'log', file:'file:///data/data/com.microoled.mini2.smartapp/files/app/bundle.js', line: 7971, column: 16
System.err:     Frame: function:'__decorate', file:'/data/data/com.microoled.mini2.smartapp/files/internal/ts_helpers.js', line: 13, column: 34
System.err:     Frame: function:'', file:'file:///data/data/com.microoled.mini2.smartapp/files/app/bundle.js', line: 7058, column: 5
System.err:     Frame: function:'./handlers/BluetoothHandler.ts', file:'file:///data/data/com.microoled.mini2.smartapp/files/app/bundle.js', line: 7075, column: 2

The source map is present in the compiled js files but the source map is not used on "print".
Any way to fix that? Should i create another issue?

[NickIliev]

@farfromrefug

• You don't have to pass the --env.sourceMap flag.
• Ideally, you need the source maps during debug - is the issue present when you execute debug instead of run (for Chrome DevTools) .. for VSCOde debug you would use the debug interface and again not the run command.

If you are having troubles with debug then please open a new issue while describing the case in details.

[farfromrefug]

@NickIliev i am not running through vscode debugger. Only tns run through terminal.
I think tns run should also "translate" the stacktrace

[rynop]

@NickIliev I'm running tns debug ios --hmr - should I see .ts source line numbers on console.log() calls? All console. calls are originating from app/0.js. Ex:

CONSOLE LOG file:///app/0.js:644:20: onPaymentSuccess

if not, is there a way for console. to honor source maps?

PS: love hmr BTW. Great work!

[farfromrefug]

@rynop there is a bug in the cli. it won't translate for webpack projects. I opened an issue there

[arielnmz]

@rynop there is a bug in the cli. it won't translate for webpack projects. I opened an issue there

Can you link to the other issue?

[jessecrossen]

@arielnmz I'm guessing it's this issue, in case anyone else is looking for it: NativeScript/nativescript-cli#4604

[mrkvn]

As mentioned by @NickIliev, adding the following to launch.json fix it for me (though app is changed to src):

 "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceRoot}/app/*"
    },

Why is this not default? I've watched an old video tutorial of nativescript and they just launch the debugger in VSCode and it just works. Didn't change anything to launch.json. Is this a problem within nativescript extension in VSCode?