前端調試之斷點

時間 2019-11-11

標籤前端調試斷點简体版

原文原文鏈接

前端調試之斷點

前言

當我第一次知道這種東西，我也驚呆了，竟然還有這種操做，實在強大到沒朋友，今後愛上調試，按時下班
無數次經過調試解決問題的經驗告訴我，調試絕對是開發者最應該掌握的重要技能之一。調試能幫助咱們定位問題解決問題，每解決一個問題，經驗值就往上漲。後面就能夠考經驗解決不少問題，而且能正確避開當年踩過的雷區，減小再犯次數，節省解決問題的時間，大大提升開發效率和編碼水平。我想這應該是掌握調試技能的一個很重要意義，而不只僅是爲了解決問題
你是否遇到過如下狀況：
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" } };

調試配置：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實例。javascript
這種方式是在啓動node的時候加上--inspect，開啓V8 Inspector功能，經過WebSockets通訊，調試器鏈接便可調試，更多調試器參考官方文檔。如下是幾個示例：html
- 調試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調試器