this.$inspect + some code improvement

Author: Guillaume Chau

shells/chrome/src/devtools-background.js

@@ -55,7 +55,7 @@ chrome.contextMenus.onClicked.addListener(onContextMenu)
 
 function onContextMenu (info, tab) {
   if (info.menuItemId === 'vue-inspect-instance') {
-    const src = `window.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET`
+    const src = `window.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET__`
 
     chrome.devtools.inspectedWindow.eval(src, function (res, err) {
       if (err) {
@@ -104,7 +104,7 @@ function onPanelLoad () {
 
 function toast (message, type = 'normal') {
   const src = `(function() {
-    __VUE_DEVTOOLS_TOAST(\`${message}\`, '${type}');
+    __VUE_DEVTOOLS_TOAST__(\`${message}\`, '${type}');
   })()`
 
   chrome.devtools.inspectedWindow.eval(src, function (res, err) {

shells/dev/target/Target.vue

@@ -9,6 +9,7 @@
     <button class="remove" @click="rm">Remove</button>
     <input v-model="localMsg">
     <other v-for="item in items" :key="item"></other>
+    <button @click="inspect">Inspect component</button>
   </div>
 </template>
 
@@ -48,6 +49,9 @@ export default {
     },
     rm () {
       this.items.pop()
+    },
+    inspect () {
+      this.$inspect()
     }
   }
 }

src/backend/hook.js

@@ -66,6 +66,11 @@ export function installHook (window) {
 
   hook.once('init', Vue => {
     hook.Vue = Vue
+
+    Vue.prototype.$inspect = function () {
+      const fn = window.__VUE_DEVTOOLS_INSPECT__
+      fn && fn(this)
+    }
   })
 
   hook.once('vuex:init', store => {
@@ -89,12 +94,12 @@ export function installHook (window) {
       }
       const instance = el.__vue__
       if (instance) {
-        window.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET = true
-        window.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET = instance
+        window.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET__ = true
+        window.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__ = instance
         return
       }
     }
-    window.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET = null
-    window.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET = null
+    window.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET__ = null
+    window.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__ = null
   })
 }

src/backend/index.js

@@ -81,15 +81,15 @@ function connect () {
 
   // Get the instance id that is targeted by context menu
   bridge.on('get-context-menu-target', () => {
-    const instance = window.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET
+    const instance = window.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__
 
-    window.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET = null
-    window.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET = false
+    window.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__ = null
+    window.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET__ = false
 
     if (instance) {
       const id = instance.__VUE_DEVTOOLS_UID__
       if (id) {
-        return bridge.send('context-menu-target', id)
+        return bridge.send('inspect-instance', id)
       }
     }
 
@@ -108,6 +108,8 @@ function connect () {
   // events
   initEventsBackend(hook.Vue, bridge)
 
+  window.__VUE_DEVTOOLS_INSPECT__ = inspectInstance
+
   bridge.log('backend ready.')
   bridge.send('ready', hook.Vue.version)
   console.log(
@@ -643,6 +645,11 @@ function getUniqueId (instance) {
  * @param {any} message HTML content
  */
 export function toast (message, type = 'normal') {
-  const fn = window.__VUE_DEVTOOLS_TOAST
+  const fn = window.__VUE_DEVTOOLS_TOAST__
   fn && fn(message, type)
 }
+
+export function inspectInstance (instance) {
+  const id = instance.__VUE_DEVTOOLS_UID__
+  id && bridge.send('inspect-instance', id)
+}

src/backend/toast.js

@@ -8,7 +8,7 @@ export function installToast (window) {
     error: '#DB2600'
   }
 
-  window.__VUE_DEVTOOLS_TOAST = (message, type) => {
+  window.__VUE_DEVTOOLS_TOAST__ = (message, type) => {
     const color = colors[type] || colors.normal
     console.log(`%c vue-devtools %c ${message} %c `,
       'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',

src/devtools/index.js

@@ -3,13 +3,15 @@ import App from './App.vue'
 import store from './store'
 import { parse } from '../util'
 
-let panelShown = false
+const isChrome = typeof chrome !== 'undefined' && chrome.devtools
+
+let panelShown = !isChrome
 let pendingAction = null
 
 // Capture and log devtool errors when running as actual extension
 // so that we can debug it by inspecting the background page.
 // We do want the errors to be thrown in the dev shell though.
-if (typeof chrome !== 'undefined' && chrome.devtools) {
+if (isChrome) {
   Vue.config.errorHandler = (e, vm) => {
     bridge.send('ERROR', {
       message: e.message,
@@ -81,7 +83,7 @@ function initApp (shell) {
       bridge.send('vuex:toggle-recording', store.state.vuex.enabled)
       bridge.send('events:toggle-recording', store.state.events.enabled)
 
-      if (typeof chrome !== 'undefined' && chrome.devtools) {
+      if (isChrome) {
         chrome.runtime.sendMessage('vue-panel-load')
       }
     })
@@ -116,7 +118,7 @@ function initApp (shell) {
       }
     })
 
-    bridge.on('context-menu-target', id => {
+    bridge.on('inspect-instance', id => {
       ensurePaneShown(() => {
         inspectInstance(id)
       })