Safari的Vue-devtools扩展

时间:2017-12-15 13:53:33

标签: macos vue.js safari vuejs2 vue-devtools

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

2 个答案:

答案 0 :(得分:5)

现在存在vue-devtools版本的electronic,适用于所有平台。

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>

在野生动物园中打开您的开发应用

localhost:3000

IPHONE:使用ip,而不是localhost,以及在iphone中具有活动的调试选项,可以将其与iphone Safari一起使用!并在Mac中调试。

更多信息和详细信息

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

答案 1 :(得分:3)

目前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 - &gt;显示扩展构建器

单击左下角的加号按钮,然后选择添加扩展名...

选择shells/safari/Vue.js devtools.safariextension

在网站访问中选择全部 - &gt;访问级别

检查包含安全网页

点击右上角的安装

Github Link

对于那些曾经是Chrome用户且过去常常看到“Vue”的用户。在Inspector中的选项卡中,Safari中没有显示此类选项卡。通过点击网址栏旁边的扩展程序按钮可以找到此视图:location of vue devtools inspector in Safari