1

I am having trouble finding a workable solution for debugging nativescript applications. I have tried the following options:

a) tns debug This starts a tool called 'Nativescript Inspector'. It is painfully slow and to add insult to injury: it crashes more than it runs. I have not been able to it to run long enough to find even basic problems. It's perfectly useless to me.

b) tns debug --chrome The chrome debugger is a lot better, but it seems impossible to simply reload. Every time you restart, you need to re-attach a fresh instance. Since this option works by copy & paste of a link, it becomes fairly cumbersome. Additionally, it does not really respect breakpoints properly, especially during app restarts! So ultimately, this is also useless.

c) Sidekick This is supposed to be one of the prescribed methods of debugging. Half the time the debugger does not start. If it does, there is no way to break the flow during application start-up. Since I'm in the process of debugging parts that happen during start-up, I do never get a chance to set a breakpoint, barring tricks like wrapping the bootstrapping phase into a timer (which also costs time). So even this method is not working.

Do I really, really need to get Visual Studio? I really would like to avoid that ...

Jürgen Simon
  • 876
  • 1
  • 12
  • 35

3 Answers3

3

To debug the Views, currently, the best option is to use the debugger that comes with Sidekick.

If you want to debug the logic, however, the best option is to use the NativeScript extension for VS Code, and debug directly from VS Code. :) Hope this helps.

https://marketplace.visualstudio.com/items?itemName=Telerik.nativescript

Shiva Prasad
  • 430
  • 2
  • 12
  • I was trying to avoid running another IDE. I have been using WebStorm for quite some time now and I'm very comfortable and happy with it. I was trying to avoid using VS Code. – Jürgen Simon Nov 05 '17 at 22:58
  • 1
    Well then good news for you!, here's {N} plugin for WebStorm https://plugins.jetbrains.com/plugin/8588-nativescript – Shiva Prasad Nov 05 '17 at 23:35
  • And article that talks about it https://medium.com/@iguissouma/the-n-plugin-for-webstormide-78525a3cfd4f – Shiva Prasad Nov 05 '17 at 23:35
  • I have that installed already. I did not list it in the options above because it does not integrate the debugger. It is basically the same as option b) for debugging. Besides: the projects created with this plugin seem to be incompatible with sidekick. Attempts to run projects generated by this plugin fail invariably with code signing issues on macos. – Jürgen Simon Nov 06 '17 at 11:26
  • Thanks for all the suggestions and infos, but ultimately of all the options present, only Visual Studio Code seems to work in any comfortable manner for the time being. I would love to see true debugging support in the WebStorm plugin, though! – Jürgen Simon Nov 06 '17 at 11:33
1

Debugging code that executes at start up is tricky, so you need to place debugger statements in your code, and start a debugging session with --debug-brk

tns debug ios --chrome --debug-brk

For more information, check the Debugger section in the Chrome DevTools docs - https://docs.nativescript.org/tooling/chrome-devtools#debugger

pkanev
  • 1,486
  • 1
  • 12
  • 20
1

I´m starting with native script and I found that debugging is one of the biggest challenges.

My first approach was the native script extensión for Visual Studio Code, but it resulted a little bit unstable and Visual Studio Code lacks some features that I use a lot in webstorm.

Probably in a near future VEC + tns extension will be the choice, but right now my debugging strategy is:

1 Launch simulator

I'm using Osx and I want to debug in an Ipad simulator. By default the IOS simulator boots an Iphone X device. First I need to launch the simualtor with a custom device. 

$ xcrun simctl list devices
== Devices ==
-- iOS 11.2 --
iPhone 5s (E3B6EA43-C805-49C2-9502-A44A465D8DF2) (Shutdown)
iPhone 6 (801E9E11-CA86-473A-9879-4B0742B827FB) (Shutdown)
iPhone 6 Plus (24013349-1A6F-489C-9A68-ABB00EBB4BBF) (Shutdown)
iPhone 6s (1A594D75-146C-4BEA-A250-1FADE7886114) (Shutdown)

Then I launch the simulator app specifying a device with the -CurrentDeviceUDID option

/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/Contents/MacOS/Simulator -CurrentDeviceUDID <DEVICE-UDID>

NOTE: replace the with a valid UDID from the list.

More info at Xcode 6 - Launch simulator from command line

2. Use nativescript-cli commands

To get a list of available devices

# tns devices

enter image description here

To debug in a specific device:

# tns debug ios --device <device identifier>

Note: replace the device identifier with a valid id.

If you want to debug in an emulator

# tns debug ios --emulator

You have to find the url in the command output and open in chrome:

...
...
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/remote/serve_file/@02e6bde1bbe34e43b309d4ef774b1168d25fd024/inspector.html?experiments=true&ws=localhost:41000
....

More information about dedugging commands can be found in https://docs.nativescript.org/tooling/debugging

More information about debugging with chrome-dev-tools https://docs.nativescript.org/tooling/chrome-devtools#debugger

04/20/2018 Update

I´m developing in Mac OS X and with the new native-script cli 4.0 the debugging experience with the WebKit Web Inspector has improved. So I´m now using it for debugging:

tns debug ios --inspector
Javier Rojano
  • 814
  • 9
  • 17