前言

不知道大家平時在前端開發(fā)中，是如何追蹤數(shù)據(jù)流向的。console.log()/console.count()/console.table()肯定大家或多或少的使用過。 還有那debugger也是必不可少的方式。

針對，一些簡單的數(shù)據(jù)查驗，上面所說的其實已經(jīng)夠用。但是，在面對頁面結(jié)構(gòu)繁雜，數(shù)據(jù)流向紊亂的應用時，上面的措施就有點捉襟見肘。

所以，今天我們來深入研究一下，如何優(yōu)雅的進行數(shù)據(jù)追蹤。也就是如何高效的在瀏覽器中進行斷點的跟蹤。

好了，天不早了，干點正事哇。

我們能所學到的知識點

1. 前置知識點
2. 代碼行斷點
3. DOM 變更斷點
4. XHR/fetch 斷點
5. 事件監(jiān)聽器斷點
6. 異常斷點
7. 奇技淫巧

1. 前置知識點

「前置知識點」，只是做一個概念的介紹，不會做深度解釋。因為，這些概念在下面文章中會有出現(xiàn)，為了讓行文更加的順暢，所以將本該在文內(nèi)的概念解釋放到前面來。「如果大家對這些概念熟悉，可以直接忽略」同時，由于閱讀我文章的群體有很多，所以有些知識點可能「我視之若珍寶，爾視只如草芥，棄之如敝履」。以下知識點，請「酌情使用」。

console

我們在了不起的Base64中介紹過RFC。

圖片

它可以算是網(wǎng)絡協(xié)議的「圣經(jīng)」。

而，針對前端的部分技術(shù)，其實我們可以在WHATWG[1]找對對應的標準描述。換句話說，我們可以里面找到最權(quán)威的解釋說明和使用方式。

WHATWG (Web Hypertext Application Technology Working Group) 是一個由一群來自不同公司的 web 開發(fā)者組成的組織，致力于推動 web 標準的發(fā)展。該組織成立于2004年。WHATWG 最知名的工作之一就是 HTML Living Standard（HTML5），該標準定義了現(xiàn)代 web 頁面的結(jié)構(gòu)和行為。除了HTML Living Standard，WHATWG 還參與了一些其他規(guī)范的制定，包括Web Workers、Web Storage、Fetch API 等。

下面是我們截取的部分技術(shù)的文檔。

圖片

在Console中，我們看到如下的結(jié)構(gòu)。

圖片

看到截圖中，有一個namespace console 。我們可以從截圖中得知。在內(nèi)置console中包含四部分

1. loging
2. counting
3. grouping
4. timing

在之前我們講瀏覽器內(nèi)核時提到過。在chrome/chromium的內(nèi)核中，其中有很多C/C++的代碼。我們可以在chromium 在線倉庫[2]進行查詢。

圖片

此圖中展示了在Chromium內(nèi)核中console實現(xiàn)

回到WHATWG中,我們就大家最熟悉的console.log來簡單聊聊，如何優(yōu)雅的進行日志的輸出。

我們平時做log的輸出是不是，用console.log(message)

console.log(`${變量名}_一堆硬編碼的字符信息`)

其實哇，在message中可以內(nèi)嵌下面的格式化說明符。用于占位并輸出指定的信息。

下面是各種說明符的使用案例。

// %s - 字符串格式化
console.log("輸出字符串: %s", "前端柒八九!");

// %d or %i - 整數(shù)格式化
console.log("輸出整數(shù)格式: %d", 42);
console.log("輸出整數(shù)格式: %i", 42);

// %f - 浮點數(shù)格式化
console.log("輸出浮點數(shù)格式: %f", 3.14159);

// %o - 以可折疊的優(yōu)化多行樣式顯示一個對象，適合復雜對象
const obj = { age: 18, b: 'string', c: { name: "前端柒八九" } };
console.log("輸出對象格式: %o", obj);

// %O - 以不可折疊的 JavaScript 對象格式化
console.log("用于簡單的對象表示: %O", obj);

// %c - 應用 CSS 樣式到輸出
console.log("%c對文本進行樣式化輸出.", "font-size:20px; color:blue;");

