常见问题解答

如何在 IE/Safari 或其他浏览器中使用 devtools？

如果您的浏览器没有提供我们的浏览器扩展，我们制作了一个独立的 Vue devtools 应用程序。立即获取！

修复在本地通过 file:// 协议工作时出现的“下载 Vue Devtools 以获得更好的开发体验”控制台消息

Google Chrome：右键单击 vue-devtools 图标，然后单击“管理扩展程序”，然后在扩展程序列表中搜索 vue-devtools。选中“允许访问文件 URL”框。

以下是一些故障排除步骤，可帮助您解决浏览器中无法显示 Vue devtools 的问题

检查您是否已安装扩展程序。
如果您在实时网站上，则很有可能它使用的是 Vue 的生产版本。
- 在 CDN 上使用非压缩的、非 prod 版本的 Vue
- 使用像 Webpack 这样的打包器时，为 Vue 3 设置 __VUE_PROD_DEVTOOLS__ 环境变量 (更多信息).
尝试关闭 devtools 面板，刷新页面，然后再次打开 devtools 面板。
尝试重启浏览器或计算机。
如果您安装了多个版本的 Vue devtools，建议您禁用/删除其他版本。
尝试禁用其他 devtools 扩展程序，例如 React devtools。
在浏览器控制台中查找错误。
更新您的项目依赖项。
即使工具栏中的 Vue 徽标呈灰色并显示“未检测到 Vue”，也请打开浏览器 devtools 并检查 Vue 选项卡是否已显示。

确保您的数据在模板中使用过。出于性能原因，Vue 使用了延迟响应式系统，因此 devtools 可能会读取一些组件数据，但 Vue 可能不会像您预期的那样触发更新。

您也可以单击 devtools 顶部的 强制刷新 按钮，手动刷新组件数据。

默认情况下，devtools 会尝试在时间轴上发生事件时拍摄应用程序的屏幕截图。但由于各种原因（例如在 Chrome 上分离 devtools 面板），它可能会失败。在这种情况下，您可以通过打开 devtools 右上角的“更多”菜单（三个垂直点）来关闭屏幕截图。

新的 Vue devtools 提供了强大的公共 API，以便包作者可以与 devtools 集成（例如 vuex 或 pinia）。由于能力越大，责任越大，您可以通过转到“更多”菜单（右上角的三个垂直点），然后转到“Devtools 插件...”来禁用插件的特定权限，甚至完全关闭它。

此功能需要在您的项目中进行一些设置才能正常工作。有关更多信息，请参见此处。

有关更多信息，请参见安装以前的版本。