vue調試工具vue-devtools安裝及使用方法

https://www.jb51.net/article/150335.htm

 

本文主要介紹 vue的調試工具 vue-devtools 的安裝和使用

工欲善其事, 必先利其器, 快快一起來用vue-devtools來調試開發你的vue項目吧

安裝:

1.到github下載：

?

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

2.在vue-devtools目錄下安裝依賴包

?

1 2	cd vue-devtools cnpm install

3.修改manifest.json文件

把"persistent":false改成true

 4.編譯代碼

npm run build

5.擴展Chrome插件

Chrome瀏覽器 >  更多程序 > 拓展程序

點擊加載已解壓程序按鈕, 選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖

6. vue-devtools使用

vue項目, 打開f12, 選擇vue就可以使用了.

vue是數據驅動的, 這樣就能看到對應數據了, 方便我們進行調試

 怎么樣, 是不是感覺工作效率提高了呢

溫情提示:

1.vue必須引入開發版, 使用min壓縮版是不能使用devtools進行調試的

2.安裝后, 需要關閉瀏覽器, 再重新打開, 才能使用

下面在單獨給大家介紹下vue調試神器devtools的 安裝

vue  devtools 安裝

1. 下載完成后，在文件夾下 npm install
2. 然后npm run build
3. 完成之后，打開…\vue-devtools-dev\vue-devtools-dev\shells\chrome 下的manifest.json修改"persistent": false —> "persistent": true
4. 完成之后，打開…\vue-devtools-dev\vue-devtools-dev\shells\chrome 下的webpack.config.js修改為 process.env.NODE_ENV !== 'development'
5. 在chrome://extensions/中打開開發者模式，將vue-devtools-dev\vue-devtools-dev\shells\chrome 文件夾拉入
6. 完成后的樣子

總結

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