# 4\. Vue Devtools 设置

> 原文： [https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/](https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/)

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

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

## 步骤 1：

访问 [chrome 网上商店](https://chrome.google.com/webstore/category/extensions)，然后在搜索栏中输入“`vue devtools`”。

![Chrome web store](img/4256a8735003b689a7a0a0c2ed60bb90.png)

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

## **步骤 2：**

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

![Vue Devtools extension](img/1fce0ff1ca3fdd876e9642754ef586ad.png)

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

![Devtools add confirmation](img/7792dae54eeb1af22e79a5dc410258b9.png)

### **步骤 3：**

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

![Devtools add confirmation](img/2e15d96fa5404165697eec4ed89ae97b.png)

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

让我们尝试启动一个页面，看看是否启用了此快捷方式。 换句话说，它变成了彩色？ 这表明正在检测到 Vue.js，我们可以开始使用它。 我正在 chrome 浏览器中打开我们刚刚安装了 devtools 扩展程序的[先前文章](https://javabeginnerstutorial.com/vue-js/3-vue-directives/)中讨论的[`index.html`文件](https://github.com/JBTAdmin/vuejs/blob/master/03_Introduction%20to%20Vue%20directives/index.html)。

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

![Vue not detected](img/0496f07d0e0285251afcd2183e991e65.png)

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

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

![Devtools allow access](img/06734acb15bbd845e521b820b6f1994f.png)

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

![Vue panel](img/1ea94fc972478ebd1eaad7ac4a96c3f9.png)

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

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