在Chrome或Firefox瀏覽器的擴展插件倉庫里搜vue devtool，安裝Vue.js devtools后結合下面這張官方動圖，其他就不多說了，這不是本文重點。
針對vue-cli webpack官方腳手架，打開build/webpack.dev.conf.js文件，找到下面這句：
devtool: '#cheap-module-eval-source-map', 將其修改為：
devtool: '#eval-source-map ', 要修改的地方已經都改好了，就是這么簡單，驚不驚喜，意不意外。
現在是具體調試了。假設我們想調試App.vue這個組件，可以在想要調試的代碼前添加debugger方法，如下圖所示：
然后運行npm run dev（如果你沒改命令的話，默認開始命令是這個），啟動服務后刷新頁面（刷新前先把瀏覽器開發者工具打開），可以看到在程序進入App.vue組件mounted這個組件生命周期鈎子里后，指定到debugger處時程序就被debug了。如下圖所示，剩下的大家應該都很熟悉了。可以看到，此處顯示的代碼就是我們組件里的實際代碼，並非被我們編譯混淆后的那種代碼，可讀性非常好。