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?