vue -- 項目調試

方式1：vue-devtools插件

vue-devtools是一款基於chrome遊覽器的插件，用於調試vue應用，這能夠極大地提升咱們的調試效率。

使用步驟

一、 到github下載：https://github.com/vuejs/vue-devtools

二、 在vue-devtools目錄下安裝依賴包

cd vue-devtools
cnpm install

三、 擴展Chrome插件

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

四、 vue-devtools使用

vue項目, 打開f12, 選擇vue就能夠使用了。

使用debugger和sourcemap調試Vue組件（重點）

針對vue-cli webpack官方腳手架，打開build/webpack.dev.conf.js文件，找到下面這句：

devtool: '#cheap-module-eval-source-map',

新版本也可在config/index.js中找到，注意是在開發環境裏（dev），

修改成：

devtool: '#eval-source-map',

好了，一不當心要改的配置已經改完了~

使用：

如今是具體調試了。假設咱們想調試App.vue這個組件，能夠在想要調試的代碼前添加debugger方法。