bind instance to console on select

change console label color
KingMario · Nov 8, 2016 · a09035e · a09035e
1 parent 7566420
commit a09035e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/src/backend/index.js b/src/backend/index.js
@@ -11,6 +11,8 @@ const rootInstances = []
 const propModes = ['default', 'sync', 'once']
 
 const instanceMap = window.__VUE_DEVTOOLS_INSTANCE_MAP__ = new Map()
+const instanceMap = window.__VUE_DEVTOOLS_INSTANCE_MAP__ = new Map()
+let consoleBoundInstances = Array(5)
 let currentInspectedId
 let bridge
 let filter = ''
@@ -58,14 +60,11 @@ function connect () {
       scrollIntoView(instance)
       highlight(instance)
     }
+    bindToConsole(instance)
+    flush()
     bridge.send('instance-details', stringify(getInstanceDetails(id)))
   })
 
-  bridge.on('send-to-console', id => {
-    window.$vm = instanceMap.get(id)
-    console.log('[vue-devtools] <' + getInstanceName(window.$vm) + '> is now available as $vm.')
-  })
-
   bridge.on('filter-instances', _filter => {
     filter = _filter.toLowerCase()
     flush()
@@ -224,6 +223,9 @@ function capture (instance, _, list) {
   } else {
     ret.top = Infinity
   }
+  // check if instance is available in console
+  const consoleId = consoleBoundInstances.indexOf(instance._uid)
+  ret.consoleId = consoleId > -1 ? '$vm' + consoleId : null
   // check router view
   const isRouterView2 = instance.$vnode && instance.$vnode.data.routerView
   if (instance._routerView || isRouterView2) {
@@ -506,3 +508,25 @@ function scrollIntoView (instance) {
     window.scrollBy(0, rect.top)
   }
 }
+
+/**
+ * Binds given instance in console as $vm0.
+ * For compatibility reasons it also binds it as $vm.
+ *
+ * @param {Vue} instance
+ */
+
+function bindToConsole (instance) {
+  const id = instance._uid
+  const index = consoleBoundInstances.indexOf(id)
+  if (index > -1) {
+    consoleBoundInstances.splice(index, 1)
+  } else {
+    consoleBoundInstances.pop()
+  }
+  consoleBoundInstances.unshift(id)
+  for (var i = 0; i < 5; i++) {
+    window['$vm' + i] = instanceMap.get(consoleBoundInstances[i])
+  }
+  window.$vm = instance
+}
diff --git a/src/devtools/components/ComponentInspector.vue b/src/devtools/components/ComponentInspector.vue
@@ -15,10 +15,6 @@
             <i class="material-icons">visibility</i>
             <span>Inspect DOM</span>
           </a>
-          <a class="button" @click="sendToConsole">
-            <i class="material-icons">dvr</i>
-            <span>Send to console</span>
-          </a>
         </span>
       </section>
       <section class="data">
@@ -63,9 +59,6 @@ export default {
       } else {
         window.alert('DOM inspection is not supported in this shell.')
       }
-    },
-    sendToConsole () {
-      bridge.send('send-to-console', this.target.id)
     }
   }
 }

diff --git a/src/devtools/components/ComponentInstance.vue b/src/devtools/components/ComponentInstance.vue
@@ -20,6 +20,9 @@
         </span>
         <span class="angle-bracket">&lt;</span><span class="instance-name">{{ instance.name }}</span><span class="angle-bracket">&gt;</span>
       </span>
+      <span class="info console" v-if="instance.consoleId">
+        {{ instance.consoleId }}
+      </span>
       <span class="info router-view" v-if="instance.isRouterView">
         router-view{{ instance.matchedRouteSegment ? ': ' + instance.matchedRouteSegment : null }}
       </span>
@@ -142,6 +145,8 @@ export default {
   border-radius 3px
   position relative
   top -1px
+  &.console
+    background-color #f19d9b
   &.router-view
     background-color #ff8344
   &.fragment