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.

Installation

Install the vue-devtools package.

npm install -g @vue/devtools

Configuration

Once you install the package globally, run

vue-devtools

Then add:

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

To the <head> section of your app.

Note:
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!

Loading...