Debugging from the very first init


#1

Hey, is it possible to debug the app init flow right from the very first bootstrap? Every time I try it seems to boot the app before the debugger initializes and to stop only on a much later breakpoint, like on a button tap etc… Thanks!


#2

If you are using VS Code with the NativeScript extension this should work without a problem.

Extension: https://www.nativescript.org/nativescript-for-visual-studio-code

After installing the extension into VS code click the debug menu then hit the gear in the top left and select “NativeScript”. This will setup all the default debug profiles for you.


#3

Thanks for the quick reply Nick, I’m debugging exactly that way, but the app doesn’t brake on bootload. It finishes loading fully and only when I click a button it brakes on the button breakpoint I’ve set. That way I know that debugger is actually working. Just not the way I wanted. Does braking on init work for you?


#4

Yes it is working for me it will stop immediately if I set a breakpoint. Are you running the latest version of VS code and the NativeScript extension?


#5

It seems this thread died nearly a year ago without any resolution. Interestingly I’m experiencing the same thing - eg the debugger does not break on first launch.

For example, I use XML with JS and create an “onLoaded” method with a console log:

exports.onLoaded = function(args) {
    console.log("onLoaded");
}

If I place a breakpoint on the log message, the app will not break but it will log the message when it starts. However, if I were to navigate to another page and then come back, then the debugger does break on the log message.

Since it supposed to break, based on Nick’s answer, I’m not sure what could be the reason it doesn’t work for me.

VSCode 1.18 & 1.19
{N} 0.7.2


#6

@pentool Normally you’d expect to be able to place breakpoints on whatever line and magically pause there. However, in NativeScript you can’t pause at a breakpoint before the debugger has finished initializing, and that one, well at least its communication, works asynchronously to your code.

In order to break at the beginning, you need to perform an extra step. Have a look at this debugging article https://docs.nativescript.org/tooling/chrome-devtools#debugger, and pay extra attention to the Note, as it has the solution.

And before you ask why I am redirecting you to that page, and not a dedicated one for the VSCode extension - both debuggers follow the same protocol - very often if a solution works for one, it will also work for the other.


#7

Well, thanks for the pointers.

I’ve inserted the debugger; statement into my code, but I’m not quite clear how do I “start the debugging process with the --debug-brk CLI flag”.

I start the debug process from VSCode. Not sure where I am supposed to enter the --debug-brk CLI flag in VSCode to make this happen.

I checked out the various launch flags available for VSCode (https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes) thinking I might have to insert the --debug-brk flag somewhere into the launch file. But I don’t see any particular flag I’m supposed to use for this.

So then I started the whole debug process from the terminal - just for the heck of it - maybe that’s how I was supposed to use it: tns debug ios --emulator --debug-brk

That basically threw various issues at me like it cannot attach to process and such, and left the terminal in limbo (eg, I could not stop the process using Ctrl+C) and had to quit VSCode and the emulator (just to be on the safe side) and start them up again.


#8

In the case of VSCode, in your debug configuration you should have a property stopOnEntry, or pauseOnEntry, I can’t recall which one it was, let VSCode help you there. Set that to true.


#9

Yup, that’s what it is. And in this case, you don’t need to insert the debugger; statement what the documentation said. And you also don’t need to use the --debug-brk flag. I mean, you probably can, I just don’t know how.

The only thing needed to be done (for those who may want to know next time) is to place
"stopOnEntry": true
into your preferred configuration in the “launch.json” file.


#10

@pentool since the VSCode Extension wraps most of CLI’s functionality, and since there is no straightforward way to execute tns commands, the stopOnEntry property will send the–debug-brk` flag for you.


#11

This should be in the docs. Would save a lot of time.