Enable debugging with source maps

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.

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).

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}/*"
           }

feat: add source map paths for debugging with webpack

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

@IAMtheIAM

@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"]
},

@NickIliev

@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?

@IAMtheIAM

@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:// > .

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

@NickIliev

@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?

@farfromrefug

@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.

@NickIliev

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

@NickIliev

@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!

@rynop

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

@rynop

@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?

@arielnmz

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

@NickIliev

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?

Navigation Menu

Repository navigation

Enable debugging with source maps #603

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Enable debugging with source maps #603

Description

Activity

manoldonev commented on Jul 6, 2018

manoldonev commented on Jul 6, 2018

IAMtheIAM commented on Jul 31, 2018

NickIliev commented on Aug 1, 2018

IAMtheIAM commented on Aug 1, 2018

NickIliev commented on Aug 2, 2018

NickIliev commented on Aug 7, 2018

farfromrefug commented on Feb 25, 2019

NickIliev commented on Feb 25, 2019

farfromrefug commented on Feb 25, 2019

rynop commented on May 14, 2019

farfromrefug commented on May 14, 2019

arielnmz commented on Jun 26, 2019

jessecrossen commented on Aug 1, 2019

mrkvn commented on Feb 11, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions