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