# 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`”。  點擊顯示的第一個建議“`vue devtools`”，或僅按“`Enter`”。 ## 步驟 2： 點擊“添加到 Chrome 瀏覽器”按鈕，如下圖所示。  您將看到一個彈出窗口，要求某些權限。 點擊“添加擴展名”按鈕進行確認。  ### 步驟 3： 添加擴展名后，您會注意到一條確認消息以及一個小的快捷方式，如下所示。  瞧！ 您的 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`”。  這是因為我們正在從系統中打開 HTML 文件，并且未將其部署在任何服務器上，即我們正在使用文件 URL。 只需看一下地址欄，您會發現地址以`file:///`開頭。 解決此問題的簡單方法是右鍵單擊快捷方式，選擇“管理擴展名”，然后打開“允許訪問文件 URL”切換按鈕。  現在，使用文件 URL 刷新頁面，將按預期檢測到 Vue.js。 要查看 Root 實例和數據對象，請打開 chrome 開發人員工具（按鍵盤上的`F12`），然后在 Vue 面板上單擊。  完全不了解當前 Vue 面板中顯示的所有內容絕對可以。 我們將討論各個方面，并與他們合作。 再見，祝您有美好的一天！