Vue-devtools: Enhancement: open console panel when sending vm to console

[simplesmiler]

The "Inspect DOM" button opens the "Elements" panel, but "Send to console" does not open the "Console" panel.

I believe opening the "Console" panel manually after clicking "Send to console" makes up for 90% of use cases of this buttons.

[bartlomieju]

Why don't we take React's devtools approach? Selecting component in devtools binds it to $r in console automatically. Number of clicks stays the same, no need to fight with Chrome to switch the tab (if it is even possible).

[simplesmiler]

Good point, I believe Chrome itself does it similarly.
Clicking on the element in the inspector binds it to $0. It actually goes further, and maintains a list of 5 last elements as $0 .. $4. Maybe we can do the same with $vm0 .. $vm5.

[simplesmiler]

This would solve https://github.com/vuejs/vue-devtools/issues/97

[bartlomieju]

Yep. Not bad either, but to be honest for me it's a little confusing that it moves item to next position. But I'll be happy to make a PR that does that :)

[simplesmiler]

/cc @yyx990803 for approval :wink:

[yyx990803]

@simplesmiler sounds good! (autobinding on click)

[bartlomieju]

Ok, I'm on it

[simplesmiler]

Cool. I think for compatibility reasons it should still bind $vm too, along with $vm0.

[simplesmiler]

Another thing. Chrome gives developer a hint, that element is available as $0, by showing == $0 after the element name:

I guess we can do the same, something like this:

vue-devtools already supports badges (fragment, router-view: <route>), so it should be reasonably easy to add a new badge.

[bartlomieju]

So I pushed some changes. Please let me know what you guys think, any feedback is welcome. @simplesmiler @yyx990803

[simplesmiler]

Kudos to @bartlomieju!