完美世界国际版下载,盗墓笔记小说全集,天域苍穹

前言

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

1 sources面板概覽

source面板是我們斷點調試經常用的到的地方，我們可以先大概認識一下它長什么樣子，大概有什么功能

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

?中間區塊：可查看、編輯資源文件，也可查看圖片類型的文件；同時可在其文件左側進行斷點等相關操作

?右側區塊：斷點調試時的區域，可以開始、下一步等斷點操作，同時可以查看斷點調試時的變量值、調用棧等信息

當展示開發者工具的區域過小時，它會自適應調整布局

2 常用的斷點方式

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

2.1 代碼行斷點

代碼行斷點，當代碼運行到當前行之前，代碼會暫停執行

2.2.1 點擊Sources面板中的源代碼的行號

當行號列對應行出現藍色圖標，即為打斷點成功。在右側的Breakpoints中，會出現你有打斷點的信息，展示了對應的行號，也可以讓你取消、勾選、編輯、刪除斷點

2.2.2 斷點操作按鈕含義

我們可以在右上角看到6個控制斷點的操作按鈕，分別對應著不同的操作

恢復執行

單步執行

進入函數調用

跳出函數調用

讓該斷點失效

2.2.3 行斷點實戰

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

于是對相關代碼行設置了斷點，當執行到149行的時候moduleIds的值是 [4611,5417]

可當執行到152行的時候，moduleIds的值卻是 [undefined]

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

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

2.2 Logpoint日志點

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

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

注意，我們可以使用點擊esc快捷鍵，快速得調起我們的console面板查看信息

2.3 異常斷點

當我們的代碼有錯誤，引發對應的異常報錯時，我們有時會比較難快速定位到是在哪里出現了問題。我們可以利用異常斷點，在發生異常的時候立即進行斷點，從而快速找到發生問題的代碼，并且可查看相關的變量、調用棧來幫助我們排查問題。

異常斷點分為兩種，可分別在在未捕獲和已捕獲的異常處進行斷點

2.3.1 Pause on uncaught exceptions

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

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

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

2.3.2 Pause on caught exceptions

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

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

2.4 事件監聽器斷點

當用戶發生交互時出現問題，這時我們就可以添加事件監聽器添加斷點來捕獲這些事件以檢查交互時的問題。可以在Source面板右側的Event Listener Breakpoints中勾選相應的事件

2.5 DOM 更改斷點

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

3 調用棧

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

3.1 棧

棧是一種數據結構，其內部的的元素滿足后進先出的特點，我們可以對其進行入棧、出棧的操作

3.2 調用棧的應用

比如我在caseReviewListTable文件的第206行代碼中打了一個斷點，當代碼執行到這部分邏輯的時候，他就自然會暫停

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