日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

你會在瀏覽器中打斷點嗎?我會!

來源: 責編: 時間:2023-12-01 17:12:03 230觀看
導讀前言不知道大家平時在前端開發中,是如何追蹤數據流向的。console.log()/console.count()/console.table()肯定大家或多或少的使用過。 還有那debugger也是必不可少的方式。針對,一些簡單的數據查驗,上面所說的其實已經夠

前言

不知道大家平時在前端開發中,是如何追蹤數據流向的。console.log()/console.count()/console.table()肯定大家或多或少的使用過。 還有那debugger也是必不可少的方式。QlU28資訊網——每日最新資訊28at.com

針對,一些簡單的數據查驗,上面所說的其實已經夠用。但是,在面對頁面結構繁雜,數據流向紊亂的應用時,上面的措施就有點捉襟見肘。QlU28資訊網——每日最新資訊28at.com

所以,今天我們來深入研究一下,如何優雅的進行數據追蹤。也就是如何高效的在瀏覽器中進行斷點的跟蹤。QlU28資訊網——每日最新資訊28at.com

好了,天不早了,干點正事哇。QlU28資訊網——每日最新資訊28at.com

我們能所學到的知識點

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

1. 前置知識點

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

console

我們在了不起的Base64中介紹過RFC。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

它可以算是網絡協議的「圣經」。QlU28資訊網——每日最新資訊28at.com

而,針對前端的部分技術,其實我們可以在WHATWG[1]找對對應的標準描述。換句話說,我們可以里面找到最權威的解釋說明和使用方式。QlU28資訊網——每日最新資訊28at.com

WHATWG (Web Hypertext Application Technology Working Group) 是一個由一群來自不同公司的 web 開發者組成的組織,致力于推動 web 標準的發展。該組織成立于2004年。WHATWG 最知名的工作之一就是 HTML Living Standard(HTML5),該標準定義了現代 web 頁面的結構和行為。除了HTML Living Standard,WHATWG 還參與了一些其他規范的制定,包括Web Workers、Web Storage、Fetch API 等。QlU28資訊網——每日最新資訊28at.com

下面是我們截取的部分技術的文檔。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

在Console中,我們看到如下的結構。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

看到截圖中,有一個namespace console 。我們可以從截圖中得知。在內置console中包含四部分QlU28資訊網——每日最新資訊28at.com

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

在之前我們講瀏覽器內核時提到過。在chrome/chromium的內核中,其中有很多C/C++的代碼。我們可以在chromium 在線倉庫[2]進行查詢。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

此圖中展示了在Chromium內核中console實現QlU28資訊網——每日最新資訊28at.com

回到WHATWG中,我們就大家最熟悉的console.log來簡單聊聊,如何優雅的進行日志的輸出。QlU28資訊網——每日最新資訊28at.com

我們平時做log的輸出是不是,用console.log(message)QlU28資訊網——每日最新資訊28at.com

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

其實哇,在message中可以內嵌下面的格式化說明符。用于占位并輸出指定的信息。QlU28資訊網——每日最新資訊28at.com

下面是各種說明符的使用案例。QlU28資訊網——每日最新資訊28at.com

// %s - 字符串格式化console.log("輸出字符串: %s", "前端柒八九!");// %d or %i - 整數格式化console.log("輸出整數格式: %d", 42);console.log("輸出整數格式: %i", 42);// %f - 浮點數格式化console.log("輸出浮點數格式: %f", 3.14159);// %o - 以可折疊的優化多行樣式顯示一個對象,適合復雜對象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中進行驗證。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

斷點類型

最常見的斷點類型是代碼行斷點(就是我們經常用到的方式)。但是設置代碼行斷點可能效率較低,特別是如果我們不確定要查找的確切位置,或者如果我們正在處理大型代碼庫。QlU28資訊網——每日最新資訊28at.com

斷點類型
QlU28資訊網——每日最新資訊28at.com

用途
QlU28資訊網——每日最新資訊28at.com

代碼行
QlU28資訊網——每日最新資訊28at.com

在代碼指定區域觸發斷點。
QlU28資訊網——每日最新資訊28at.com

有條件的代碼行
QlU28資訊網——每日最新資訊28at.com

只在滿足限定條件時,在指定地方觸發斷點QlU28資訊網——每日最新資訊28at.com

記錄點
QlU28資訊網——每日最新資訊28at.com

在不暫停代碼運行的情況下向控制臺輸出日志
QlU28資訊網——每日最新資訊28at.com

DOM
QlU28資訊網——每日最新資訊28at.com

