icon-dark icon-light
Cover image for Vue Dev Tools For iFrame

Vue Dev Tools For iFrame

As of writing this article, there is no good way to see vue-devtools when developing apps in iFrame. Hence I found out this following way to use the vue-devtools via this electron app.


Install the vue-devtools package.

npm install -g @vue/devtools


Once you install the package globally, run


Then add:

<script src="http://localhost:8098"></script>

To the <head> section of your app.

Don’t forget to remove it before deploying to production!

That’s it! You can now view the devtools on running of your application. Now you can debug your app opened in a mobile browser, safari, native script, etc. not just desktop chrome or firefox.

Hope you found this short article useful. If so hit 👍🏻 and spread the word!