vue除錯工具vue-devtools安裝及使用（親測有效，望採納）
vue除錯工具vue-devtools安裝及使用（親測有效，望採納）
https://www.cnblogs.com/chenhuichao/p/11039427.html
本文主要介紹 vue的除錯工具 vue-devtools 的安裝和使用
工欲善其事, 必先利其器, 快快一起來用vue-devtools來除錯開發你的vue專案吧
安裝:
1.到github下載：（！下載一定要記得是master主分支的程式碼，預設克隆後進入的是dev分支，執行npm run build會報錯，執行git checkout master切換到master主分支）
git clone https://github.com/vuejs/vue-devtools
2.在vue-devtools目錄下安裝依賴包
| 1 2 |
cd vue-devtools
npm install
|
3.依賴包下載完後執行npm run build,編譯打包成功後會在shells下生成chrome資料夾。此資料夾就是用來放入chrome的擴充套件程式。
npm run build
4.擴充套件Chrome外掛
開啟Chrome瀏覽器 >選擇更多工具>擴充套件程式 >開啟開發者模式
點選載入已解壓的擴充套件程式, 找到剛才生成的chrome資料夾，選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖
6. vue-devtools使用
vue專案, 開啟f12, 選擇vue就可以使用了.
vue是資料驅動的, 這樣就能看到對應資料了, 方便我們進行除錯
溫馨提示：
推薦一個超級方便的下載vue-devtools外掛的地址吧，再不用這麼麻煩https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521，
下載拖拽到谷歌瀏覽器就行了
1. 下載外掛
到收藏貓外掛下載外掛
https://chrome.pictureknow.com
並在瀏覽器提示中選擇【保留】
2. 開啟瀏覽器擴充套件安裝頁面
點選瀏覽器右上角⋮>更多工具> 點選擴充套件程式
3. 安裝外掛
在擴充套件中心開啟右上角的【開發者模式】按鈕，然後【重新整理】頁面，把下載好的 .crx 檔案拖入擴充套件中心
是不是更簡單啦；裝成功了，可以來點個推薦哦
本文主要介紹 vue的除錯工具 vue-devtools 的安裝和使用
工欲善其事, 必先利其器, 快快一起來用vue-devtools來除錯開發你的vue專案吧
安裝:
1.到github下載：（！下載一定要記得是master主分支的程式碼，預設克隆後進入的是dev分支，執行npm run build會報錯，執行git checkout master切換到master主分支）
git clone https://github.com/vuejs/vue-devtools
2.在vue-devtools目錄下安裝依賴包
| 1 2 |
cd vue-devtools
npm install
|
3.依賴包下載完後執行npm run build,編譯打包成功後會在shells下生成chrome資料夾。此資料夾就是用來放入chrome的擴充套件程式。
npm run build
4.擴充套件Chrome外掛
開啟Chrome瀏覽器 >選擇更多工具>擴充套件程式 >開啟開發者模式
點選載入已解壓的擴充套件程式, 找到剛才生成的chrome資料夾，選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖
6. vue-devtools使用
vue專案, 開啟f12, 選擇vue就可以使用了.
vue是資料驅動的, 這樣就能看到對應資料了, 方便我們進行除錯
溫馨提示：
推薦一個超級方便的下載vue-devtools外掛的地址吧，再不用這麼麻煩https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521，
下載拖拽到谷歌瀏覽器就行了
1. 下載外掛
到收藏貓外掛下載外掛
https://chrome.pictureknow.com
並在瀏覽器提示中選擇【保留】
2. 開啟瀏覽器擴充套件安裝頁面
點選瀏覽器右上角⋮>更多工具> 點選擴充套件程式
3. 安裝外掛
在擴充套件中心開啟右上角的【開發者模式】按鈕，然後【重新整理】頁面，把下載好的 .crx 檔案拖入擴充套件中心
是不是更簡單啦；裝成功了，可以來點個推薦哦