Is there a vue-devtools extension for Safari?

Question

I'm seeing inconsistencies between how Firefox and Safari are handling one (at least) of my Vue properties and it would be super helpful to be able to see what's in there. Thanks!

Answer 1

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

Answer 2

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}