Vue用了很久了讳侨，大部分時(shí)候看下報(bào)錯(cuò)信息粘拾，結(jié)合Vue.js devtools查看下各個(gè)組件的數(shù)據(jù)其實(shí)就可以了憔晒，但是有時(shí)候還是有必要使用debugger的甚侣。
主要講三個(gè)東西：
Vue.js devtools開發(fā)工具的使用
使用debugger和sourcemap調(diào)試Vue組件
vscode中調(diào)試Vue組件
Vue.js devtools開發(fā)工具的使用
在Chrome或Firefox瀏覽器的擴(kuò)展插件倉(cāng)庫(kù)里搜vue devtool明吩，安裝Vue.js devtools.
-
打開vue項(xiàng)目,在控制臺(tái)選擇vue
image -
可操作組件查看信息變化
image
使用debugger和sourcemap調(diào)試Vue組件
針對(duì)vue-cli webpack官方腳手架，打開build/webpack.dev.conf.js文件殷费，找到下面這句：
devtool: '#cheap-module-eval-source-map',
將其修改為：
devtool: '#eval-source-map ',
要修改的地方已經(jīng)都改好了印荔，就是這么簡(jiǎn)單，驚不驚喜详羡，意不意外仍律。
現(xiàn)在是具體調(diào)試了。假設(shè)我們想調(diào)試App.vue這個(gè)組件实柠，可以在想要調(diào)試的代碼前添加debugger方法水泉，如下圖所示：
然后運(yùn)行npm run dev，啟動(dòng)服務(wù)后刷新頁(yè)面（刷新前先把瀏覽器開發(fā)者工具打開），可以看到在程序進(jìn)入App.vue組件mounted這個(gè)組件生命周期鉤子里后草则，指定到debugger處時(shí)程序就被debug了钢拧。如下圖所示，剩下的大家應(yīng)該都很熟悉了炕横≡茨冢可以看到，此處顯示的代碼就是我們組件里的實(shí)際代碼份殿，并非被我們編譯混淆后的那種代碼膜钓，可讀性非常好。
vscode中調(diào)試Vue組件
先決條件
你必須安裝好 Chrome 和 VS Code伯铣。同時(shí)請(qǐng)確保自己在 VS Code 中安裝了 Debugger for Chrome 擴(kuò)展的最新版本呻此。
請(qǐng)通過 Vue CLI，遵循它的 README 中的安裝文檔安裝并創(chuàng)建一個(gè)項(xiàng)目腔寡。然后進(jìn)入這個(gè)新創(chuàng)建的應(yīng)用的目錄焚鲜，打開 VS Code。
從 VS Code 啟動(dòng)應(yīng)用
- 點(diǎn)擊在 Activity Bar 里的 Debugger 圖標(biāo)來(lái)到 Debug 視圖放前，然后點(diǎn)擊那個(gè)齒輪圖標(biāo)來(lái)配置一個(gè) launch.json 的文件忿磅，選擇 Chrome 環(huán)境。然后將生成的 launch.json 的內(nèi)容替換成為接下來(lái)的兩段配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
設(shè)置一個(gè)斷點(diǎn)
-
在 src/components/HelloWorld.vue 的 line90 的地方設(shè)置一個(gè)斷點(diǎn)凭语，這里的 data 函數(shù)返回一個(gè)字符串葱她。
image 在根目錄打開你慣用的終端并使用 Vue CLI 開啟這個(gè)應(yīng)用：
npm start
來(lái)到 Debug 視圖，選擇 ‘vuejs: chrome’ 配置似扔，然后按 F5 或點(diǎn)擊那個(gè)綠色的 play 按鈕吨些。
隨著一個(gè)新的 Chrome 實(shí)例打開 http://localhost:8080，你的斷點(diǎn)現(xiàn)在應(yīng)該被命中了炒辉。
