1. 程式人生 > >Vue.js devtools外掛使用說明

Vue.js devtools外掛使用說明

2018-06-03版本 網盤地址:

https://pan.baidu.com/s/14PoaihUHQZEJtiHNWUmdjg

谷歌外掛安裝

谷歌瀏覽器中擴充套件程式,開啟開發者模式

方法一:

在瀏覽器中開啟,更多工具-擴充套件程式

2、在把剛剛下載的檔案拖進開啟的頁面中。

3、安裝後頁面如下。同時勾選“開發者模式”。此時會出現外掛id:nhdogjmejiglipccpnnnanhbledajbpd。注意,建議勾選“允許訪問檔案網址”,這個可以允許外掛對本地檔案進行除錯。如:file:///D:/Vue2.x/BookExample/01.hello.html。

4、使用id搜尋,一般在C盤。選擇並開啟對應的資料夾。

方法二:

1.把下載後的.crx副檔名的離線Chrome外掛的副檔名改成.zip或者.rar(如何檢視Chrome外掛的副檔名?資料夾>工具>資料夾>檢視>隱藏已知檔案型別的副檔名),如圖所示:
method3.1

2.
右鍵點選該檔案,並使用壓縮軟體(如winrar、好壓、360壓縮等)對該壓縮檔案進行解壓,並儲存到系統的一個任意資料夾下,如圖所示:
method3.2

3.解壓成功以後,該Chrome外掛就會以資料夾的形式存在於作業系統的某一個目錄下面,如圖所示:
method3.3

4.在Chrome的位址列中輸入:chrome://extensions/ 開啟Chrome瀏覽器的擴充套件程式管理介面,並在該介面的右上方的開發者模式按鈕上打勾,如圖所示:
method3.4


5.在勾選開發者模式選項以後,在該頁面就會出現載入正在開發的擴充套件程式等按鈕,點選“載入正在開發的擴充套件程式”按鈕,並選擇剛剛解壓的Chrome外掛資料夾的位置,如圖所示:
method3.5

修改檔案配置

5、開啟資料夾後,修改兩個檔案。開啟檔案manifest.json,把"persistent": false改成"persistent": true;

manifest.json

6、點選“F12”,在除錯工作中出現vue工具,如下圖。現在就可以除錯了。