在更改或刪除特定 DOM 節點或其子節點時觸發斷點
QlU28資訊網——每日最新資訊28at.com

XHR
QlU28資訊網——每日最新資訊28at.com

當 XHR URL 包含某個字符串模式時觸發斷點
QlU28資訊網——每日最新資訊28at.com

事件監聽器
QlU28資訊網——每日最新資訊28at.com

在指定事件觸發后觸發斷點
QlU28資訊網——每日最新資訊28at.com

異常
QlU28資訊網——每日最新資訊28at.com

在拋出已捕獲或未捕獲異常的代碼時觸發斷點
QlU28資訊網——每日最新資訊28at.com

函數
QlU28資訊網——每日最新資訊28at.com

每當調用特定函數時觸發斷點
QlU28資訊網——每日最新資訊28at.com

Monitor Events & monitor

monitorEvents 是一個在瀏覽器開發者工具中使用的 JavaScript 方法,用于「監控指定元素上特定類型的事件」。這個方法通常用于調試和分析事件的觸發情況。QlU28資訊網——每日最新資訊28at.com

一旦使用 monitorEvents 監控了某個元素上的事件,當該元素上觸發相應類型的事件時,瀏覽器會在控制臺中打印相應的事件信息,包括事件類型、事件目標等。QlU28資訊網——每日最新資訊28at.com

用法

// 監控特定元素上的一個或多個事件類型monitorEvents(element, eventTypes);
  • element: 要監控的 HTML 元素。
  • eventTypes: 要監控的事件類型,可以是單個事件類型的字符串,或者是事件類型組成的數組。

示例

// 監控窗口內的點擊事件monitorEvents(window, 'click');// 監控文檔body上的鍵盤按鍵事件monitorEvents(document.body, ['keyup', 'keydown']);

然后,我們還可以在控制臺的Element中直接選中元素,然后在Console中輸入對應的指令QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

在特定元素觸發對應的事件后,在控制臺就會打印除對應的Event的信息。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

上面,我們涉及到一個$0變量。其實這是chrome-devtool的一種內置變量。在Elements選中一個元素時,我們就可以在Console中查詢對應的元素引用。QlU28資訊網——每日最新資訊28at.com

我們還可以通過getEventListeners($0)來獲取該元素上綁定的事件信息。QlU28資訊網——每日最新資訊28at.com

然后,我們還可以通過$0.addEventListener來添加對應的事件。這樣我們就不用通過class/id來現獲取元素,然后再調用addEventListener了。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

monitor函數調用

monitor方法允許你監聽特定函數的調用QlU28資訊網——每日最新資訊28at.com

// 定義一個示例函數function myFn() { }// 進行監控monitor(myFn)myFn()// function myFn calledmyFn(1)// function myFn called with arguments: 1

有時候,我們想要代碼中對函數想進行監控,我們還可以使用monitor。QlU28資訊網——每日最新資訊28at.com

下面代碼中,我們用Vite啟動一個React項目。QlU28資訊網——每日最新資訊28at.com

2. 代碼行斷點

當我們對即將要監控的代碼胸有成竹時,也就是我們知道代碼的確切位置,那么我們就可以「代碼行斷點」,DevTools 總是在執行此代碼行之前暫停。QlU28資訊網——每日最新資訊28at.com

設置 DevTools 中的代碼行斷點:QlU28資訊網——每日最新資訊28at.com

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

我們可以在Sources的左側文件目錄中進行搜索QlU28資訊網——每日最新資訊28at.com

如果想調試的文件層級過于深,我們可以使用? P的快捷鍵,通過文件名來搜索QlU28資訊網——每日最新資訊28at.com

  1. 找到指定的代碼行
  2. 在代碼行左側是行號列,點擊它,此時一個「藍色圖標」出現在行號列處。
  3. 直接左鍵選中QlU28資訊網——每日最新資訊28at.com

  4. 或者右鍵喚起彈窗中,選擇Add breakpointQlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com


在代碼中設置代碼行斷點

我們還可以采用「硬編碼」的方式,通過debugger在代碼中打斷點。QlU28資訊網——每日最新資訊28at.com

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

這種方式,是我們平時經常用到的,這里就不在展開說明了。QlU28資訊網——每日最新資訊28at.com

有條件的代碼行斷點

想必上面的打斷點的方式大家都比較熟悉,現在我們再說一個大家平時可能會遇到的問題。QlU28資訊網——每日最新資訊28at.com

這種方式,墻裂推薦。效果不好,你打我。QlU28資訊網——每日最新資訊28at.com