我們將其復制到Source-Snippet中進行驗證。

圖片

斷點類型

最常見的斷點類型是代碼行斷點(就是我們經(jīng)常用到的方式)。但是設置代碼行斷點可能效率較低，特別是如果我們不確定要查找的確切位置，或者如果我們正在處理大型代碼庫。

Monitor Events & monitor

monitorEvents 是一個在瀏覽器開發(fā)者工具中使用的 JavaScript 方法，用于「監(jiān)控指定元素上特定類型的事件」。這個方法通常用于調(diào)試和分析事件的觸發(fā)情況。

一旦使用 monitorEvents 監(jiān)控了某個元素上的事件，當該元素上觸發(fā)相應類型的事件時，瀏覽器會在控制臺中打印相應的事件信息，包括事件類型、事件目標等。

用法

// 監(jiān)控特定元素上的一個或多個事件類型
monitorEvents(element, eventTypes);

• element: 要監(jiān)控的 HTML 元素。
• eventTypes: 要監(jiān)控的事件類型，可以是單個事件類型的字符串，或者是事件類型組成的數(shù)組。

示例

// 監(jiān)控窗口內(nèi)的點擊事件
monitorEvents(window, 'click');

// 監(jiān)控文檔body上的鍵盤按鍵事件
monitorEvents(document.body, ['keyup', 'keydown']);

然后，我們還可以在控制臺的Element中直接選中元素，然后在Console中輸入對應的指令

圖片

在特定元素觸發(fā)對應的事件后，在控制臺就會打印除對應的Event的信息。

圖片

上面，我們涉及到一個$0變量。其實這是chrome-devtool的一種內(nèi)置變量。在Elements選中一個元素時，我們就可以在Console中查詢對應的元素引用。

我們還可以通過getEventListeners($0)來獲取該元素上綁定的事件信息。

然后，我們還可以通過$0.addEventListener來添加對應的事件。這樣我們就不用通過class/id來現(xiàn)獲取元素，然后再調(diào)用addEventListener了。

圖片

monitor函數(shù)調(diào)用

monitor方法允許你監(jiān)聽特定函數(shù)的調(diào)用

// 定義一個示例函數(shù)
function myFn() { }
// 進行監(jiān)控
monitor(myFn)

myFn()
// function myFn called

myFn(1)
// function myFn called with arguments: 1

有時候，我們想要代碼中對函數(shù)想進行監(jiān)控，我們還可以使用monitor。

下面代碼中，我們用Vite啟動一個React項目。

2. 代碼行斷點

當我們對即將要監(jiān)控的代碼胸有成竹時，也就是我們知道代碼的確切位置，那么我們就可以「代碼行斷點」，DevTools 總是在執(zhí)行此代碼行之前暫停。

設置 DevTools 中的代碼行斷點：

1. 點擊Sources選項卡
2. 打開想要設置斷點的文件

我們可以在Sources的左側(cè)文件目錄中進行搜索

如果想調(diào)試的文件層級過于深，我們可以使用? P的快捷鍵，通過文件名來搜索

3. 找到指定的代碼行
4. 在代碼行左側(cè)是行號列，點擊它，此時一個「藍色圖標」出現(xiàn)在行號列處。

5. 直接左鍵選中

6. 或者右鍵喚起彈窗中，選擇Add breakpoint

圖片

在代碼中設置代碼行斷點

我們還可以采用「硬編碼」的方式，通過debugger在代碼中打斷點。

console.log("front");
console.log("789");
debugger;
console.log("456");

這種方式，是我們平時經(jīng)常用到的，這里就不在展開說明了。

有條件的代碼行斷點

想必上面的打斷點的方式大家都比較熟悉，現(xiàn)在我們再說一個大家平時可能會遇到的問題。

這種方式，墻裂推薦。效果不好，你打我。

假設現(xiàn)在有個循環(huán)，但是我們很確定的是，在循環(huán)的前半部分數(shù)據(jù)是好的，而在后半部分數(shù)據(jù)有問題。在之前，我們可能會通過「代碼行斷點」，在指定地方進行斷點處理。如果是這種操作的話，那我們就需要對前面的數(shù)據(jù)也需要跟蹤。

