1. 通過 Git 克隆項目到本地

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

2. Git 進入到 vue-devtools 所在目錄，然后運行以下兩個指令。

先運行 npm install 安裝項目依賴

再運行 npm run build 進行編譯生成

這兩條指令的運行都需要一定的時間，請耐心等待，build 成功后如下圖：

3.修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。 將persistent 參數(shù)改為 true，如下圖：

4. 將擴展程序添加到chrome瀏覽器

a. 打開瀏覽器擴展程序（也可以直接在地址欄輸入 chrome://extensions/ 來打開）

b. 打開擴展程序后，開啟 開發(fā)者模式，點擊 加載已解壓的擴展程序 按鈕

c. 選擇 vue-devtools > shells 目錄下的 Chrome 文件夾，成功后如下圖：

　加載成功后，先啟用，然后點擊旁邊的刷新按鈕，瀏覽器右上角就會出現(xiàn)一個Vue的logo圖標

5. 到此調試工具安裝完成。

需要注意的項： vue調試工具請在開發(fā)模式下使用，生產(chǎn)環(huán)境中不行。即 vue.min.js 文件下，調試工具無效。

下面看下vue調試工具vue-devtools的安裝方法

先導

vue-devtools是一款基于chrome瀏覽器的插件，用于vue應用的調試，這款vue調試神器可以極大地提高我們的調試效率。幫助我們快速的調試開發(fā)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參數(shù)改為true，訪問協(xié)議是否包含：

1.http://*/*; 2.https://*/*; 3.file:///*;這三種情況

第五步：

           添加至瀏覽器：

添加方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進入擴展程序頁面，然后點擊“加載已解壓的擴展程序...”按鈕；選擇vue-devtools>shells目錄下的Chrome文件夾；還需允許文件地址是否訪問。如果看不到“加載已解壓的擴展程序...”按鈕，先勾選“開發(fā)者模式”。如下圖:

第六步：

使用：

    打開我們的vue應用，打開調試，點擊vue擴展圖標，就可以使用了。如下圖：

注：如果點擊vue擴展圖標還是提示：Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以檢查下你是否使用的是壓縮版本的vue.min.js，使用vue.min.js默認為生產(chǎn)環(huán)境的，需要改為vue.js.

結束。

總結

以上所述是小編給大家介紹的VUE 配置vue-devtools調試工具及安裝方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論