web-dev-qa-db-fra.com

Extension Vue-devtools pour Safari

Je constate des incohérences entre la façon dont Firefox et Safari gèrent l'une (au moins) de mes propriétés Vue et il serait très utile de pouvoir voir ce qui s'y trouve. Merci!

8
capncanuck

Il n'y a actuellement aucune extension de safari officielle pour vuejs. Mais vous pouvez suivre une solution de contournement pour utiliser vue-devtools en safari:

Clone vue-devtools

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

Installer et construire la bibliothèque

 npm install   
 npm run build:safari

Ouvrez maintenant votre navigateur Safari et allez dans (menu dans la barre de menu):

preferences -> Advanced -> Show Developer

Open Developer -> Afficher le générateur d'extensions

Cliquez sur le bouton plus en bas à gauche et sélectionnez Ajouter une extension ...

Sélectionnez shells/safari/Vue.js devtools.safariextension

Sélectionner tout dans l'accès au site Web -> Niveau d'accès

Cochez Inclure les pages Web sécurisées

Cliquez sur Installer en haut à droite

Lien Github


Pour ceux qui sont Chrome utilisateurs et habitués à voir un onglet "Vue" dans l'inspecteur, il n'y a pas un tel onglet affiché dans le Safari. Cette vue est plutôt trouvée en cliquant sur le bouton d'extension suivant à la barre d'URL: emplacement de vue inspecteur devtools dans Safari

5
samayo

Existe maintenant la version électronique de vue-devtools, cela fonctionne pour toutes les plateformes.

npm install -g @vue/devtools

Une fois que vous avez installé le package globalement, exécutez:

vue-devtools

ajoutez ceci dans la tête de votre application

<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>

ouvrez votre application de développement en safari

localhost:3000

IPHONE: utiliser l'ip, pas localhost, plus l'option de débogage active dans l'iphone est possible, utilisez-la avec iphone safari! et déboguer dans un mac.

plus d'informations et de détails

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

13
Pablote