如果，下次遇到這種操作，我們可以用「有條件的代碼行斷點」 - 這種斷點在我們想要跳過與我們的不關(guān)心的數(shù)據(jù)時非常有用。

1. 打開Sources選項卡
2. 打開想要設置斷點的文件
3. 找到代碼行
4. 在代碼行左側(cè)是行號列，右鍵點擊它。
5. 選擇Add conditional breakpoint。一個對話框顯示在代碼行的下方。
6. 在對話框中輸入我們的篩選條件。
7. 按 Enter 激活斷點。一個帶有問號的「橙色圖標」出現(xiàn)在行號列的頂部。

上面的代碼中表示，當i>3時候，才會觸發(fā)斷點，此時我們可以通過Watch來查詢我們想知道的的數(shù)據(jù)信息，并且還可以在Block和Local也會顯示當前斷點上下文中的數(shù)據(jù)信息。

例如，我們可以在觸發(fā)斷點后，使用console.table()來查驗localStorage的信息。

打印函數(shù)調(diào)用堆棧

如果函數(shù)的調(diào)用層級比較多，我們還可以把篩選條件置換成console.trace()在斷點觸發(fā)時，來查驗對應的函數(shù)調(diào)用層級。

圖片

參數(shù)定制化

同時，我們還可以在用一種近乎癲狂的方式，用我們自己的參數(shù)來為所欲為的讓代碼按照我們既定的路線進行運行。

圖片

我們通過對參數(shù)進行假定，然后在觸發(fā)對應的函數(shù)時，按照我們給定的參數(shù)來運行函數(shù)

圖片

在代碼層面id值為1，但是我們可以通過「有條件的代碼行斷點」，將其替換成我們想要探查的數(shù)值。并且還不影響函數(shù)的運行順序。

計算函數(shù)耗時

針對一個長list的循環(huán)，我們想通過一些方式來計算它的耗時，一般我們通過硬編碼的方式使用console.time()/console.timeEnd()在循環(huán)的前后進行處理。

其實，我們可以在起始點設置一個帶有條件console.time('label')的斷點，在結(jié)束點設置一個帶有條件console.timeEnd('label')的斷點。

圖片

根據(jù)參數(shù)個數(shù)暫停

只有當當前函數(shù)以 N 個參數(shù)調(diào)用時才暫停：arguments.callee.length === N

在函數(shù)「有可選參數(shù)」的情況下很有用。

根據(jù)函數(shù)參數(shù)個數(shù)不匹配暫停

只有當當前函數(shù)以錯誤的參數(shù)個數(shù)調(diào)用時才暫停：(arguments.callee.length) != arguments.length

圖片

程序化切換

使用全局布爾值對一個或多個條件斷點進行門控：

圖片

通過全局變量控制一組斷點

圖片

上面的案例中，我們使用了setTimeout來控制enableBreakpoints,其實我們還可以手動觸發(fā)window.enableBreakpoints = true;來控制是否對某些斷點進行開啟和關(guān)閉。

日志代碼行斷點

使用「日志代碼行斷點」（logpoints）可以在「不暫停執(zhí)行且不用在代碼中添加console.log()調(diào)用的情況下」，將消息輸出到控制臺。其實，這種情況和「有條件的代碼行斷點」中加入console.log()效果差不多。

設置日志點的步驟：

1. 打開Sources選項卡。
2. 打開想要設置斷點的文件。
3. 找到代碼行。
4. 在代碼行左側(cè)是行號列。右鍵點擊它。
5. 選擇Add logpoint。一個對話框顯示在代碼行的下方。
6. 在對話框中輸入我們的日志消息。我們可以使用與 console.log(message) 調(diào)用相同的語法。
7. 按 Enter 激活斷點。一個帶有「兩個點的粉色圖標」出現(xiàn)在行號列的頂部。

圖片

這個示例展示了在第 9 行設置的「日志代碼行斷點」，將變量i的值輸出到控制臺。

編輯代碼行斷點

