前端調(diào)試實(shí)踐

前言

在日常調(diào)試問題中，相信我們很多人都是用console去排查相關(guān)的問題，雖然問題也可以排查出來，但是有時它的效率并不高。這篇文章主要講解關(guān)于斷點(diǎn)和一些日常調(diào)試技巧的內(nèi)容，方便你在日后調(diào)試問題中，能在不同的前端場景應(yīng)用不同的調(diào)試方式，翻倍提高你解決問題的效率

?

1 sources面板概覽

source面板是我們斷點(diǎn)調(diào)試經(jīng)常用的到的地方，我們可以先大概認(rèn)識一下它長什么樣子，大概有什么功能

?

?左側(cè)區(qū)塊：包含了Page、Overrides、Snippets等5個功能塊，其中Page可以查看該網(wǎng)頁已加載的所有資源

?中間區(qū)塊：可查看、編輯資源文件，也可查看圖片類型的文件；同時可在其文件左側(cè)進(jìn)行斷點(diǎn)等相關(guān)操作

?右側(cè)區(qū)塊：斷點(diǎn)調(diào)試時的區(qū)域，可以開始、下一步等斷點(diǎn)操作，同時可以查看斷點(diǎn)調(diào)試時的變量值、調(diào)用棧等信息

?

當(dāng)展示開發(fā)者工具的區(qū)域過小時，它會自適應(yīng)調(diào)整布局

?

2 常用的斷點(diǎn)方式

我們平常最經(jīng)常用的可能就是代碼行斷點(diǎn)了，但是有時用它調(diào)試問題并不是效率最高的。chrome中還包含了其他的斷點(diǎn)方式，我們可以在不同的場景應(yīng)用不同的斷點(diǎn)進(jìn)行高效調(diào)試。

?

2.1 代碼行斷點(diǎn)

代碼行斷點(diǎn)，當(dāng)代碼運(yùn)行到當(dāng)前行之前，代碼會暫停執(zhí)行

?

2.2.1 點(diǎn)擊Sources面板中的源代碼的行號

當(dāng)行號列對應(yīng)行出現(xiàn)藍(lán)色圖標(biāo)，即為打斷點(diǎn)成功。在右側(cè)的Breakpoints中，會出現(xiàn)你有打斷點(diǎn)的信息，展示了對應(yīng)的行號，也可以讓你取消、勾選、編輯、刪除斷點(diǎn)

?

2.2.2 斷點(diǎn)操作按鈕含義

我們可以在右上角看到6個控制斷點(diǎn)的操作按鈕，分別對應(yīng)著不同的操作

?

恢復(fù)執(zhí)行

?

單步執(zhí)行

?

進(jìn)入函數(shù)調(diào)用

?

跳出函數(shù)調(diào)用

?

讓該斷點(diǎn)失效

?

2.2.3 行斷點(diǎn)實(shí)戰(zhàn)

在開發(fā)過程中，用例列表剛開始還可以加載出用例，怎么突然沒有數(shù)據(jù)返回了。查看接口發(fā)現(xiàn)moduleIds參數(shù)出現(xiàn)了問題

?

于是對相關(guān)代碼行設(shè)置了斷點(diǎn)，當(dāng)執(zhí)行到149行的時候moduleIds的值是 [4611,5417]

?

可當(dāng)執(zhí)行到152行的時候，moduleIds的值卻是 [undefined]

?

原來是這兩處邏輯沖突了，后面的邏輯覆蓋了前面的邏輯

?

問題很快排查出來。如果用console.log的話，可能要在代碼中寫好幾個console，保存后，刷新瀏覽器打印，排查完，可能還需要去刪除掉，所以遇到一些問題排查效率就提高了許多

?

2.2 Logpoint日志點(diǎn)

有時候，我們并不需要像代碼行斷點(diǎn)一樣，把我們的代碼暫停。我們只需要像console打印一下相關(guān)的信息，不要中斷我們的代碼執(zhí)行。這個時候我們logpoint就派上用場了，它的語法跟console.log一樣，我們可以快速得寫好我們的調(diào)試信息，而且不用像console.log一樣干擾我們的代碼，也不用過后還得惦記著去刪除它

?

比如下面的logpoint，其會顯示粉紅色的圖標(biāo)，代碼執(zhí)行到它的時候，它會在console面板中打印

?

注意，我們可以使用點(diǎn)擊esc快捷鍵，快速得調(diào)起我們的console面板查看信息

?

2.3 異常斷點(diǎn)

當(dāng)我們的代碼有錯誤，引發(fā)對應(yīng)的異常報(bào)錯時，我們有時會比較難快速定位到是在哪里出現(xiàn)了問題。我們可以利用異常斷點(diǎn)，在發(fā)生異常的時候立即進(jìn)行斷點(diǎn)，從而快速找到發(fā)生問題的代碼，并且可查看相關(guān)的變量、調(diào)用棧來幫助我們排查問題。

