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

* Show key values in vue developers console

* Bugfixes found by eslint

* fix: key format + misc

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