Is there a vue-devtools extension for Safari?

Currently there is no official safari extension for vuejs. But you can follow a workaround to use vue-devtools on safari:

Clone vue-devtools

git clone https://github.com/vuejs/vue-devtools

Install and build the library

 npm install   
 npm run build:safari

Now open your Safari browser and go to (menu in menu bar):

preferences -> Advanced -> Show Developer

Open Developer -> Show Extension Builder

Click the plus button in the bottom left and select Add Extension...

Select shells/safari/Vue.js devtools.safariextension

Select All in Website Access -> Access Level

Check Include Secure Webpages

Click Install in the top right

Github Link


For those who are Chrome users and used to seeing a 'Vue' tab in the Inspector, there is no such tab shown in the Safari. This view is instead found by clicking on the extension button next to the URL bar: location of vue devtools inspector in Safari


Now exist vue-devtools version electron, this works for all platforms.

npm install -g @vue/devtools

Once you installed the package globally, run:

vue-devtools

add this in the head of your app

<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

open your dev app in safari

localhost:3000

IPHONE: using the ip, not localhost, plus has active debug option in iphone is possible use this with iphone safari! and debug in a mac.

more info and details

https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md