天天做天天摸夜夜喊无码,特级婬片欧美高清视频蜜桃

前言

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

1 sources面板概覽

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

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

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

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

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

2 常用的斷點方式

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

2.1 代碼行斷點

代碼行斷點，當代碼運行到當前行之前，代碼會暫停執(zhí)行

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

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

2.2.2 斷點操作按鈕含義

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

恢復執(zhí)行

單步執(zhí)行

進入函數調用

跳出函數調用

讓該斷點失效

2.2.3 行斷點實戰(zhàn)

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

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

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

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

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

2.2 Logpoint日志點

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

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

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

2.3 異常斷點

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

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

2.3.1 Pause on uncaught exceptions

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

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

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

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 事件監(jiān)聽器斷點

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

2.5 DOM 更改斷點

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

3 調用棧

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

3.1 棧

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

3.2 調用棧的應用

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

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