Probable fix for issue #450 (View refs in vue developers panel)

cypress/integration/components-tab.js

@@ -1,6 +1,6 @@
 import { suite } from '../utils/suite'
 
-const baseInstanceCount = 11
+const baseInstanceCount = 12
 
 suite('components tab', () => {
   beforeEach(() => cy.reload())
@@ -122,4 +122,13 @@ suite('components tab', () => {
     })
     cy.get('.left .search input').clear()
   })
+
+  it('should display $refs', () => {
+    cy.get('.instance .item-name').contains('RefTester').click()
+    cy.get('.right .data-wrapper').then(el => {
+      expect(el.text()).to.contain('list:Array[4]')
+      expect(el.text()).to.contain('<li>')
+      expect(el.text()).to.contain('tester:<p id="testing"')
+    })
+  })
 })

shells/dev/target/RefTester.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="tester">
+    <p ref="tester" id="testing" class="test test1">{{ count }}</p>
+
+    <ul>
+      <li
+        v-for="i in 4"
+        :key="i"
+        ref="list"
+      >{{ i }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    count() { return 1 },
+  }
+}
+</script>

shells/dev/target/index.js

@@ -4,6 +4,7 @@ import Target from './Target.vue'
 import Other from './Other.vue'
 import Init from './Init.vue'
 import Counter from './Counter.vue'
+import RefTester from './RefTester.vue'
 import VuexObject from './VuexObject.vue'
 import NativeTypes from './NativeTypes.vue'
 import Events from './Events.vue'
@@ -43,7 +44,8 @@ new Vue({
       h(Router, { key: [] }),
       h(TransitionExample),
       h(VuexObject),
-      h(Init)
+      h(Init),
+      h(RefTester)
     ])
   }
 }).$mount('#app')

src/backend/index.js

@@ -7,7 +7,7 @@ import { initEventsBackend } from './events'
 import { initRouterBackend } from './router'
 import { initPerfBackend } from './perf'
 import { findRelatedComponent } from './utils'
-import { stringify, classify, camelize, set, parse, getComponentName } from '../util'
+import { stringify, classify, camelize, set, parse, getComponentName, getCustomRefDetails } from '../util'
 import ComponentSelector from './component-selector'
 import SharedData, { init as initSharedData } from 'src/shared-data'
 import { isBrowser, target } from 'src/devtools/env'
@@ -533,6 +533,7 @@ function getInstanceDetails (id) {
 function getInstanceState (instance) {
   return processProps(instance).concat(
     processState(instance),
+    processRefs(instance),
     processComputed(instance),
     processInjected(instance),
     processRouteContext(instance),
@@ -678,6 +679,22 @@ function processState (instance) {
     }))
 }
 
+/**
+ * Process refs
+ *
+ * @param {Vue} instance
+ * @return {Array}
+ */
+
+function processRefs (instance) {
+  if (Object.keys(instance.$refs).length === 0) {
+    return []
+  }
+  console.log(instance.$refs)
+  let refs = Object.keys(instance.$refs).map(key => getCustomRefDetails(instance, key, instance.$refs[key]))
+  return refs.length > 0 ? refs : []
+}
+
 /**
  * Process the computed properties of an instance.
  *

src/devtools/components/DataField.vue

@@ -471,6 +471,15 @@ export default {
       if (this.valueType === 'custom' && this.fieldOptions.file) {
         return openInEditor(this.fieldOptions.file)
       }
+      if (this.valueType === 'custom' && this.fieldOptions['type'] === '$refs') {
+        if (this.$isChrome) {
+          const evl = `inspect(window.__VUE_DEVTOOLS_INSTANCE_MAP__.get("${this.fieldOptions.uid}").$refs["${this.fieldOptions.key}"])`
+          console.log(evl)
+          chrome.devtools.inspectedWindow.eval(evl)
+        } else {
+          window.alert('DOM inspection is not supported in this shell.')
+        }
+      }
 
       // Default action
       this.toggle()
@@ -629,7 +638,11 @@ export default {
     &.type-component-definition
       color $green
       >>> span
-        color $darkGrey
+        color $darkerGrey
+    &.type-reference
+        opacity 0.5
+      >>> .attr-title
+        color #800080
   .vue-ui-dark-mode &
     color #bdc6cf
     &.string, &.native

src/util.js

@@ -269,6 +269,29 @@ export function getCustomFunctionDetails (func) {
   }
 }
 
+export function getCustomRefDetails (instance, key, ref) {
+  let value
+  if (Array.isArray(ref)) {
+    value = ref.map((r) => getCustomRefDetails(instance, key, r)).map(data => data.value)
+  } else {
+    value = {
+      _custom: {
+        display: `<${ref.tagName.toLowerCase()}` +
+          (ref.id ? ` <span class="attr-title">id</span>="${ref.id}"` : '') +
+          (ref.className ? ` <span class="attr-title">class</span>="${ref.className}"` : '') + '&gt;',
+        uid: instance.__VUE_DEVTOOLS_UID__,
+        type: 'reference'
+      }
+    }
+  }
+  return {
+    type: '$refs',
+    key: key,
+    value,
+    editable: false
+  }
+}
+
 export function parse (data, revive) {
   return revive
     ? CircularJSON.parse(data, reviver)