假設現在有個循環,但是我們很確定的是,在循環的前半部分數據是好的,而在后半部分數據有問題。在之前,我們可能會通過「代碼行斷點」,在指定地方進行斷點處理。如果是這種操作的話,那我們就需要對前面的數據也需要跟蹤。QlU28資訊網——每日最新資訊28at.com

如果,下次遇到這種操作,我們可以用「有條件的代碼行斷點」 - 這種斷點在我們想要跳過與我們的不關心的數據時非常有用。QlU28資訊網——每日最新資訊28at.com

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

上面的代碼中表示,當i>3時候,才會觸發斷點,此時我們可以通過Watch來查詢我們想知道的的數據信息,并且還可以在Block和Local也會顯示當前斷點上下文中的數據信息。QlU28資訊網——每日最新資訊28at.com

例如,我們可以在觸發斷點后,使用console.table()來查驗localStorage的信息。QlU28資訊網——每日最新資訊28at.com

打印函數調用堆棧

如果函數的調用層級比較多,我們還可以把篩選條件置換成console.trace()在斷點觸發時,來查驗對應的函數調用層級。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

參數定制化

同時,我們還可以在用一種近乎癲狂的方式,用我們自己的參數來為所欲為的讓代碼按照我們既定的路線進行運行。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

我們通過對參數進行假定,然后在觸發對應的函數時,按照我們給定的參數來運行函數QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

在代碼層面id值為1,但是我們可以通過「有條件的代碼行斷點」,將其替換成我們想要探查的數值。并且還不影響函數的運行順序。QlU28資訊網——每日最新資訊28at.com

計算函數耗時

針對一個長list的循環,我們想通過一些方式來計算它的耗時,一般我們通過硬編碼的方式使用console.time()/console.timeEnd()在循環的前后進行處理。QlU28資訊網——每日最新資訊28at.com

其實,我們可以在起始點設置一個帶有條件console.time('label')的斷點,在結束點設置一個帶有條件console.timeEnd('label')的斷點。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

根據參數個數暫停

只有當當前函數以 N 個參數調用時才暫停:arguments.callee.length === NQlU28資訊網——每日最新資訊28at.com

在函數「有可選參數」的情況下很有用。QlU28資訊網——每日最新資訊28at.com

根據函數參數個數不匹配暫停

只有當當前函數以錯誤的參數個數調用時才暫停:(arguments.callee.length) != arguments.lengthQlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

程序化切換QlU28資訊網——每日最新資訊28at.com

使用全局布爾值對一個或多個條件斷點進行門控:QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

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

圖片圖片QlU28資訊網——每日最新資訊28at.com

上面的案例中,我們使用了setTimeout來控制enableBreakpoints,其實我們還可以手動觸發window.enableBreakpoints = true;來控制是否對某些斷點進行開啟和關閉。QlU28資訊網——每日最新資訊28at.com

日志代碼行斷點

使用「日志代碼行斷點」(logpoints)可以在「不暫停執行且不用在代碼中添加console.log()調用的情況下」,將消息輸出到控制臺。其實,這種情況和「有條件的代碼行斷點」中加入console.log()效果差不多。QlU28資訊網——每日最新資訊28at.com

設置日志點的步驟:QlU28資訊網——每日最新資訊28at.com

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

圖片圖片QlU28資訊網——每日最新資訊28at.com

這個示例展示了在第 9 行設置的「日志代碼行斷點」,將變量i的值輸出到控制臺。QlU28資訊網——每日最新資訊28at.com

編輯代碼行斷點

使用Breakpoints面板可以禁用、編輯或刪除代碼行斷點。QlU28資訊網——每日最新資訊28at.com

編輯斷點組

Breakpoints面板「按文件對斷點進行分組,并按行和列號進行排序」。我們可以對組執行以下操作:QlU28資訊網——每日最新資訊28at.com

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

當我們禁用斷點時,Sources 面板會使其在行號旁邊的標記「變為透明」。QlU28資訊網——每日最新資訊28at.com

組具有上下文菜單。在Breakpoints面板中,選中一個組然后右鍵,然后選擇:QlU28資訊網——每日最新資訊28at.com

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

編輯斷點

要編輯斷點:QlU28資訊網——每日最新資訊28at.com

  • 點擊斷點旁邊的復選框以啟用或禁用它。當我們禁用斷點時,Sources 面板會使其在行號旁邊的標記「變為透明」。
  • 將鼠標懸停在斷點上,然后點擊編輯以編輯,點擊關閉以刪除它。
  • 在編輯斷點時,可以在內聯編輯器的下拉列表中更改其類型。

