Vue.js開發工具

Vue有一個很棒的面板,可以集成到瀏覽器開發人員工具中,使您可以檢查應用程序並與之交互,從而簡化調試和理解過程。


首次嘗試使用Vue時,如果打開瀏覽器開發人員工具,則會發現以下消息:下載Vue Devtools擴展以獲得更好的開發體驗:https://github.com/vuejs/vue-devtools

Hint to install the Vue devtools

這是一個友好的提醒,請您安裝Vue Devtools擴展。那是什麼?任何流行的框架都有其自己的devtools擴展,通常會為瀏覽器開發人員工具添加一個新面板,該面板比瀏覽器默認提供的工具更加專業。在這種情況下,面板將使我們檢查Vue應用程序並與其進行交互。

在構建Vue應用程序時,此工具將為您提供驚人的幫助。開發人員工具只能在處於開發模式時檢查Vue應用程序。這樣可以確保沒有人可以使用它們與您的生產應用程序進行交互(並且可以使Vue的性能更高,因為它不必關心devtools)

讓我們安裝它!

有3種安裝Vue Dev Tools的方法:

  • 在Chrome上
  • 在Firefox上
  • 作為獨立的應用程序

自定義擴展不支持Safari,Edge和其他瀏覽器,但是使用獨立應用程序,您可以調試在任何瀏覽器中運行的Vue.js應用程序。

在Chrome上安裝

轉到Google Chrome商店中的此頁面:https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd然後點擊新增至Chrome

Add to chrome

完成安裝過程:

Add extension

Vue.js devtools圖標顯示在工具欄中。如果頁面沒有正在運行的Vue.js實例,則該頁面顯示為灰色。

Vue DevTools installed

如果檢測到Vue.js,則該圖標具有Vue徽標顏色。

Icon colored

該圖標除了向我們顯示該圖標外沒有任何作用一個Vue.js實例。要使用devtools,我們必須使用“查看→開發人員→開發人員工具”打開“開發人員工具”面板,或者Cmd-Alt-i

DevTools window

在Firefox上安裝

您可以在Mozilla插件商店中找到Firefox開發工具擴展:https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

Firefox addons store

點擊 ”添加到Firefox”,該擴展程序將被安裝。與Chrome一樣,工具欄中會顯示一個灰色圖標

Firefox addon installed

當您訪問正在運行Vue實例的網站時,該網站將變為綠色,並且當我們打開開發工具時,我們會看到一個“Vue“ 控制板:

Vue devtools in Firefox

安裝獨立應用

或者,您可以使用DevTools獨立應用程序。

使用安裝

npm install -g @vue/devtools

//or

yarn global add @vue/devtools

並通過調用來運行它

vue-devtools

這將打開獨立的基於電子的應用程序。

Standalone Vue devtools

現在,粘貼顯示給您的腳本標籤:

<script src="http://localhost:8098"></script>

在項目內部index.html文件,然後等待應用程序重新加載,它將自動連接到該應用程序:

Standalone Vue devtools connected

如何使用開發人員工具

如前所述,可以通過在瀏覽器中打開開發人員工具並移至Vue面板來激活Vue DevTools。

另一個選項是右鍵單擊頁面中的任何元素,然後選擇“檢查Vue組件”:

Inspect vue component

打開Vue DevTools面板後,我們可以導航組件樹。當我們從左側的列表中選擇一個組件時,右側面板將顯示其擁有的道具和數據:

Navigate the components tree

頂部有4個按鈕:

  • 成分(當前面板),其中列出了當前頁面中運行的所有組件實例。 Vue可以同時運行多個實例,例如,它可以使用單獨的輕量級應用程序管理購物車小部件和幻燈片。
  • 威克斯您可以在其中檢查通過以下方式管理的狀態威克斯
  • 大事記顯示所有發出的事件
  • 刷新重新加載devtools面板

注意小= $vm0組件旁邊的文字?這是使用控制台檢查組件的便捷方法。按“ esc”鍵將在devtools底部顯示控制台,您可以輸入$vm0訪問Vue組件:

Component Console Shortcut

檢查組件並與之交互非常酷,而不必在代碼中將它們分配給全局變量。

過濾組件

開始輸入組件名稱,組件樹將過濾出不匹配的組件。

Filter components

在頁面中選擇組件

點擊

Select component in the page

按鈕,您可以用鼠標懸停頁面中的任何組件,單擊它,它將在devtools中打開。

格式化組件名稱

您可以選擇在camelCase中顯示組件或使用破折號。

篩選檢查的數據

在右側面板上,您可以輸入任何單詞來過濾與之不匹配的屬性。

檢查DOM

單擊“檢查DOM”按鈕,將其帶到DevTools Elements檢查器中,該DOM元素由組件生成:

Inspect DOM

在編輯器中打開

任何用戶組件(不是框架級組件)都有一個按鈕,可以在默認編輯器中將其打開。非常便利。

免費下載我的Vue手冊


更多vue教程: