前端調試

前言

• 當我第一次知道這種東西，我也驚呆了，居然還有這種操作，實在強大到沒朋友，從此愛上調試，按時下班
• 無數次通過調試解決問題的經驗告訴我，調試絕對是開發者最應該掌握的重要技能之一。調試能幫助我們定位問題解決問題，每解決一個問題，經驗值就往上漲。後面就可以考經驗解決很多問題，並且能正確避開當年踩過的雷區，減少再犯次數，節省解決問題的時間，大大提高開發效率和編碼水平。我想這應該是掌握調試技能的一個很重要意義，而不僅僅是為了解決問題
• 你是否遇到過以下情況：
  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關鍵字，代碼運行到的時候會自動停下，進入調試模式
• 此方法不需要手動斷點，但是麻煩的是可能你調試一次就不用再調試了，但是每次運行到那裏都會停下，必須移除這個代碼才行
• 這玩意我在不少網站也見到有人用，不想讓人家方便的查看到網站源碼，一打開控制臺就自動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/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調試器

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

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

前端調試各種收集