# 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](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20517%20367'%3E%3C/svg%3E)

<noscript><img alt="Chrome web store" class="alignnone size-full wp-image-13984" height="367" src="img/4256a8735003b689a7a0a0c2ed60bb90.png" width="517"/><p>点击显示的第一个建议“ vue devtools”，或仅按“ Enter”。</p><h2><strong>步骤 2：</strong></h2><p>点击“添加到 Chrome 浏览器”按钮，如下图所示。</p><p><img alt="Vue Devtools extension" class="alignnone size-full wp-image-13985" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/2_addToChrome-1.jpg" height="272" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20952%20272'%3E%3C/svg%3E" width="952"/></p><noscript><img alt="Vue Devtools extension" class="alignnone size-full wp-image-13985" height="272" src="img/1fce0ff1ca3fdd876e9642754ef586ad.png" width="952"/><p>您将看到一个弹出窗口，要求某些权限。 点击“添加扩展名”按钮进行确认。</p><p><img alt="Devtools add confirmation" class="alignnone size-full wp-image-13986" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/3_addExtensionConfirmation-1.jpg" height="272" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20818%20272'%3E%3C/svg%3E" width="818"/></p><noscript><img alt="Devtools add confirmation" class="alignnone size-full wp-image-13986" height="272" src="img/7792dae54eeb1af22e79a5dc410258b9.png" width="818"/><h3><strong>步骤 3：</strong></h3><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>添加扩展名后，您会注意到一条确认消息以及一个小的快捷方式，如下所示。</p><p><img alt="Devtools add confirmation" class="alignnone size-full wp-image-13987" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/4_ExtnAdded.jpg" height="279" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201286%20279'%3E%3C/svg%3E" width="1286"/></p><noscript><img alt="Devtools add confirmation" class="alignnone size-full wp-image-13987" height="279" src="img/2e15d96fa5404165697eec4ed89ae97b.png" width="1286"/><p>瞧！ 您的 Chrome 浏览器中已安装 Vue Devtools ！！</p><p>让我们尝试启动一个页面，看看是否启用了此快捷方式。 换句话说，它变成了彩色？ 这表明正在检测到 Vue.js，我们可以开始使用它。 我正在 chrome 浏览器中打开我们刚刚安装了 devtools 扩展程序的<a href="https://javabeginnerstutorial.com/vue-js/3-vue-directives/">先前文章</a>中讨论的<a href="https://github.com/JBTAdmin/vuejs/blob/master/03_Introduction%20to%20Vue%20directives/index.html"> index.html 文件</a>。</p><p>如果快捷方式仍处于禁用状态，则不要惊慌，单击该快捷方式将显示“ Vue.js not found”。</p><p><img alt="Vue not detected" class="alignnone size-full wp-image-13988" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/5_VueNotDetected.jpg" height="247" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20428%20247'%3E%3C/svg%3E" width="428"/></p><noscript><img alt="Vue not detected" class="alignnone size-full wp-image-13988" height="247" src="img/0496f07d0e0285251afcd2183e991e65.png" width="428"/><p>这是因为我们正在从系统中打开 HTML 文件，并且未将其部署在任何服务器上，即我们正在使用文件 URL。 只需看一下地址栏，您会发现地址以<code>file:///</code>开头。</p><p>解决此问题的简单方法是右键单击快捷方式-&gt;选择“管理扩展名”，然后打开“允许访问文件 URL”切换按钮。</p><p><img alt="Devtools allow access" class="alignnone size-full wp-image-13982" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/7_AllowAcessToFileUrls.jpg" height="260" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20697%20260'%3E%3C/svg%3E" width="697"/></p><noscript><img alt="Devtools allow access" class="alignnone size-full wp-image-13982" height="260" src="img/06734acb15bbd845e521b820b6f1994f.png" width="697"/><p>现在，使用文件 URL 刷新页面，将按预期检测到 Vue.js。 要查看 Root 实例和数据对象，请打开 chrome 开发人员工具（按键盘上的<strong> F12 </strong>），然后在 Vue 面板上单击。</p><p><img alt="Vue panel" class="alignnone size-full wp-image-13983" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_VuePanel.jpg" height="505" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20717%20505'%3E%3C/svg%3E" width="717"/></p><noscript><img alt="Vue panel" class="alignnone size-full wp-image-13983" height="505" src="img/1ea94fc972478ebd1eaad7ac4a96c3f9.png" width="717"/><p>完全不了解当前 Vue 面板中显示的所有内容绝对可以。 我们将讨论各个方面，并与他们合作。</p><p>再见，祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/5-data-binding-p1/" title="5\. Data binding Part 1 (Text, raw HTML, JavaScript expressions)"> 5.数据绑定第 1 部分（文本，原始 HTML，JavaScript 表达式）</a></h5></div></div> </body> </html></noscript>