Safari的Vue-devtools扩展

Question

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

Answer 1

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

克隆视图 - 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.js devtools.safariextension

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

检查包含安全网页

单击右上角的“安装”

Github Link

---

对于Chrome用户以及曾经在检查器中看到“Vue”标签的用户，Safari中没有显示此类标签。通过单击URL栏旁边的扩展按钮可以找到此视图：location of vue devtools inspector in Safari

Answer 2

现在存在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