安裝 Vue-devtools拓展程式

Chrome安裝 Vue-devtools拓展程式

• 一、Vue-devtools簡介
• 二、安裝
• • 1、打開終端下載下傳倉庫代碼
  • 2、下載下傳依賴node_modules
  • 3、編譯打包
  • 4、修改`manifest.json`檔案
  • 5、在Chrome浏覽器中加載已解壓的擴充程式
• 三、安裝遇到的坑
• • build 問題
• 四、換種方式下載下傳
• • 1、安裝指令
  • 2、修改`manifest.json`檔案
  • 3、加載擴充程式

一、Vue-devtools簡介

vue-devtools是一款用于vue應用的調試的基于chrome浏覽器的插件，可極大地提高我們的調試效率。可幫助我們快速的調試開發vue應用。

二、安裝

1、打開終端下載下傳倉庫代碼

git clone https://github.com/vuejs/devtools.git
           

2、下載下傳依賴node_modules

npm install
           

3、編譯打包

npm run build
           

4、修改

manifest.json

檔案

5、在Chrome浏覽器中加載已解壓的擴充程式

需要選擇的插件目錄是

vue-devtools\shells\chrome

三、安裝遇到的坑

build 問題

在上邊第三步時有時會遇到

build

不成功的情況

四、換種方式下載下傳

1、安裝指令

首先建立一個空檔案夾，然後在此檔案夾下去執行

npm install vue-devtools
           

如上圖，即完成安裝 vue-devtools。

2、修改

manifest.json

檔案

安裝完成後，進入該檔案下的

node_modules

檔案，找到

vue-devtools

檔案，将

vender

檔案下的

manifest.json

，修改

persistent

為 true。

3、加載擴充程式

将

vender

檔案拖至谷歌浏覽器的擴充程式中即可。重新開機浏覽器擴充程式即可使用。