My best way call Vue component method in chrome devtools

Do you have this situation write Vue component and debugging code in devtools, you want to call methods like "fetchxxx" on instance and get response.

Maybe you should open you editor then found Vue component and typing console.log(.....) to fetchxxx method. so that you can get response.

Also you can mounted fetchxxx to window object, then you can call it in devtools console panel typing fetchxxx then you got response

For me i found another way to graceful call fetchxxx methods in devtool without any consloe.log(xxx) or mounted to window also get response, let's show me the way.

I show simple way to call togglePrivacy at Vue component

Step 1

You should download vue-devtool then opened chrome devtools at you debugging page.

Step 2

You can found the Vue component instance at vue-devtools Component panel

You should select witch component want to fetch, you can found selected component will show $vm0 $vm1 $vm2

That $vm0 mean's the latest you selected vue component also mean's you can fetch this Vue component in chrome devtools when you typing $vm0, $vm1

Step 3

So far you can visit Vue component instance and call method too just need $vm0.togglePrivacy

From screenshot you can call togglePrivacy at $vm0 like you call at you code, so simple and concise.

Hope it can help you :)