chrome中安裝Vue調試工具vue-devtools

一.前言

　　vue-devtools是一款基於瀏覽器的插件，用來調試vue應用。本篇文章將要總結的是如何在chrome中安裝Vue的調試工具vue-devtools。

　　首先能想到的第一種方法就是直接在chrome應用商店中安裝。然鵝，因爲大部分的人仍是上不了chrome的，我也是。因此呢，就在網上搜羅一番，發現了其餘的方法。

　　　　1.在其餘網站上直接下載chrome的插件。

　　　　2.下載vue-devtools項目，編譯出擴展程序插件後，添加到瀏覽器的擴展程序中。

　　而後就這兩種方法，分別都來實踐一下。

二.在其餘網站上直接下載chrome的插件

1.下載

　　我找了很能夠在在chrome插件的網站，試了好幾回，最終只有這個網站能夠成功安裝：https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd（若連接失效可點擊此處進入網站首頁手動搜索）

　　在該網站下載的擴展文件以下：

　　

 

 

 

 2.在chrome中進行安裝

　　打開chrome的擴展程序（可直接在地址欄輸入：chrome://extensions/）

　　注意：須要打開開發者模式

　　

 

　　接着呢，點擊【加載已解壓的擴展程序】選擇咱們剛剛下載的插件，或者直接將插件拖拽到該區域，

　　

 　　成功添加的提示：

 　　

 

 　　同時添加成功後瀏覽器右上角會有圖標顯示

　　 

 

 3.測試是否安裝成功

　　咱們如今訪問一個vue實現的應用

 　　

 

 　　而後在打開開發中工具，在最上面一欄的最後，有一個vue的選項卡，點擊就能打開調試工具。

　　

 　　

　　看來咱們已經安裝成功了

 4.總結

　　這種方法呢，有點很差的一點就是得找到能夠正常安裝的擴展程序，我也是找下載了好幾個去嘗試，拖到瀏覽器的擴展工具中就會報錯。

三.下載vue-devtools項目編譯安裝

1.下載

　　　 vue-devtools項目在github上，地址爲：https://github.com/vuejs/vue-devtools，記得下載或者克隆的時候切換到主分支。

　　

 　　　  下載獲得的文件：

　　　　

 

 

 　　　　解壓：

　　　　

2.安裝依賴包

 　　

 

 3.修改manifest.json文件

　　manifest.json文件的位置：

　　

 　　修改的內容：

　　

 

 4.編譯代碼

　　使用npm run build編譯代碼

　　

 

5.在瀏覽器擴展程序中添加

　　將E:\vue-devtools-master\shells下的chrome目錄添加到瀏覽器的擴展程序中，或者直接將該文件夾拖拽到瀏覽器的擴展程序中。

　　

 

 　  添加成功：

 

 

　　

 

 6.測試是否安裝成功

　　

 

　　 

 

完！！！