我們經(jīng)常很不自然想利用console.log去調(diào)試網(wǎng)站的完疫，但是這樣效率很低断医，我們先要寫(xiě)console然后取訪問(wèn)之類(lèi)的滞乙，我們其實(shí)可以利用斷點(diǎn)調(diào)試的
1.準(zhǔn)備工作
請(qǐng)確保你安裝了 VS Code 以及適合的瀏覽器，并且安裝激活了最新版的相應(yīng)的 Debugger 擴(kuò)展：
請(qǐng)通過(guò) Vue CLI，遵循它的 Vue CLI 教程并創(chuàng)建一個(gè)項(xiàng)目弯汰。然后進(jìn)入這個(gè)新創(chuàng)建的應(yīng)用的目錄商架，打開(kāi) VS Code。
2.修改配置
打來(lái)vue-cli項(xiàng)目兔簇，修改配置
打開(kāi) config/index.js 并找到 devtool 屬性。將其更新為：
如果你使用的是 Vue CLI 2硬耍，請(qǐng)?jiān)O(shè)置并更新 config/index.js 內(nèi)的 devtool 屬性：
devtool: 'source-map',
如果你使用的是 Vue CLI 3垄琐，請(qǐng)?jiān)O(shè)置并更新 vue.config.js 內(nèi)的 devtool 屬性：
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
3.配置vscode調(diào)試
點(diǎn)擊在 Activity Bar 里的 Debugger 圖標(biāo)來(lái)到 Debug 視圖，然后點(diǎn)擊那個(gè)齒輪圖標(biāo)來(lái)配置一個(gè) launch.json 的文件经柴，選擇 Chrome/Firefox: Launch 環(huán)境狸窘。然后將生成的 launch.json 的內(nèi)容替換成為相應(yīng)的配置：
{
"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}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}
上面的URL，可以根據(jù)自己的項(xiàng)目端口進(jìn)行相應(yīng)修改
4.啟動(dòng)項(xiàng)目
-
在
src/components/HelloWorld.vue的line90的地方設(shè)置一個(gè)斷點(diǎn)坯认，這里的data函數(shù)返回一個(gè)字符串翻擒。斷點(diǎn)渲染器 在根目錄打開(kāi)你慣用的終端并使用 Vue CLI 開(kāi)啟這個(gè)應(yīng)用：
npm start
來(lái)到 Debug 視圖，選擇 ‘vuejs: chrome/firefox’ 配置牛哺，然后
按F5 或點(diǎn)擊那個(gè)綠色的 play 按鈕陋气。-
隨著一個(gè)新的瀏覽器實(shí)例打開(kāi)
http://localhost:8080，你的斷點(diǎn)現(xiàn)在應(yīng)該被命中了引润。命中斷點(diǎn)
