Search code examples
macosvue.jssafarivuejs2vue-devtools

Is there a vue-devtools extension for Safari?

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!

Solution

  • 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