當我第一次知道這種東西，我也驚呆了，居然還有這種操作，實在強大到沒朋友，從此愛上調試，按時下班。
無數次通過調試解決問題的經驗告訴我，調試絕對是開發者最應該掌握的重要技能之一。調試能幫助我們定位問題解決問題，每解決一個問題，經驗值就往上漲。
後面就可以考經驗解決很多問題，並且能正確避開當年踩過的雷區，減少再犯次數，節省解決問題的時間，大大提高開發效率和編碼水平。我想這應該是掌握調試技能的一個很重要意義，而不僅僅是為了解決問題。
你是否遇到過以下情況：
按鈕的點擊事件不起作用，點擊按鈕沒反應。下載人家的demo運行，點擊登錄之後不出錯頁面也不跳轉；
請求數據後填充到頁面，但是頁面卻不顯示數據；
某個請求總是被取消；
明明按照人家教程來寫，代碼一模一樣，卻得不到和教程一樣的效果；
無意中寫錯字母，大小寫部分，運行出錯，但是看代碼怎麼都看不出問題；
按照文檔的寫法，控制臺老是報錯，且錯誤發生在使用的組件裡面，不是自己寫的代碼；
等等，還有很多類型的問題。
以上問題基本都可以通過調試解決，只需要掌握相關的調試技巧就可以。
調試的第一步就是打斷點。斷點的目的是，代碼運行時在你想要開始調試的地方停下來。這個時候就可以查看當前上下文信息，比如全局變量、局部變量的值，函數的輸入是否正確，請求的返回值是否正常等。通過此操作判斷問題發生的地方，好對症下藥。
以谷歌瀏覽器（版本為69）為例，編輯器為VSCode（版本1.26.1）
只要找到源碼，在腳本代碼顯示區域左邊的數字上添加斷點即可，之後只要代碼運行到斷點處，開發工具就會進入調試狀態。
注意：有的數字行是灰色的，就是不可斷點。有時候點擊15行斷點選中14行，這是因為瀏覽器真正執行的代碼行不是你看到的那一行，可能是優化掉了或者經過某種轉換。
還有的情況是，添加某一行斷點，會跳轉到另一個頁面並命中某一行,這個頁面的背景色是黃色且文件名是VM開頭。上述情況，大部分都是因為瀏覽器顯示的源碼版本，跟真正的源碼文件不一致，只需要刷新一下頁面，保證顯示的源碼是最新的即可。
技巧1：有時候源碼歷經千辛萬苦都找不到在哪，這時候就需要祭出console.log了。在需要調試的那一行代碼前加上console.log(666),然後運行一次，到控制臺查看結果輸出，點擊右邊的連結會自動跳轉到源碼，這樣就可以直接斷點了。
技巧2：如下圖，在Filesystem添加文件夾到工作路徑，選擇之後會有提示，點擊接受。如果你的谷歌瀏覽器沒有這玩意，請升級版本，還是沒有的話，請忽略這段話。雖然不知道這是什麼時候出的功能，但是我偶然發現的，它可以編輯之後真的保存到文件，這個可以當編輯器用了。
這種方式很粗暴，在需要調試的地方加debugger關鍵字，代碼運行到的時候會自動停下，進入調試模式。
此方法不需要手動斷點，但是麻煩的是可能你調試一次就不用再調試了，但是每次運行到那裡都會停下，必須移除這個代碼才行。
這玩意我在不少網站也見到有人用，不想讓人家方便的查看到網站源碼，一打開控制臺就自動debugger。
這種方式簡單歸為在編輯器中斷點調試，是需要連接調試器（可以是遠程調試器）或者附加進程，然後接收調試信息，就可以在編輯器源碼進行斷點調試。
在Chrome和VS Code中調試Vue.js：此方法出處。這種方式使用VSCode的「Debugger for Chrome」擴展，推薦。感覺就是上面的第一種方式，只不過將源碼映射到本地源碼，並在編輯器上顯示。簡單介紹下步驟：
1、webpack配置：webpack配置添加devtool：'source-map'開啟源碼映射。
module.exports = {
configureWebpack: {
devtool: "source-map"
}
};
2、調試配置：VSCode中按F5，將出現選擇環境的輸入框（如果已有launch.json不會出現），選擇Chrome。在launch.json中的配置如下。其中url是打開瀏覽器之後訪問的地址，webRoot是app.js、main.js等入口文件所在目錄，後面兩個是實驗性功能（高級功能，滑鼠懸停在上面會有說明）
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "啟動 Chrome 並打開 localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
調試：在vue文件組件你想調試的行的斷點，通過命令npm start、npm dev或者npm serve其中一個命令（具體是哪一個可以查看package.json的scripts節點）運行項目。
按F5啟動調試，一切正常的話將會命中你的斷點。
注意：如果沒有命中斷點並且你的斷點不是紅點，需要一個騷操作才能在VSCode斷點調試：在打開的谷歌瀏覽器的開發工具源碼斷點調試一次（或者加關鍵字debugger觸發調試,參考上面方式一），運行到斷點處VSCode會自跳出一個緩存的源碼頁來進行調試。
另外，基於以上情況，如果在VSCode調試的顯示的源碼跟真的源碼不同，那麼就是源碼映射不正確，上面的配置webRoot不正確。即使不正確，通過這個騷操作一樣可以在VSCode調試，就是不太優雅，效果如下：
遠程調試Chrome
這種方式歸為調試nodejs,可以調試webpack配置，或者後端運行的node實例。
這種方式是在啟動node的時候加上--inspect，開啟V8 Inspector功能，通過WebSockets通信，調試器連接即可調試，更多調試器參考官方文檔。以下是幾個示例：
調試vue.config.js，可以在調試查看配置，這樣即使看不懂文檔也可以按照自己的想法來寫配置，甚至根本不用在看文檔。使用方式是在VSCode配置如下，兩種配置等效。調試webpack.config.js同理，將啟動文件替換即可，可查看package.json的scripts節點對應命令確定啟動文件。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"args": [
"serve"
],
"program": "${workspaceFolder} /node_modules/@vue/cli-service/bin/v ue-cli-service. js"//client-app/src/aspnet-dev.js"
},
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "node",
"runtimeArgs": [
"--inspect-brk=9229",
". /node_modules/@vue/cli-service/b in/vue-cli-service.js", //"./client-app/src/aspnet-dev. js",
"serve"
],
"autoAttachChildProcesses": true,
"port": 9229
}
]
}
調試aspnetcore的NodeServices其中一種打開方式，這個可以在VSCode進行調試，調試器由VSCode提供，不會自動連接，有點麻煩，建議用下一種，方便。
如果用谷歌瀏覽器的開發工具做調試器，可以嘗試插件nim，啟動node或自動打開標籤頁。或者谷歌瀏覽器自帶的，在Connection處添加連接，檢測到信號會自動連接，在Filesyatem添加需要調試的源碼即可。如果瀏覽器連接了node環境的站點，並且啟用了Inspector，那麼開發工具會有一個圖標可以快速打開node調試器。
作者：笑笑🤞xxred
https://www.cnblogs.com/xxred/p/9616626.html
長按左側二維碼關注
微信ID：xhmsvip
小黑QQ：3251175005
QQ群：809453822
小黑微博：小黑黑的格子屋