?

異常斷點(diǎn)分為兩種，可分別在在未捕獲和已捕獲的異常處進(jìn)行斷點(diǎn)

?

2.3.1 Pause on uncaught exceptions

比如下方代碼中，aa要訪問一個不存在的變量，這里是有問題的。這也是我們在代碼中經(jīng)常會遇到的問題

  const handleClick = () => {
    const aa = null;
    const bb = aa.size;
    setIsClicked(true);
  };

?

我們可以在Breakpoints中勾選Pause on uncaught exceptions，當(dāng)代碼執(zhí)行到這些有異常的代碼時，自然會暫停

?

?

2.3.2 Pause on caught exceptions

下方代碼已經(jīng)異常進(jìn)行了捕獲，這種情況可以勾選Pause on caught exceptions來對捕獲到異常代碼行暫停進(jìn)行處理

  const handleClick = () => {
    try {
      const aa = null;
      const bb = aa.size;
      setIsClicked(true);
    } catch (error) {
      console.error("1-zp-error:", error);
    }
    
  };

?

?

2.4 事件監(jiān)聽器斷點(diǎn)

當(dāng)用戶發(fā)生交互時出現(xiàn)問題，這時我們就可以添加事件監(jiān)聽器添加斷點(diǎn)來捕獲這些事件以檢查交互時的問題?？梢栽赟ource面板右側(cè)的Event Listener Breakpoints中勾選相應(yīng)的事件

?

2.5 DOM 更改斷點(diǎn)

使用頻率不高，研究如何操作dom的特定場景才有有用

?

3 調(diào)用棧

當(dāng)我們在查看、調(diào)試一段比較復(fù)雜的代碼時，我們有時很難快速得從代碼文件理清其調(diào)用關(guān)系。此時，我們可以利用調(diào)用棧來幫助我們快速理清邏輯，快速排查問題

?

3.1 棧

棧是一種數(shù)據(jù)結(jié)構(gòu)，其內(nèi)部的的元素滿足后進(jìn)先出的特點(diǎn)，我們可以對其進(jìn)行入棧、出棧的操作

?

3.2 調(diào)用棧的應(yīng)用

比如我在caseReviewListTable文件的第206行代碼中打了一個斷點(diǎn)，當(dāng)代碼執(zhí)行到這部分邏輯的時候，他就自然會暫停

?

我們此時可以看到右側(cè)的Call Stack中從上到下排列著函數(shù)調(diào)用棧信息，如下圖我們可以查看到，在執(zhí)行到該斷點(diǎn)的時候，我們已經(jīng)先在其他文件的handleRefreshCaseReviewList、handleSearchCase函數(shù)中執(zhí)行過相關(guān)代碼了。我們可以點(diǎn)擊函數(shù)名右側(cè)的文件地址，快速查看對應(yīng)的代碼，這樣子，我們對其調(diào)用邏輯清晰了許多，排查問題的效率自然會提高

?

3.3 anonymous 匿名的

我們在看上面的代碼中，發(fā)現(xiàn)有一個anonymous棧幀，他代表了是一個匿名函數(shù)，即沒有名稱的函數(shù)

?

比如下面代碼我們加個 setTimeout，也會在調(diào)用棧生成一個anonymous的棧幀

?

3.4 console.trace()

除了通過斷點(diǎn)來查看調(diào)用棧，有時我們也使用 console.trace() 來輸出當(dāng)前的函數(shù)調(diào)用關(guān)系，比如我們在下面代碼對應(yīng)的位置加上console.trace()，我們就可以看到其當(dāng)前位置的調(diào)用棧信息

?

4 Snippets

在瀏覽器中，如果你在調(diào)試中，有一些公共的邏輯需要經(jīng)常用到，你可以把其代碼片段保存在Snippets中。當(dāng)你在任何一個頁面需要運(yùn)行它的時候，可以直接運(yùn)行它

?

比如我們想要獲取當(dāng)前頁面的所有圖片鏈接，我們可以將這段代碼存儲起來

?

需要用的時候，我們直接快捷鍵Command+P，輸入!字符，搜索你要執(zhí)行的代碼片段名稱，選擇以后即可執(zhí)行

?

5 Overrides

5.1 替換響應(yīng)內(nèi)容

如果有些異常數(shù)據(jù)導(dǎo)致頁面發(fā)生問題，我們可以直接利用那份異常數(shù)據(jù)，在本地進(jìn)行調(diào)試。當(dāng)然，如果后端接口還沒好，我們知道結(jié)構(gòu)也可以mock數(shù)據(jù)

?

比如我們現(xiàn)在有一個/api/v2/review/list/getCaseReviewList接口

?

我們右鍵，選擇Override content替換接口內(nèi)容

?

選擇以后，會需要你選擇一個存儲這些替換文件的文件夾

?

授權(quán)

?

