nativescript-vue/nativescript-vue-devtools

Planning

rigor789 opened this issue · 12 comments

rigor789 commented

This is an issue for tracking / planning what needs to be done in this plugin.

  • Figure out how exactly Vue communicates with the devtools (window.__VUE_DEVTOOLS_GLOBAL_HOOK__ I believe is where the hook needs to be injected)
  • Figure out the best / easiest way to get websockets working with ns

Idea: we could replace window.__VUE_DEVTOOLS_GLOBAL_HOOK__ using rollup in nativescript-vue core, with something like

try { 
  require('nativescript-vue-devtools')
} catch(e) {
  Vue.config.debug && console.log('to use devtools install nativescript-vue-devtools blah blah') 
}
damiani commented
  • 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.
rigor789 commented

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

damiani commented

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

rigor789 commented

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

damiani commented

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!

  • 👍1
msaelices commented

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

rigor789 commented

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

  • 👍3
rigor789 commented

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! :)

  • 🎉3
damiani commented

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

  • 👍2
  • 🎉1
msaelices commented

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

rigor789 commented

@msaelices thanks for the heads up, fixing now!