谷歌chrome瀏覽器vue調試工具vue-devtools的安裝

先導

vue-devtools是一款基於chrome瀏覽器的插件，用於vue應用的調試，這款vue調試神器能夠極大地提升咱們的調試效率。幫助咱們快速的調試開發vue應用。

 

第一步：

  咱們能夠先從github上找到vue-devtools的項目，下載到本地。下載vue-devtools連接。

克隆方法：git clone https://github.com/vuejs/vue-devtools.git

 

第二步：

  解壓下載好的文件，進入到vue-devtools目錄，安裝項目所須要的依賴包。

安裝方法：npm install  或者  cnpm install （注：cnpm命令是國內的鏡像，速度會快一些）

 

第三步：

   編譯項目文件。

編譯方法：npm run build

 

第四步：

修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。

persistent參數改成true，訪問協議是否包含：1.http://*/*; 2.https://*/*; 3.file:///*;這三種狀況

 

第五步：

添加至瀏覽器：

添加方法：在chrome瀏覽器輸入地址：「chrome://extensions/」進入擴展程序頁面，

而後點擊「加載已解壓的擴展程序...」按鈕；選擇vue-devtools>shells目錄下的Chrome文件夾；

還需容許文件地址是否訪問。若是看不到「加載已解壓的擴展程序...」按鈕，先勾選「開發者模式」。以下圖:

 

第六步：

使用：

    打開咱們的vue應用，打開調試，點擊vue擴展圖標，就能夠使用了。以下圖：

 

 

注：若是點擊vue擴展圖標仍是提示：

Vue.jsis detectendonthis page.Open DevToolsand lookfor the Vue panel

 

能夠檢查下你是否使用的是壓縮版本的vue.min.js，使用vue.min.js默認爲生產環境的，須要改成vue.js.

 

 

結束。