前端除錯各種收集

摘要： 前端除錯 前言 當我第一次知道這種東西，我也驚呆了，居然還有這種操作，實在強大到沒朋友，從此愛上除錯，按時下班 無數次通過除錯解決問題的經驗告訴我，除錯絕對是開發者最應該掌握的重要技能之一。除錯能幫助我們定位問題解決問題，每解決一個問題，經驗值就往上漲。後面就可以考經驗解...

前端除錯

前言

• 當我第一次知道這種東西，我也驚呆了，居然還有這種操作，實在強大到沒朋友，從此愛上除錯，按時下班
• 無數次通過除錯解決問題的經驗告訴我，除錯絕對是開發者最應該掌握的重要技能之一。除錯能幫助我們定位問題解決問題，每解決一個問題，經驗值就往上漲。後面就可以考經驗解決很多問題，並且能正確避開當年踩過的雷區，減少再犯次數，節省解決問題的時間，大大提高開發效率和編碼水平。我想這應該是掌握除錯技能的一個很重要意義，而不僅僅是為了解決問題
• 你是否遇到過以下情況：
  1. 按鈕的點選事件不起作用，點選按鈕沒反應。下載人家的demo執行，點選登入之後不出錯頁面也不跳轉
  2. 請求資料後填充到頁面，但是頁面卻不顯示資料
  3. 某個請求總是被取消
  4. 明明按照人家教程來寫，程式碼一模一樣，卻得不到和教程一樣的效果
  5. 無意中寫錯字母，大小寫部分，執行出錯，但是看程式碼怎麼都看不出問題
  6. 按照文件的寫法，控制檯老是報錯，且錯誤發生在使用的元件裡面，不是自己寫的程式碼
  7. 等等，還有很多型別的問題
• 以上問題基本都可以通過除錯解決，只需要掌握相關的除錯技巧就可以

斷點

• 除錯的第一步就是打斷點。斷點的目的是，程式碼執行時在你想要開始除錯的地方停下來。這個時候就可以檢視當前上下文資訊，比如全域性變數、區域性變數的值，函式的輸入是否正確，請求的返回值是否正常等。通過此操作判斷問題發生的地方，好對症下藥
• 以 谷歌瀏覽器 （版本為69）為例，編輯器為 VSCode （版本1.26.1）

斷點方式一

• 這種方式是比較常用的方式，在瀏覽器開發工具找到對應原始碼，在script指令碼節點裡面的程式碼行斷點

• 首先在瀏覽器頁面按F12開啟開發工具，點選 Sources 選項，預設顯示的是 Page 標籤。然後找到需要除錯的原始碼檔案
• 如果是正常html頁面，那麼原始碼一般是在對應域名下面。如果是 webpack 處理的頁面，並且開啟了原始碼對映，原始碼就是在 webpack:// 下面。可通過快捷鍵 ctrl+ o 開啟搜尋框輸入檔名搜尋原始碼
• 只要找到原始碼，在指令碼程式碼顯示區域左邊的數字上新增斷點即可，之後只要程式碼執行到斷點處，開發工具就會進入除錯狀態
• 注意 ：有的數字行是灰色的，就是不可斷點。有時候點選15行斷點選中14行，這是因為瀏覽器真正執行的程式碼行不是你看到的那一行，可能是優化掉了或者經過某種轉換。還有的情況是，新增某一行斷點，會跳轉到另一個頁面並命中某一行,這個頁面的背景色是黃色且檔名是 VM 開頭。上述情況，大部分都是因為瀏覽器顯示的原始碼版本，跟真正的原始碼檔案不一致，只需要重新整理一下頁面，保證顯示的原始碼是最新的即可

• 技巧1 ：有時候原始碼歷經千辛萬苦都找不到在哪，這時候就需要祭出 console.log 了。在需要除錯的那一行程式碼前加上 console.log(666) ,然後執行一次，到控制檯檢視結果輸出，點選右邊的連結會自動跳轉到原始碼，這樣就可以直接斷點了

• 技巧2 ：如下圖，在 Filesystem 新增資料夾到工作路徑，選擇之後會有提示，點選接受。如果你的谷歌瀏覽器沒有這玩意，請升級版本，還是沒有的話，請忽略這段話。雖然不知道這是什麼時候出的功能，但是我偶然發現的，它可以編輯之後真的儲存到檔案，這個可以當編輯器用了。

斷點方式二

debugger

斷點方式三

• 這種方式簡單歸為在編輯器中斷點除錯，是需要連線偵錯程式（可以是遠端偵錯程式）或者附加程序，然後接收除錯資訊，就可以在編輯器原始碼進行斷點除錯
• 在Chrome和VS Code中除錯Vue.js ： 此方法出處 。這種方式使用 VSCode 的“Debugger for Chrome”擴充套件， 推薦 。感覺就是上面的第一種方式，只不過將原始碼對映到本地原始碼，並在編輯器上顯示。簡單介紹下步驟：
  1. webpack配置： webpack 配置新增 devtool：'source-map' 開啟原始碼對映。

// Vue CLI 3.X
module.exports = {
configureWebpack: {
devtool: "source-map"
}
};

1. 除錯配置：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}/*"
}
}
]
}

1. 除錯：在vue檔案元件你想除錯的行的斷點，通過命令 npm start 、 npm dev 或者 npm serve 其中一個命令（具體是哪一個可以檢視 package.json 的 scripts 節點）執行專案
2. 按 F5 啟動除錯，一切正常的話將會命中你的斷點
3. 注意 ：如果沒有命中斷點並且你的斷點不是紅點，需要一個騷操作才能在 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/vue-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/bin/vue-cli-service.js",//"./client-app/src/aspnet-dev.js",
  "serve"
  ],
  "autoAttachChildProcesses": true,
  "port": 9229
  }
  ]
  }

  

  • 除錯aspnetcore的NodeServices其中一種 JavaScriptServices/issues/1524#issuecomment-418785756" rel="nofollow,noindex" target="_blank">開啟方式 ，這個可以在 VSCode 進行除錯，偵錯程式由 VSCode 提供，不會自動連線，有點麻煩，建議用下一種，方便。
  • 如果用谷歌瀏覽器的開發工具做偵錯程式，可以嘗試外掛nim，啟動node或自動開啟標籤頁。或者谷歌瀏覽器自帶的，在 Connection 處新增連線，檢測到訊號會自動連線，在Filesyatem新增需要除錯的原始碼即可。如果瀏覽器連線了node環境的站點，並且啟用了Inspector，那麼開發工具會有一個圖示可以快速開啟node偵錯程式

其他參考（按推薦指數排列）

• 一探前端開發中的JS除錯技巧 （推薦看一看，找了一圈才找到這個原創地址）
• 有哪些 JS 除錯技巧？
• JavaScriptServices/tree/master/src/Microsoft.AspNetCore.SpaServices#using-visual-studio-codes-debugger-for-chrome-extension" rel="nofollow,noindex" target="_blank">使用Visual Studio Code的“Debugger for Chrome”擴充套件
• vuejs官方文件：在 VS Code 和 Chrome 中除錯
• Node.js的V8 Inspector整合
• Node.js除錯指南
• 在VSCode中除錯
• vuejs論壇相關討論
• 除錯程式時，設定斷點的原理是什麼？