4 Vue Devtools 设置

原文： https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/

警告：一旦发现如何使用 Vue Devtools 扩展，您将永远不会回到正常的世界。 通过提供用户友好的表示形式，调试变得非常容易。 不仅如此，在早期阶段安装它还将通过检查每个实例来帮助您了解 Vue 的工作原理，并加快整个学习和开发过程。 它可用作 Chrome 和 Firefox 的浏览器扩展。

事不宜迟，让我们通过在 chrome 浏览器中安装 Vue devtools 来扼杀它。 让我们开始吧！

步骤 1：

访问 chrome 网上商店，然后在搜索栏中输入“vue devtools”。

点击显示的第一个建议“vue devtools”，或仅按“Enter”。

步骤 2：

点击“添加到 Chrome 浏览器”按钮，如下图所示。

您将看到一个弹出窗口，要求某些权限。 点击“添加扩展名”按钮进行确认。

步骤 3：

添加扩展名后，您会注意到一条确认消息以及一个小的快捷方式，如下所示。

瞧！ 您的 Chrome 浏览器中已安装 Vue Devtools ！！

让我们尝试启动一个页面，看看是否启用了此快捷方式。 换句话说，它变成了彩色？ 这表明正在检测到 Vue.js，我们可以开始使用它。 我正在 chrome 浏览器中打开我们刚刚安装了 devtools 扩展程序的先前文章中讨论的index.html文件。

如果快捷方式仍处于禁用状态，则不要惊慌，单击该快捷方式将显示“Vue.js not found”。

这是因为我们正在从系统中打开 HTML 文件，并且未将其部署在任何服务器上，即我们正在使用文件 URL。 只需看一下地址栏，您会发现地址以file:///开头。

解决此问题的简单方法是右键单击快捷方式，选择“管理扩展名”，然后打开“允许访问文件 URL”切换按钮。

现在，使用文件 URL 刷新页面，将按预期检测到 Vue.js。 要查看 Root 实例和数据对象，请打开 chrome 开发人员工具（按键盘上的F12），然后在 Vue 面板上单击。

完全不了解当前 Vue 面板中显示的所有内容绝对可以。 我们将讨论各个方面，并与他们合作。

再见，祝您有美好的一天！