我們將我們的模擬數(shù)據(jù)填充在這里，即可在頁面中調(diào)試我們的UI和相關(guān)邏輯了

?

其中，被覆蓋的接口會顯示紫色的標(biāo)識

?

如果我們不需要了，根據(jù)情況禁止、刪除、清空都可以

?

5.2 替換響應(yīng)頭

如果有些場景，需要添加或者修改響應(yīng)頭，也可以進(jìn)行自定義修改

?

選擇Add header，然后自己添加修改對應(yīng)的響應(yīng)頭數(shù)據(jù)

?

6 其他調(diào)試技巧

6.1 復(fù)制、粘貼、拖拽元素

當(dāng)產(chǎn)品需要對已經(jīng)開發(fā)好的頁面進(jìn)行一些位置的移動調(diào)整的時候，我們可能對代碼有一個比較大的改動才可以給她看到效果，但是過后我們又得把代碼改回去。這時，我們可以利用chrome提供給我們的能力，復(fù)制元素、粘貼以及拖拽元素，來實(shí)現(xiàn)快速的頁面布局調(diào)整，給產(chǎn)品看到效果，又不需要改代碼

?

比如我們復(fù)制今日工作這個區(qū)塊，然后粘貼在你需要放置的位置容器下進(jìn)行粘貼

?

粘貼以后，我們長按元素，進(jìn)行拖拽調(diào)整位置即可

?

6.2 全局搜索

6.2.1 全局搜索文件/目錄

當(dāng)我們要快速調(diào)試一個文件的代碼的時候，直接按Command+P快捷鍵調(diào)起搜索浮層，輸入文件名或者文件路徑名，即可快速找到對應(yīng)的文件，選擇點(diǎn)擊以后會到達(dá)sources面板打開對應(yīng)的文件

?

6.2.2 全局搜索代碼

當(dāng)我們有對應(yīng)的代碼關(guān)鍵詞，想打開它對應(yīng)的文件。chrome提拱了一個全局搜索代碼的功能，我們可以打開對應(yīng)的search面板

?

比如我輸入“name: '計(jì)劃列表',”這個關(guān)鍵詞，它會在這個頁面已經(jīng)引入的資源搜索對應(yīng)的代碼關(guān)鍵詞，然后把匹配的文件展示在下方，我們就可以立即選擇然后打開對應(yīng)的代碼文件了

?

6.3 網(wǎng)站樣式風(fēng)格概覽 CSS Overview

當(dāng)我們看到一些優(yōu)秀的網(wǎng)站的時候，我們想快速查看借鑒該網(wǎng)站樣式信息的時候，我們可以借助CSS Overview這個功能快速得到相關(guān)信息，非常好用有趣

?

比如我們拿花瓣這個網(wǎng)站做例子，我們打開開發(fā)者工具，開啟CSS Overview面板

?

然后按“Capture overview”開始收集信息

收集好以后，我們便可以從顏色、字體等維度獲取到該網(wǎng)站的樣式信息

?

另外，當(dāng)我們點(diǎn)擊對應(yīng)的色塊的時候，它也會列出用到的地方，點(diǎn)擊對應(yīng)的元素也會快速定位過去

?

6.4 折疊屏手機(jī)適配

如果我們的開發(fā)場景中，需要適配折疊屏手機(jī)，比如像下面的三星Galaxy Z Fold5，那么我們的chrome也可以派上用場

三星Galaxy Z Fold5

?

我們需要進(jìn)入對應(yīng)的移動端調(diào)試模式，選擇對應(yīng)的移動端設(shè)備

?

選擇折疊場景，然后我們即可進(jìn)行調(diào)試了

?

調(diào)試Surface Duo設(shè)備

?

?

7 學(xué)習(xí)資源分享

前面講了這么多，其實(shí)只是拋磚引玉，還有很多東西是我們沒有講到的，我們可以通過下面的渠道進(jìn)一步的了解、應(yīng)用相關(guān)的知識和工具

?

7.1 Chrome DevTools?

包含了Chrome 開發(fā)者工具相關(guān)功能的詳細(xì)介紹還有相關(guān)的實(shí)踐應(yīng)用場景

?

7.2 Google Chrome Developers - YouTube?

Google Chrome Developers的YouTube頻道，視頻展示了相關(guān)的新功能以及最佳實(shí)踐

?

7.3 瀏覽器工作原理與實(shí)踐?

極客時間這門課從瀏覽器的渲染、javascript執(zhí)行機(jī)制、V8工作原理、安全等相關(guān)視角去講解瀏覽器的相關(guān)內(nèi)容，從而讓我們對前端的體系有一個更全的理解

?

8 總結(jié)

本文介紹了斷點(diǎn)調(diào)試、sources面板和日常使用到的一些調(diào)試技巧，幫助我們在后續(xù)的開發(fā)中，提供一些新角度、新方式來解決問題，翻倍提高我們的開發(fā)效率

?審核編輯 黃宇