Nativescript: App Inspector for NativeScript

[fealebenpae]

The NativeScript framework uses the Safari Web Inspector and the Chrome DevTools to debug the JavaScript running inside a NativeScript application. However, the Web Inspector and the DevTools are capable of so much more than just plain JavaScript debugging.

I propose that the NativeScript framework debugging experience is extended to match the featureset of web debuggers. This means support for the following:

_in 1.3 release_

• [x] Profiling JavaScript
• [x] View app contents

_in 1.6 release_

• [x] Debugging http requests

_in 1.7 release_

• [x] Start working on the Android parity

_unplanned_

• [x] Visualizing and editing the visual tree
• [x] Debugging and editing CSS
• [ ] Viewing local storage
• [ ] Debug application events such as lifetime, timers, scrolling, layout, animations
• [ ] Heap profiler

The interface for those and more is already present in the debugger frontends that the NativeScript runtimes rely on. Right now we want to try and extend the Web Inspector infrastructure to enable profiling JavaScript code on iOS. If this strategy proves viable, it would be a good idea to continue along this path and implement other features common to web debuggers.

I believe that work towards this goal will not only improve the debugging experience of NativeScript apps a great deal, but it would also make it easy for developers used to web debuggers to reuse their skills.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[RangerMauve]

:+1: This will also make NativeScript a better competitor for React-Native who have nailed the dev tools integration already.

[FlipOneDev]

Hey NativeScript Team! Can you develop a NativeScript Playground similar to the React Native Playground? Please check it out at RNPLAY.ORG.

That would be a tremendous tool to "ease the pain" of learning NativeScript and promote adoption among Javascript developers.

I hope you can to this soon guys!

[ligaz]

Hey @FlipOneDev that is a pretty good idea. Thanks for sharing it with us. You can imagine we can do something similar in our dojo :smile:

[toddanglin]

Improving the debugging experience for NativeScript is SUPER critical. Hopefully there will be a better story sooner than later. It's very hard to adopt/learn a new framework while relying on "console.log" statements. Many higher level capabilities in NativeScript are almost pointless until there is a better core debugging story.

Eagerly waiting to see what milestone this gets assigned to. :)

[valentinstoychev]

@toddanglin We are actively working on it with high priority! With the 1.2 release (coming in two weeks) we will check the first task from the list - the JS profiler.

[valentinstoychev]

@PanayotCankov @KristinaKoeva lets write spec for each item from the tasks and create a new issue with more details.

[sitefinitysteve]

This says it's in the 1.3 release... any details on it?

[KristinaKoeva]

Hey,

Our 1.3 release included the following improvements over the debugging experience.

• Web Inspector Page Agent that lets you browse through all of your contents located in your app folder.
• Pause the debugger on startup so that you could easily inspect all the initialization logic of your application

For more information please take a look at our release notes
We are actively working on the rest of the App Inspector story so stay tuned.

[toddanglin]

Any notable improvements made on this issue for the 1.5 release? Is Visual Tree debugging still planned for 1.6?

[manijak]

Is the Nativescript inspector alive at all?

[sjarrin]

Hello, any update on this task ? It's a must have to be able to debug views, especially when using Nativescript with Angular.

[envomer]

@sjarrin +1 same here

[hypery2k]

any news on this?

[valentinstoychev]

During 2.4 we were working on parity with Android, see https://github.com/NativeScript/android-runtime/issues/563.

For 2.5 we will continue working on this tooling with highest priority and will start enabling the tabs in the Chrome DevTools.

If you have any particular feedback please let me know. The goal is to enable Chrome Devtools to work in the same way in NativeScript as they work for web.

[vforv]

Any news on this, is it possible now to debug css/xml or http req?

[zjorge]

Are these already scheduled?

• Visualizing and editing the visual tree
• Debugging and editing CSS

I admit I've been spoiled by Chrome's DevTools when debugging CSS.

[stevenspiel]

It's been a year and a half since anyone has commented on this. Is this impossible?

[mehdinourollah]

I think not ... :(