Safari 是不是有 vue-devtools 扩展？

Posted 2023-04-13

【中文标题】Safari 是不是有 vue-devtools 扩展？

【英文标题】：Is there a vue-devtools extension for Safari?Safari 是否有 vue-devtools 扩展？

【发布时间】：2018-05-29 17:58:52

【问题描述】：

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

【问题讨论】：

这个问题不是很清楚。能举个具体的例子吗？

@Maharkus 我从标题中理解了这个问题

对不起@maharkus - 我应该在文本中清除

【参考方案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

【讨论】：

这是新的正确答案，因为 Safari 插件支持已从 vue-devtools git 中删除。谢谢！

这是否意味着它绑定到 localhost:3000？如果应用程序在端口 8000 上有自己的 .local 或 .test 和 uni 怎么办？它会起作用吗？

我写 localhost:3000 是因为它是 vue 项目中的常用端口，但我从未在我的开发项目中使用此端口 :P 。它适用于任何端口。我从不使用本地域进行测试，理论上应该可行。

那么8098端口和<devtools-port>是什么？

8098 是 devtools 的默认端口。可以在调用 vue-devtools PORT:8030 vue-devtools 之前更改设置环境变量，之后您应该更新项目中的变量，更多信息在npmjs.com/package/@vue/devtools

【参考方案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 Link

---

^{对于那些习惯在 Inspector 中看到“Vue”标签的 Chrome 用户来说，Safari 中没有显示这样的标签。而是通过单击 URL 栏旁边的扩展按钮找到此视图：location of vue devtools inspector in Safari}

【讨论】：

看起来build:safari 脚本已被删除。

谢谢。我在手机上，您能否将其添加到我的答案中，如果没有，我会稍后再做

已删除 Safari 支持。因为他们改变了使用github.com/vuejs/vue-devtools/pull/644

的方式