Trigger methods from Devtools

[thangman22]

What problem does this feature solve?

My Idea is now we can access computed and data of component but we can't trigger some methods from dev tools. I would be good if I can trigger the method with dev tool for testing methods will work or not. However we can't list all method from Vue Instance in this case we have to provide console to trigger method instead.

[Akryum]

Note that you can select a component and access it in the browser console with $vm. From there, you can call its methods:

$vm.myMethod()

[posva]

I think this is not worth adding because the console provides with autocompletion and other features that the Vue devtools do not have, so it's only useful for methods with no or few arguments

[thangman22]

@Akryum This feature will be useful if we can list all methods. Let me think about it. Can we do it?

@posva Thank you for suggestion

[Akryum]

The console autocompletes all the fields.

[FEA5T]

@Akryum @thangman22

It would be nice to at least see a list of all methods on a component instance similar to the way I can see a list of computed properties.

Very frustrating to have to:

• Select a component
• Go to console
• Type $vm0.
• Try to remember/hunt which properties are data/computed/methods and then use () to call them.

Really, the experience should be:

• Select a component
• See a list of all methods
• Click one of the methods (which would then call $vm0.method() in the console)

The devtool panel should show an overview of the component, all it's methods, watchers, data, computed's, props, etc. It is extremely inconvenient to go to console for information like this. The whole point of devtools is to provide better visibility and UX than the console provides.

[thangman22]

Thank you for support my idea I will try to make it.

[mrme44]

Sorry for having bothered you about this. I was selecting the wrong component. When I select the correct component, In the console I'm able to see those computed properties and methods attached to $vm.

…

On Wed, Aug 22, 2018 at 2:38 AM Guillaume Chau ***@***.***> wrote: Type $vm.<name> in the console with the component selected. Just like when ou select a DOM element in the inspector. Le mer. 22 août 2018 à 03:44, Mr. Me ***@***.***> a écrit : > Until @thangman22 <https://github.com/thangman22> attempts to implement > this, do you guys know how to get a component's computed properties and > methods from the $vm object. I can't find any documentation on this. > > — > You are receiving this because you were mentioned. > > > Reply to this email directly, view it on GitHub > <#521 (comment) >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/ACqyfC_7kqY5Yob7w1-19JCdehNgBLC7ks5uTLd-gaJpZM4RfUTo > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#521 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACgKx2Tc_AwicAZuIFEao7dMQN-Yfl-Hks5uTRiBgaJpZM4RfUTo> .

[vintprox]

Guys that list across this issue, I found myself running DevTools without console drawer, that's why I had to switch between "Console" and "Vue" tabs. To open console drawer in bottom press Esc while focus is on DevTools. Same for hiding drawer!

[justlucdewit]

This feature would actually be really really usefull. i know you can just use the console, but that gets nasty if you have a lot of deeply nested components.

I was thinking maybe it could be in the components tab and then be just like data / $refs. and then there could be a list of all the methods available on the currently selected component. In that case there could also be some kind of button next to it to trigger the method.

I really hope this gets added at some point but unfortunately it is already 2+ years old