Inspect $refs

[Christilut]

It would be nice to be able to inspect this.$refs

Just like there is $route in a component, maybe it could have $refs below it?

[posva]

can you elaborate a bit on why it would be nice?

[Christilut]

Sometimes I need to see is inside a certain ref. Sometimes a ref is undefined and I want to know what refs a component has and confirm that it is actually undefined or that it was due to the component lifecycle.

Being able to see the $el inside a ref can help debugging as well.

[posva]

Personally, I think it could be useful to highlight content as you hover them (pretty much like in the components panel) because you sometimes need to locate refs in the page and, as you said, know if they exist (undefined or not)

[Christilut]

Yea, the ability to go from the vue devtools page to the Elements page would be really cool.
So for example, I click on a ref called video, it would go to the Elements tab (in Chrome dev tools) and highlight that video element.

[bartlomieju]

I think I could implement it over the weekend, let me try and get a PR going.

[bartlomieju]

I've sat with this problems for a couple of hours and I think it might not be possible to do this functionality now. I've encountered the same problem when trying to implement context menu's Inspect element button. Objects are serialized when being sent between shell and DevTools panel, thus we're losing theirs identity, and inspection API requires us to call it with object we want to inspect.

// this is now we call inspect API
chrome.devtools.inspectedWindow.eval(someHTMLElement);

// but during inspection of component we have to call 'stringify(getIntanceDetails)'
// which extracts data we want but serializes it to JSON, in case of HTMLElement we're 
// left with it's string representation
bridge.on('select-instance', id => {
  ...
  bridge.send('instance-details', stringify(getInstanceDetails(id)))
})

We're left with text 'HTMLElement' after serialization which is virtually useless.

Anyone has idea how to work around it?

EDIT: fixed typos

[ctf0]

@posva is it possible as a first step for now to at least show the available refs under each component ?

[posva]

I don't think listing only the names of the refs is enough to actually be useful 🙁 You'll end up just clicking on the element in the devtools and writing $vm.$refs in the console to properly inspect

[goyote]

Would like to see the list of $refs as well.

[hurrycaner]

👍

[1099511627776]

Hi, I've managed to make this feature but with some dirty hacks (from my point of view). Also I'm not very good at styling things so for now this feature looks like this http://nimb.ws/Ykq09X.
So is there some one that can look at screenshot and help me to make look it more pretty ?

[gabrielstuff]

Would be nice to see it land in the next version. 👏 @1099511627776

[ctf0]

@1099511627776 @Akryum when inspecting the component with the select btn the console will start logging msgs each time u move the mouse after, can u dbl check ?

Reason

function processRefs (instance) {
  if (Object.keys(instance.$refs).length === 0) {
    return []
  }
  console.log(instance.$refs) // the cause of the logging
  let refs = Object.keys(instance.$refs).map(key => Object(util["m" /* getCustomRefDetails */])(instance, key, instance.$refs[key]))
  return refs.length > 0 ? refs : []
}

version 5.0.0.b3

Update