前端調試各種收集-斷點篇

前端調試之斷點前言

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

斷點

• 調試的第一步就是打斷點。斷點的目的是，代碼運行時在你想要開始調試的地方停下來。這個時候就可以查看當前上下文資訊，比如全域變數、局部變數的值，函數的輸入是否正確，請求的傳回值是否正常等。通過此操作判斷問題發生的地方，好對症下藥
• 以Google瀏覽器（版本為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添加檔案夾到工作路徑，選擇之後會有提示，點擊接受。如果你的Google瀏覽器沒有這玩意，請升級版本，還是沒有的話，請忽略這段話。雖然不知道這是什麼時候出的功能，但是我偶然發現的，它可以編輯之後真的儲存到檔案，這個可以當編輯器用了。

斷點方式二

• 這種方式很粗暴，在需要調試的地方加debugger關鍵字，代碼運行到的時候會自動停下，進入偵錯模式
• 此方法不需要手動斷點，但是麻煩的是可能你調試一次就不用再調試了，但是每次運行到那裡都會停下，必須移除這個代碼才行
• 這玩意我在不少網站也見到有人用，不想讓人家方便的查看到網站源碼，一開啟控制台就自動debugger

斷點方式三

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

// Vue CLI 3.Xmodule.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斷點調試：在開啟的Google瀏覽器的開發工具源碼斷點調試一次（或者加關鍵字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提供，不會自動連接，有點麻煩，建議用下一種，方便。
  • 如果用Google瀏覽器的開發工具做調試器，可以嘗試外掛程式nim，啟動node或自動開啟標籤頁。或者Google瀏覽器內建的，在Connection處添加串連，檢測到訊號會自動連接，在Filesyatem添加需要調試的源碼即可。如果瀏覽器串連了node環境的網站，並且啟用了Inspector，那麼開發工具會有一個表徵圖可以快速開啟node調試器

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

• 一探前端開發中的JS調試技巧（推薦看一看，找了一圈才找到這個原創地址）
• 有哪些 JS 調試技巧？
• 使用Visual Studio Code的“Debugger for Chrome”擴充
• vuejs官方文檔：在 VS Code 和 Chrome 中調試
• Node.js的V8 Inspector整合
• Node.js調試指南
• 在VSCode中調試
• vuejs論壇相關討論
• 偵錯工具時，設定斷點的原理是什嗎？