Planning about nativescript-vue-devtools HOT 12 CLOSED

@msaelices Sonar is an electron app, Mac is the officially supported version, but more could come soon. Sure, Chrome devtools would be a good choice, but the chrome debugging protocol is hard to understand / hook into from NativeScript and there is no easy way (not even sure if there is a way) to add vue-devtools to it.

When you open up the Chrome devtools for NativeScript, it runs the devtools "app" inside chrome - you can confirm this by pressing f12, and it will have a Chrome Devtools inspector inspecting the Chrome Devtools inspector (inspector-ception lol).

The plugins you have in your browser do not apply in the NativeScript devtools window, but even if they did it wouldn't be useful because vue-devtools injects a script tag into the page to establish the connection, which doesn't make sense in a NativeScript environment. I've done quite a bit of research about this, and Sonar seems like the better way at this point, since it will allow us to add vue-devtools sooner.

from nativescript-vue-devtools.

UPDATE

@znck has been working on making vue-devtools not rely on window which prevented us from connecting it to NativeScript in the past, PR here: vuejs/devtools#732

With these changes we are now able to connect the standalone VueDevtools to a NativeScript-Vue app, and to make it easier I published this repository as an npm module nativescript-vue-devtools. This is not yet usable since the above mentioned PR is not yet merged/released.

Once everything is released, I will document how to debug apps... EXCITING TIMES! :)

from nativescript-vue-devtools.

I've been eagerly watching the changes in vuejs/vue-devtools...this is really exciting!

from nativescript-vue-devtools.

OK that is really cool, especially since it has a network inspector...Vue and Chrome dev tools together in one app would be the holy grail!

from nativescript-vue-devtools.

• I was able to get a ns-vue app connected via websocket to the Electron app, using nativescript-socket-io, but only when running the Android build; iOS gave me a bunch of errors referencing dependency files it couldn't find, and could make an initial connection to the socket, but wouldn't emit any messages.

ld: warning: directory not found for option '-F/Users/damiani/Library/Developer/Xcode/DerivedData/dist-bdlvwjdomrcsvndurzdwgprdxnqn/Build/Products/Debug-iphonesimulator/Socket.IO-Client-Swift'
ld: warning: directory not found for option '-F/Users/damiani/Library/Developer/Xcode/DerivedData/dist-bdlvwjdomrcsvndurzdwgprdxnqn/Build/Products/Debug-iphonesimulator/StarscreamSocketIO'

• On Android, I can trigger the Electron app to initialize by emitting the vue-devtools-init event from the socket, but I haven't figured out how to get the hook injected in order to pick up the Vue instance running in NativeScript.

from nativescript-vue-devtools.

Awesome stuff, I haven't used a socket library in ns yet, but I know there are a few different ones - could be worth trying a few of them.

As for injecting the hook, I think the idea I added in the original issue about replacing window.__VUE_DEVTOOLS_GLOBAL_HOOK__ at build time (nativescript-vue build time) could be the easiest and best approach

https://github.com/nativescript-vue/nativescript-vue/blob/c91fd9fb0beec94ab5fe055f0b9a3edcd2eaf9e5/build/config.js#L69-L76

from nativescript-vue-devtools.

I also tried nativescript-socket.io and had the same issue when building iOS. :(

from nativescript-vue-devtools.

@damiani Facebook just released Sonar, which might be the right tool for us! https://fbsonar.com/

It supports custom plugins - which seem to be using react, so I wonder if we can drop in a Vue app as a react component in there to run the devtools.

I would wait a bit to see if NativeScript will want to support it officially, because then we would only need to write a plugin for it.

This got me hyped up btw! :)

from nativescript-vue-devtools.

A Fbsonar desktop limitation is that runs only on Mac. In comparison, the chrome Vue dev-tools runs wherever Chrome runs (Linux, Windows, and Mac).

from nativescript-vue-devtools.

Landed, and documented: https://nativescript-vue.org/en/docs/getting-started/vue-devtools/

Closing 🎉

from nativescript-vue-devtools.

@rigor789 Awesome! I think you forgot to document explicitly to install the package with npm instal nativescript-vue-devtools --save

from nativescript-vue-devtools.

@msaelices thanks for the heads up, fixing now!

from nativescript-vue-devtools.