使用Breakpoints面板可以禁用、編輯或刪除代碼行斷點。

編輯斷點組

Breakpoints面板「按文件對斷點進行分組，并按行和列號進行排序」。我們可以對組執(zhí)行以下操作：

• 通過點擊其名稱折疊或展開一個組。
• 通過點擊組或斷點旁邊的復選框單獨啟用或禁用組或斷點。
• 將鼠標懸停在其上，然后點擊關(guān)閉按鈕可以要刪除一個組。

當我們禁用斷點時，Sources 面板會使其在行號旁邊的標記「變?yōu)橥该鳌埂?/p>

組具有上下文菜單。在Breakpoints面板中，選中一個組然后右鍵，然后選擇：

1. 啟用文件中的所有斷點
2. 禁用文件中的所有斷點
3. 刪除文件中的所有斷點（本組內(nèi)）
4. 刪除其他斷點（在其他組中）
5. 刪除所有斷點（在所有文件中）

編輯斷點

要編輯斷點：

• 點擊斷點旁邊的復選框以啟用或禁用它。當我們禁用斷點時，Sources 面板會使其在行號旁邊的標記「變?yōu)橥该鳌埂?/li>
• 將鼠標懸停在斷點上，然后點擊編輯以編輯，點擊關(guān)閉以刪除它。
• 在編輯斷點時，可以在內(nèi)聯(lián)編輯器的下拉列表中更改其類型。

圖片

• 右鍵點擊斷點以查看其上下文菜單，并選擇以下選項之一：

圖片

1. 編輯條件或日志點。
2. 顯示位置。
3. 刪除斷點。
4. 刪除其他斷點（在其他文件中）。
5. 刪除所有斷點（在所有文件中）。

3. DOM 變更斷點

假設我們有如下的代碼

import { useRef } from "react";

/**
 * DebuggerDemo組件
 */
export default function DebuggerDemo() {
  const refSection = useRef<HTMLDivElement>(null);

  return (
    <div>
      <h1>DOM Debugger Demo</h1>
      <div ref={refSection}>
        <div>原有的內(nèi)容</div>
      </div>
      <button
        onClick={() => {
          if (refSection.current) {
            const newDiv = document.createElement("div");
            const newContent = document.createTextNode("前端柒八九");
            newDiv.appendChild(newContent);
            refSection.current.appendChild(newDiv);
          }
        }}
      >
        修改Section的子樹
      </button>
    </div>
  );
}

在button觸發(fā)時，會在div中插入一個新的div。

當我們想要在更改 DOM 節(jié)點或其子節(jié)點的代碼上暫停時，可以使用 「DOM 變更斷點」。

設置 DOM 變更斷點的步驟：

1. 點擊Elements選項卡。
2. 找到我們想要設置斷點的元素。
3. 右鍵點擊元素。
4. 懸停在Break on上，然后選擇Subtree modifications、Attribute modifications或Node removal。

圖片

我們可以在以下位置找到 DOM 變更斷點列表：

• Elements > DOM Breakpoints 面板。

圖片

• Sources > DOM Breakpoints 側(cè)面板。

圖片

DOM 變更斷點的類型

1. 「Subtree modifications（子樹修改）」：當當前選定節(jié)點的子節(jié)點被移除或添加，或子節(jié)點的內(nèi)容發(fā)生更改時觸發(fā)。不會在子節(jié)點屬性更改時觸發(fā)，也不會在對當前選定節(jié)點的任何更改上觸發(fā)。
2. 「Attributes modifications（屬性修改）」：當當前選定節(jié)點上添加或刪除屬性，或?qū)傩灾蹈臅r觸發(fā)。
3. 「Node Removal（節(jié)點移除）」：當當前選定節(jié)點被移除時觸發(fā)。

當我們觸發(fā)上面button時候，也就是觸發(fā)了，div的子樹修改的斷點，在動作觸發(fā)的同時，我們就會跳轉(zhuǎn)到指定的代碼中。

圖片

在此時，我們也可以通過Watch來查看指定數(shù)據(jù)的信息。和在Block和Local中查看上下文中的信息。