圖片圖片QlU28資訊網——每日最新資訊28at.com

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

圖片圖片QlU28資訊網——每日最新資訊28at.com

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

3. DOM 變更斷點

假設我們有如下的代碼QlU28資訊網——每日最新資訊28at.com

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>原有的內容</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觸發時,會在div中插入一個新的div。QlU28資訊網——每日最新資訊28at.com

當我們想要在更改 DOM 節點或其子節點的代碼上暫停時,可以使用 「DOM 變更斷點」。QlU28資訊網——每日最新資訊28at.com

設置 DOM 變更斷點的步驟:QlU28資訊網——每日最新資訊28at.com

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

圖片圖片QlU28資訊網——每日最新資訊28at.com

我們可以在以下位置找到 DOM 變更斷點列表:QlU28資訊網——每日最新資訊28at.com

  • Elements > DOM Breakpoints 面板。

圖片圖片QlU28資訊網——每日最新資訊28at.com

  • Sources > DOM Breakpoints 側面板。

圖片圖片QlU28資訊網——每日最新資訊28at.com

DOM 變更斷點的類型

  1. 「Subtree modifications(子樹修改)」:當當前選定節點的子節點被移除或添加,或子節點的內容發生更改時觸發。不會在子節點屬性更改時觸發,也不會在對當前選定節點的任何更改上觸發。
  2. 「Attributes modifications(屬性修改)」:當當前選定節點上添加或刪除屬性,或屬性值更改時觸發。
  3. 「Node Removal(節點移除)」:當當前選定節點被移除時觸發。

當我們觸發上面button時候,也就是觸發了,div的子樹修改的斷點,在動作觸發的同時,我們就會跳轉到指定的代碼中。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

在此時,我們也可以通過Watch來查看指定數據的信息。和在Block和Local中查看上下文中的信息。QlU28資訊網——每日最新資訊28at.com

這里有一個點,額外提醒一下,上面的代碼是用Hook寫的,而我們之前寫過,Hook其實就是一個閉包,在上面截圖右側部分是不是有一個Scope。有興趣的同學,可以打開看看。這里就不展示說明了。QlU28資訊網——每日最新資訊28at.com

4. XHR/fetch 斷點

假設,我們有如下的頁面結構QlU28資訊網——每日最新資訊28at.com

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 調用 send() 的代碼行上暫停。QlU28資訊網——每日最新資訊28at.com

這種情況有助于快速找到導致頁面請求錯誤 URL 的 AJAX 或 Fetch 源代碼。QlU28資訊網——每日最新資訊28at.com

設置 XHR/fetch 斷點的步驟:QlU28資訊網——每日最新資訊28at.com

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

在點擊查詢后,我們就可以在指定的接口查詢中,進行斷點處理。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

還有一點,我們需要額外的說明,我們用SPA搭建頁面,此時針對異步接口處理時,Axios是一個王者級別的解決方案。QlU28資訊網——每日最新資訊28at.com

如果大家看過Axios源碼的話,就會知道,它其實就是在XHR和Fetch上做了一層封裝。QlU28資訊網——每日最新資訊28at.com

所以,按道理,我們也可以通過XHR/fetch 斷點進行接口斷點。但是呢,由于Devtool有一個lognore List。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

默認情況下,Know third-party scripts form source map這項是勾選的。如果我們想要在調試Axios中的接口,我們就需要把這項給取消掉。QlU28資訊網——每日最新資訊28at.com

在處理完后,別記得把這個關閉掉,要不然bundle中的debugger也會會觸發。QlU28資訊網——每日最新資訊28at.com

針對XHR我們還可以在Event Listener Breakpoints中進行對應事件的監聽。(這個我們在下面「事件監聽器斷點」中介紹)QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

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

而有了「XHR/fetch 斷點」,我們可以通過url中特定的參數進行斷點處理。并且這是一種「子上而下」的搜索方式。我們可以通過調用棧就能把調用路線很清晰的把握住。QlU28資訊網——每日最新資訊28at.com

5. 事件監聽器斷點

當我們希望在事件被觸發后運行的事件監聽器代碼上暫停時,請使用事件監聽器斷點。我們可以選擇特定的事件,比如 click,或事件的類別,比如所有鼠標事件。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

設置事件監聽器斷點的步驟:QlU28資訊網——每日最新資訊28at.com

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

假設我們存在如下的頁面QlU28資訊網——每日最新資訊28at.com

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>  );}

