feat: Show key values in vue developers console (#691)

* Show key values in vue developers console

* Bugfixes found by eslint

* fix: key format + misc

Author: 1099511627776

.gitignore

@@ -5,3 +5,4 @@ build
 tests_output
 selenium-debug.log
 TODOs.md
+.idea

shells/dev/target/index.js

@@ -25,9 +25,9 @@ new Vue({
       h(Counter),
       h(Target, { props: { msg: 'hi', ins: new MyClass() }}),
       h(Other),
-      h(Events),
-      h(NativeTypes),
-      h(Router)
+      h(Events, { key: 'foo' }),
+      h(NativeTypes, { key: new Date() }),
+      h(Router, { key: [] })
     ])
   },
   data: {

src/backend/index.js

@@ -284,6 +284,7 @@ function capture (instance, _, list) {
   const ret = {
     id: instance.__VUE_DEVTOOLS_UID__,
     name: getInstanceName(instance),
+    renderKey: getRenderKey(instance.$vnode ? instance.$vnode['key'] : null),
     inactive: !!instance._inactive,
     isFragment: !!instance._isFragment,
     children: instance.$children
@@ -694,6 +695,20 @@ function getUniqueId (instance) {
   return `${rootVueId}:${instance._uid}`
 }
 
+function getRenderKey (value) {
+  if (value == null) return
+  const type = typeof value
+  if (type === 'number') {
+    return value
+  } else if (type === 'string') {
+    return `'${value}'`
+  } else if (Array.isArray(value)) {
+    return 'Array'
+  } else {
+    return 'Object'
+  }
+}
+
 /**
  * Display a toast message.
  * @param {any} message HTML content

src/devtools/views/components/ComponentInstance.vue

@@ -12,7 +12,9 @@
       @mouseenter="enter"
       @mouseleave="leave"
       :class="{ selected: selected }"
-      :style="{ paddingLeft: depth * 15 + 'px' }">
+      :style="{ paddingLeft: depth * 15 + 'px' }"
+    >
+      <!-- Component tag -->
       <span class="content">
         <!-- arrow wrapper for better hit box -->
         <span class="arrow-wrapper"
@@ -21,7 +23,16 @@
           <span class="arrow right" :class="{ rotated: expanded }">
           </span>
         </span>
-        <span class="angle-bracket">&lt;</span><span class="item-name">{{ displayName }}</span><span class="angle-bracket">&gt;</span>
+
+        <span class="angle-bracket">&lt;</span>
+
+        <span class="item-name">{{ displayName }}</span>
+
+        <span v-if="componentHasKey" class="attr">
+          <span class="attr-title"> key</span>=<span class="attr-value">{{instance.renderKey}}</span>
+        </span>
+
+        <span class="angle-bracket">&gt;</span>
       </span>
       <span
         v-if="instance.consoleId"
@@ -48,14 +59,17 @@
       >
         inactive
       </span>
+
       <span class="spacer"></span>
+
       <VueIcon
         class="icon-button"
         icon="visibility"
         v-tooltip="'Scroll into view'"
         @click="scrollToInstance"
       />
     </div>
+
     <div v-if="expanded">
       <component-instance
         v-for="child in sortedChildren"
@@ -69,44 +83,57 @@
 
 <script>
 import { mapState } from 'vuex'
-import { classify, scrollIntoView } from '../../../util'
+import { classify, scrollIntoView, UNDEFINED } from '../../../util'
 
 export default {
   name: 'ComponentInstance',
+
   props: {
     instance: Object,
     depth: Number
   },
+
   created () {
     // expand root by default
     if (this.depth === 0) {
       this.expand()
     }
   },
+
   computed: {
     ...mapState('components', [
       'classifyComponents'
     ]),
+
     scrollToExpanded () {
       return this.$store.state.components.scrollToExpanded
     },
+
     expanded () {
       return !!this.$store.state.components.expansionMap[this.instance.id]
     },
+
     selected () {
       return this.instance.id === this.$store.state.components.inspectedInstance.id
     },
+
     sortedChildren () {
       return this.instance.children.slice().sort((a, b) => {
         return a.top === b.top
           ? a.id - b.id
           : a.top - b.top
       })
     },
+
     displayName () {
       return this.classifyComponents ? classify(this.instance.name) : this.instance.name
+    },
+
+    componentHasKey () {
+      return !!this.instance.renderKey && this.instance.renderKey !== UNDEFINED
     }
   },
+
   watch: {
     scrollToExpanded: {
       handler (value, oldValue) {
@@ -117,35 +144,44 @@ export default {
       immediate: true
     }
   },
+
   methods: {
     toggle (event) {
       this.toggleWithValue(!this.expanded, event.altKey)
     },
+
     expand () {
       this.toggleWithValue(true)
     },
+
     collapse () {
       this.toggleWithValue(false)
     },
+
     toggleWithValue (val, recursive = false) {
       this.$store.dispatch('components/toggleInstance', {
         instance: this.instance,
         expanded: val,
         recursive
       })
     },
+
     select () {
       bridge.send('select-instance', this.instance.id)
     },
+
     enter () {
       bridge.send('enter-instance', this.instance.id)
     },
+
     leave () {
       bridge.send('leave-instance', this.instance.id)
     },
+
     scrollToInstance () {
       bridge.send('scroll-to-instance', this.instance.id)
     },
+
     scrollIntoView (center = true) {
       this.$nextTick(() => {
         scrollIntoView(this.$globalRefs.leftScroll, this.$refs.self, center)
@@ -233,16 +269,29 @@ export default {
   color $component-color
   margin 0 1px
 
+.attr
+  opacity .5
+  font-size 12px
+
+.attr-title
+  color purple
+
 .spacer
-  flex 100% 1 1
-  width 0
+  flex auto 1 1
 
 .icon-button
-  font-size 16px
+  width 16px
+  height 16px
 
   .self:not(:hover) &
     visibility hidden
 
   .self.selected & >>> svg
     fill $white
+
+.self.selected
+  .attr
+    opacity 1
+  .attr-title
+    color lighten($purple, 70%)
 </style>