這里有一個點，額外提醒一下，上面的代碼是用Hook寫的，而我們之前寫過，Hook其實就是一個閉包，在上面截圖右側(cè)部分是不是有一個Scope。有興趣的同學，可以打開看看。這里就不展示說明了。

4. XHR/fetch 斷點

假設，我們有如下的頁面結(jié)構(gòu)

import { useEffect, useState } from "react";
/**
 * DebuggerDemo組件
 */
export default function DebuggerDemo() {
  const [posts, setPosts] = useState<Array<{ id: string; title: string }>>([]);

  const getPosts = async () => {
    try {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
        // {
        //   method: "POST",
        // }
      );
      const data = await response.json();
      if (!data) return;
      setPosts(data);
    } catch (err) {
      console.log(err);
    } finally {
      console.log("接口請求完成");
    }
  };

  useEffect(() => {}, []);

  return (
    <div>
      <h1>XHR Debugger Demo</h1>
      {posts.map((item) => (
        <div key={item?.id}>{item?.title}</div>
      ))}
      <button onClick={() => getPosts()}>接口查詢</button>
    </div>
  );
}

當我們想在 XMLHttpRequest（XHR）的「請求 URL 包含特定字符串時」暫停時，可以使用 「XHR/fetch 斷點」。DevTools 會在 XHR 調(diào)用 send() 的代碼行上暫停。

這種情況有助于快速找到導致頁面請求錯誤 URL 的 AJAX 或 Fetch 源代碼。

設置 XHR/fetch 斷點的步驟：

1. 點擊Sources選項卡。
2. 展開 XHR Breakpoints 面板。
3. 點擊Add（添加斷點）。
4. 輸入要在其上中斷的字符串。當這個字符串出現(xiàn)在任何 XHR 請求的 URL 中時，DevTools 會暫停。
5. 按 Enter 確認。

在點擊查詢后，我們就可以在指定的接口查詢中，進行斷點處理。

圖片

還有一點，我們需要額外的說明，我們用SPA搭建頁面，此時針對異步接口處理時，Axios是一個王者級別的解決方案。

如果大家看過Axios源碼的話，就會知道，它其實就是在XHR和Fetch上做了一層封裝。

所以，按道理，我們也可以通過XHR/fetch 斷點進行接口斷點。但是呢，由于Devtool有一個lognore List。

圖片

默認情況下，Know third-party scripts form source map這項是勾選的。如果我們想要在調(diào)試Axios中的接口，我們就需要把這項給取消掉。

在處理完后，別記得把這個關(guān)閉掉，要不然bundle中的debugger也會會觸發(fā)。

針對XHR我們還可以在Event Listener Breakpoints中進行對應事件的監(jiān)聽。(這個我們在下面「事件監(jiān)聽器斷點」中介紹)

圖片

使用「XHR/fetch 斷點」時，其實在工作中能幫助我們很大，比方說你接手了一個項目，然后發(fā)現(xiàn)在某個接口中出現(xiàn)了問題，按照我們以往的排查方式的話，是不是先在控制臺找到對應的url，然后在代碼中全局搜索這個url。通過對應的本地方法，再次向上搜索，如果嵌套層級過多，那找著找著，把原來向定位的問題都遺忘了呢。

而有了「XHR/fetch 斷點」,我們可以通過url中特定的參數(shù)進行斷點處理。并且這是一種「子上而下」的搜索方式。我們可以通過調(diào)用棧就能把調(diào)用路線很清晰的把握住。

5. 事件監(jiān)聽器斷點

當我們希望在事件被觸發(fā)后運行的事件監(jiān)聽器代碼上暫停時，請使用事件監(jiān)聽器斷點。我們可以選擇特定的事件，比如 click，或事件的類別，比如所有鼠標事件。

圖片

設置事件監(jiān)聽器斷點的步驟：

1. 點擊Sources選項卡。
2. 展開 Event Listener Breakpoints 面板。DevTools 顯示了一系列事件類別，比如 Animation。
3. 勾選其中一個類別，以便在該類別的任何事件觸發(fā)時暫停，或展開該類別并選擇特定的事件。
4. 創(chuàng)建事件監(jiān)聽器斷點。