然后,我們在選中我們想要監聽的事件。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

XHR 的事件監聽

圖片圖片QlU28資訊網——每日最新資訊28at.com

Mouse 事件監聽

圖片圖片QlU28資訊網——每日最新資訊28at.com

當然,如果我們想看React內部的處理邏輯,我們可以在lgnore list中將Know third-party scripts form source map打開,這樣的話我們在斷點觸發后,也能查看框架內部的處理邏輯。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

6. 異常斷點

當我們想在錯誤時進行斷點跟蹤時,可以使用「異常斷點」。QlU28資訊網——每日最新資訊28at.com

在Sources選項卡的Breakpoints面板中,啟用以下選項中的一個或兩個,然后執行代碼:QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

  1. 勾選Pause on uncaught exceptions

圖片圖片QlU28資訊網——每日最新資訊28at.com

在這個例子中,我們在代碼的第九行特意寫了一個front789的未定義的變量,并且沒執行捕獲操作。QlU28資訊網——每日最新資訊28at.com

  1. 勾選Pause on caught exceptions

圖片圖片QlU28資訊網——每日最新資訊28at.com

  • 在這個例子中,執行在已捕獲的異常上暫停。QlU28資訊網——每日最新資訊28at.com

墻裂建議,在我們開發階段,將Pause on uncaught exceptions打開,這樣可以讓瀏覽器來幫我們找到我們代碼不正確的地方。QlU28資訊網——每日最新資訊28at.com

7. 奇技淫巧

使用 copy()

大家有沒有遇到過,在進行log時候,想復制某些數據,但是只能在log輸出到控制臺后,才能復制。并且這些數據只是單純的展示,想選中也不好處理。QlU28資訊網——每日最新資訊28at.com

例如:QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

其實,我們可以使用copy()API 將瀏覽器中的特定信息「直接復制到剪貼板,而不會有任何字符串截斷」。QlU28資訊網——每日最新資訊28at.com

  • 當前 DOM 的快照:copy(document.documentElement.outerHTML)
  • 關于資源的元數據(例如圖片):copy(performance.getEntriesByType("resource"))
  • 一個大的 JSON blob,格式化:copy(JSON.parse(blob))
  • localStorage 的轉儲:copy(localStorage)
  • ....

檢查一個難以捕捉的元素

我們想檢查一個只有在條件滿足時才出現的 DOM 元素。QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

當我們在first input懸浮時候,想查看second input時候,鼠標移出first input后,后者立馬就消失不見了。QlU28資訊網——每日最新資訊28at.com

我們可以利用如下代碼:QlU28資訊網——每日最新資訊28at.com

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

這使我們有 5 秒的時間觸發 UI,然后一旦 5 秒計時器結束,JS 執行將暫停,沒有任何東西會讓你的元素消失。我們可以自由移動鼠標到開發工具而不失去元素:QlU28資訊網——每日最新資訊28at.com

圖片圖片QlU28資訊網——每日最新資訊28at.com

當 JS 執行暫停時,我們就可以檢查元素、編輯其 CSS、在 JS 控制臺中執行命令等。QlU28資訊網——每日最新資訊28at.com

在檢查依賴于特定光標位置、焦點等 DOM 時很有用。QlU28資訊網——每日最新資訊28at.com

監視焦點元素

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

圖片圖片QlU28資訊網——每日最新資訊28at.com

Reference

[1]WHATWG:https://spec.whatwg.org/QlU28資訊網——每日最新資訊28at.com

[2]chromium 在線倉庫:https://source.chromium.org/chromium/chromium/src;l=21QlU28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-35845-0.html你會在瀏覽器中打斷點嗎?我會!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 合思費控一體化 + 商旅消費解決方案,助力中科馭數實現業財融合

下一篇: Python指南之結構化模式匹配:讓編程變得更簡單、更靈活

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 鲁甸县| 太仓市| 尉氏县| 九龙城区| 晋江市| 汤原县| 怀柔区| 宿松县| 宁国市| 察雅县| 祁东县| 炎陵县| 兴和县| 易门县| 遵义市| 孝义市| 香格里拉县| 长宁县| 兴和县| 苏尼特右旗| 赤峰市| 吉首市| 宕昌县| 沙湾县| 建平县| 邛崃市| 萨迦县| 民勤县| 天气| 和硕县| 双辽市| 顺义区| 大渡口区| 苗栗市| 甘泉县| 汉寿县| 泌阳县| 丰镇市| 栾川县| 集安市| 石狮市|