文章目錄

• Vue Devtools的GitHub官網地址
• 安裝 Vue Devtools
• 通過瀏覽器外掛安裝
• 通過原始碼安裝
• vue-devtools的使用

  Vue Devtools是Vue程式碼的瀏覽器除錯外掛。

Vue Devtools的GitHub官網地址

  Vue Devtools是一款開源的瀏覽器外掛，其GitHub地址如下：

• vue-devtools

  在這裡如果我們想使用Vue Devtools的話，我們有兩種安裝方式：

• 通過瀏覽器外掛安裝
• 通過原始碼安裝

安裝 Vue Devtools

通過瀏覽器外掛安裝

  Vue Devtools一共提供了兩個現成的瀏覽器外掛安裝版本，分別是Chrome與Firefox，考慮到國內大多數主流瀏覽器都是基於Chrome核心所做的二次開發，比如說下圖所示的情況：

  因而我這裡以Chrome版本的瀏覽器外掛為例進行安裝。

  Chrome瀏覽器外掛下載地址：

• Chrome Extension

  其解壓後的檔案為：

vue devtools.crx

  vue devtools.crx瀏覽器外掛安裝起來非常方便，因為其能夠直接被Chrome

通過原始碼安裝

  通過原始碼安裝的方式安裝，首先得需要我們克隆或下載vue-devtools原始碼專案，其下載方式也比較簡單，如圖：

  通過命令列的方式進入vue-devtools根目錄，執行下面的安裝命令：

cnpm install

  當我們看到下面的資訊時，這說明我們的vue-devtools已經安裝成功。

  接下來就是啟用vue-devtools瀏覽器外掛，此時我們需要執行下面的命令：

npm run build

  在這裡的是否通過命令列形式安裝webpack-cli時，我們選擇yes，安裝成功後的結果如下所示：

  開啟360急速瀏覽器，在位址列中輸入下面的地址進入擴充套件程式介面：

chrome://myextensions/extensions/

  在該介面中，點選圖示的操作，來安裝vue-devtools

  在彈出的安裝介面中，選擇vue-devtools-dev專案根目錄下的shells/chrome，其安裝後的介面如圖：

  此時我們就可以在瀏覽器的外掛欄中看到vue-devtools-dev圖示

vue-devtools的使用

  在使用vue-devtools時，我們以前一篇文章中的原始碼為例來進行說明：

• Vue中的vue-router

  在啟動專案後，在瀏覽器中通過點選F12來開啟瀏覽器控制檯，在控制檯中，我們可以檢視到已安裝的Vue功能選項，如下：

  通過點選頁面中的超連結，我們可以在Vue的控制檯面板中看到相應的路由地址變化。