Vue-devtools: Not detected vue in nwjs

[sarik93]

nwjs version after 0.18.8 have a problem before this version all work.
vue-devtools 3.0.6_0

Reproduction Link
Simple Project nwjs + vue - https://github.com/sarik93/simple-nw-vue-example

Steps to reproduce
npm install -g [email protected]
run: nw -load-extension=full_path_to_vue-devtool
In window open chrome devtools
Click in vue tab

What is Expected?
vue-devtool detected Vue instance in page

What is actually happening?
Now vue-devtool is empty, not detect instance Vue.

I tested in colleagues Mac and Linux, the result is the same.
In nw version 0.19.0 update Chromium to 55.

[f3l1x]

Same by me. Nwjs 0.20.3 (sdk), vue-devtools 3.0.8, vue 2.1.0, webpack 2.0.

[f3l1x]

@posva Any hints/tips how to accomplish this ticket?

[posva]

You can maybe inspire yourself from other devtools that work on nw, maybe react? But I cannot help you further

[Goopil]

To use vue devtools in a nw app.
the vue dev tools look for the global vue package. Just assign it to the window.
with the sdk version obviously.

// manifest.json
  "chromium-args": "--load-extension='./devtools'",
  "webkit": {
    "plugin": true
  }

//main.js
import Vue from 'Vue'
import App from './App.vue'
import store from './store'

window.Vue = Vue

new Vue({
  el: '#app',
  render: h => h(App),
  store
})



md5-95f8b876f234e022a6cf4b47da2fd523



// devtools/manifest.json

  "permissions": [
    "http://*/*",
    "https://*/*",
    "file://*",
    "chrome-extension://*",
    "webpack://*"
  ],

[f3l1x]

@Goopil Thank you, I'll test it.

[oaleynik]

Vue tab works just fine if open devtools via CMD+ALT+I or via top app menu. When devtools opened via right click context menu - Vue tab doesn't work.

[f3l1x]

@Goopil I'have tested it and it works;

• NW.js 0.25.0
• Vue.js 2.4.2
• Vue-Dev-Tools 3.1.4
• Webpack 3.5.5

[frankhale]

Any idea how to get Vue Devtools to work when your app is loaded in a webview? Currently the devtools load but Vue is never detected. Additionally Vue Devtools always complains that the app is in dev mode even when it's not.

NW.js 0.25.2 Windows x64

[foolishchow]

in nwjs webView chrome.devtools.inspectedWindow.tabId got null , so there will no message between the app context and chrome/src/devtools.js .
may be you have to modify the code , implement this code like shells/dev/src/devtools.js
enjoy~

[rogerwang]

support for chrome.devtools.inspectedWindow.tabId in webview in NW was just added in git. It will be available in the next nightly build.

[Akryum]

I think we can close this as a remote Electron shell would fix this. Discussion on the Electron shell: #451, related PR: #452.

[TheJaredWilcurt]

We've updated the NW.js documentation to show how to get the latest Vue-DevTools in NW.js.

• docs.nwjs.io/en/latest/For Users/Debugging with DevTools

Instructions:

1. npm install --save-dev nw-vue-devtools
2. Add this to your package.json:
   
   
   
   • "chromium-args": "--load-extension='./node_modules/nw-vue-devtools/extension'",
   
   
3. Vue.js must be in use in your app, and cannot be minified (use vue.js not vue.min.js).

For more information:

• https://github.com/TheJaredWilcurt/nw-vue-devtools#readme

@sarik93 @f3l1x @Goopil @oaleynik

[f3l1x]

Thanks @TheJaredWilcurt. I'm using it right the same way. Thank you anyway.