假設我們存在如下的頁面

import { useEffect, useState } from "react";
/**
 * DebuggerDemo組件
 */
export default function DebuggerDemo() {
  const [posts, setPosts] = useState<Array<{ id: string; title: string }>>([]);

  useEffect(() => {
    const fetchData = () => {
      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          setPosts(data);
        }
      };

      xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
      xhr.send();
    };

    fetchData();
  }, []);

  const handleClick = (e: HTMLButtonElement) => {
    console.log(e);
  };

  return (
    <div>
      <h1>Event Debugger Demo</h1>
      <button
        onClick={() => handleClick(event as unknown as HTMLButtonElement)}
      >
        按鈕點擊
      </button>
      {posts.map((item) => (
        <div key={item?.id}>{item?.title}</div>
      ))}
    </div>
  );
}

然后，我們在選中我們想要監(jiān)聽的事件。

圖片

XHR 的事件監(jiān)聽

圖片

Mouse 事件監(jiān)聽

圖片

當然，如果我們想看React內(nèi)部的處理邏輯，我們可以在lgnore list中將Know third-party scripts form source map打開，這樣的話我們在斷點觸發(fā)后，也能查看框架內(nèi)部的處理邏輯。

圖片

6. 異常斷點

當我們想在錯誤時進行斷點跟蹤時，可以使用「異常斷點」。

在Sources選項卡的Breakpoints面板中，啟用以下選項中的一個或兩個，然后執(zhí)行代碼：

圖片

1. 勾選Pause on uncaught exceptions

圖片

在這個例子中，我們在代碼的第九行特意寫了一個front789的未定義的變量，并且沒執(zhí)行捕獲操作。

2. 勾選Pause on caught exceptions

圖片

• 在這個例子中，執(zhí)行在已捕獲的異常上暫停。

墻裂建議，在我們開發(fā)階段，將Pause on uncaught exceptions打開，這樣可以讓瀏覽器來幫我們找到我們代碼不正確的地方。

7. 奇技淫巧

使用 copy()

大家有沒有遇到過，在進行l(wèi)og時候，想復制某些數(shù)據(jù)，但是只能在log輸出到控制臺后，才能復制。并且這些數(shù)據(jù)只是單純的展示，想選中也不好處理。

例如：

圖片

其實，我們可以使用copy()API 將瀏覽器中的特定信息「直接復制到剪貼板，而不會有任何字符串截斷」。

• 當前 DOM 的快照：copy(document.documentElement.outerHTML)
• 關(guān)于資源的元數(shù)據(jù)（例如圖片）：copy(performance.getEntriesByType("resource"))
• 一個大的 JSON blob，格式化：copy(JSON.parse(blob))
• localStorage 的轉(zhuǎn)儲：copy(localStorage)
• ....

檢查一個難以捕捉的元素

我們想檢查一個只有在條件滿足時才出現(xiàn)的 DOM 元素。

圖片

當我們在first input懸浮時候，想查看second input時候，鼠標移出first input后，后者立馬就消失不見了。

我們可以利用如下代碼：

setTimeout(function () {
  debugger;
}, 5000);

這使我們有 5 秒的時間觸發(fā) UI，然后一旦 5 秒計時器結(jié)束，JS 執(zhí)行將暫停，沒有任何東西會讓你的元素消失。我們可以自由移動鼠標到開發(fā)工具而不失去元素：

圖片

當 JS 執(zhí)行暫停時，我們就可以檢查元素、編輯其 CSS、在 JS 控制臺中執(zhí)行命令等。

在檢查依賴于特定光標位置、焦點等 DOM 時很有用。

監(jiān)視焦點元素

(function () {
  let last = document.activeElement;
  setInterval(() => {
    if (document.activeElement !== last) {
      last = document.activeElement;
      console.log("Focus changed to: ", last);
    }
  }, 100);
})();

圖片

Reference

[1]WHATWG:https://spec.whatwg.org/

[2]chromium 在線倉庫:https://source.chromium.org/chromium/chromium/src;l=21