1. 通過 Git 克隆項(xiàng)目到本地

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

2. Git 進(jìn)入到 vue-devtools 所在目錄，然后運(yùn)行以下兩個(gè)指令。

先運(yùn)行 npm install 安裝項(xiàng)目依賴

再運(yùn)行 npm run build 進(jìn)行編譯生成

這兩條指令的運(yùn)行都需要一定的時(shí)間，請(qǐng)耐心等待，build 成功后如下圖：

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

4. 將擴(kuò)展程序添加到chrome瀏覽器

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

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

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

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

5. 到此調(diào)試工具安裝完成。

需要注意的項(xiàng)： vue調(diào)試工具請(qǐng)?jiān)陂_發(fā)模式下使用，生產(chǎn)環(huán)境中不行。即 vue.min.js 文件下，調(diào)試工具無效。

下面看下vue調(diào)試工具vue-devtools的安裝方法

先導(dǎo)

vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開發(fā)vue應(yīng)用。

第一步：

  我們可以先從github上找到vue-devtools的項(xiàng)目，下載到本地。下載vue-devtools鏈接。

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

第二步：

  解壓下載好的文件，進(jìn)入到vue-devtools目錄，安裝項(xiàng)目所需要的依賴包。

安裝方法：npm install  或者  cnpm install （注：cnpm命令是國(guó)內(nèi)的鏡像，速度會(huì)快一些）

第三步：

   編譯項(xiàng)目文件。

編譯方法：npm run build


第四步：

修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。 persistent參數(shù)改為true，訪問協(xié)議是否包含：

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

第五步：

           添加至瀏覽器：

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

第六步：

使用：

    打開我們的vue應(yīng)用，打開調(diào)試，點(diǎn)擊vue擴(kuò)展圖標(biāo)，就可以使用了。如下圖：

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

結(jié)束。

總結(jié)

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

最新評(píng)論