Safari的Vue-devtools扩展

Question

我发现Firefox和Safari处理（至少）我的一个Vue属性之间存在不一致的地方，并且能够看到其中的内容将非常有帮助。谢谢！

Answer 1

现在存在vue-devtools版本电子版，适用于所有平台。

npm install -g @vue/devtools

全局安装软件包后，运行：

vue-devtools

将此添加到您的应用程序的头部

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

在Safari中打开您的开发应用

localhost:3000

IPHONE：使用ip，而不是localhost，并且在iphone中具有活动的调试选项，可以与iphone Safari一起使用！并在Mac中进行调试。

更多信息和细节

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

Answer 2

目前没有针对 vuejs 的官方 safari 扩展。但是您可以按照一种解决方法在 safari 上使用 vue-devtools：

克隆 vue-devtools

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

安装和构建库

 npm install   
 npm run build:safari

现在打开您的 Safari 浏览器并转到（菜单栏中的菜单）：

preferences -> Advanced -> Show Developer

Open Developer -> 显示扩展生成器

单击左下角的加号按钮并选择添加扩展...

选择shells/safari/Vue.jsdevtools.safariextension

在网站访问中选择全部 -> 访问级别

检查包括安全网页

点击右上角的安装

Github 链接

^{对于那些习惯于在检查器中看到“Vue”选项卡的 Chrome 用户来说，Safari 中没有显示这样的选项卡。该视图是通过单击 URL 栏旁边的扩展按钮找到的：Safari 中 vue devtools 检查器的位置}