19

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!

Eric
  • 5,104
  • 10
  • 41
  • 70
capncanuck
  • 383
  • 1
  • 3
  • 8

2 Answers2

29

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

chefjuanpi
  • 1,570
  • 15
  • 27
  • this is the new correct answer, since Safari plugin support has been removed from the vue-devtools git. thank you! – Coty Condry Apr 11 '19 at 16:44
  • Does this mean its bonded to localhost:3000? What if app has its own .local or .test and uni on port 8000? Will it work? – Vladd Dec 07 '19 at 11:28
  • I write localhost:3000 because is the usual port in vue projects, but I never use this port in my dev proejcts :P . It works fine with any port. I never test with a local domain in theory should works. – chefjuanpi Dec 17 '19 at 16:01
  • What is port 8098 and `` then? – geoidesic Oct 14 '20 at 14:41
  • 8098 is the default port of devtools. It can be changed setting a environment variable before call vue-devtools `PORT:8030 vue-devtools` after that you should update the variable on your project, more info at https://www.npmjs.com/package/@vue/devtools – chefjuanpi Oct 15 '20 at 11:54
10

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

samayo
  • 16,163
  • 12
  • 91
  • 106