消息稱迪士尼要拍真人版《魔發奇緣》：女主可能也找黑人演員
8月5日消息，迪士尼確實有點忙，忙著將不少動畫改成真人版，繼《美人魚》后，真人版《白雪公主》、《魔發奇緣》也在路上了。據外媒消息稱，迪士尼將打造真人版
不知道大家平時在前端開發中，是如何追蹤數據流向的。console.log()/console.count()/console.table()肯定大家或多或少的使用過。 還有那debugger也是必不可少的方式。
針對，一些簡單的數據查驗，上面所說的其實已經夠用。但是，在面對頁面結構繁雜，數據流向紊亂的應用時，上面的措施就有點捉襟見肘。
所以，今天我們來深入研究一下，如何優雅的進行數據追蹤。也就是如何高效的在瀏覽器中進行斷點的跟蹤。
好了，天不早了，干點正事哇。
「前置知識點」，只是做一個概念的介紹，不會做深度解釋。因為，這些概念在下面文章中會有出現，為了讓行文更加的順暢，所以將本該在文內的概念解釋放到前面來。「如果大家對這些概念熟悉，可以直接忽略」同時，由于閱讀我文章的群體有很多，所以有些知識點可能「我視之若珍寶，爾視只如草芥，棄之如敝履」。以下知識點，請「酌情使用」。
我們在了不起的Base64中介紹過RFC。
圖片
它可以算是網絡協議的「圣經」。
而，針對前端的部分技術，其實我們可以在WHATWG[1]找對對應的標準描述。換句話說，我們可以里面找到最權威的解釋說明和使用方式。
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 等。
下面是我們截取的部分技術的文檔。
圖片
在Console中，我們看到如下的結構。
圖片
看到截圖中，有一個namespace console 。我們可以從截圖中得知。在內置console中包含四部分
在之前我們講瀏覽器內核時提到過。在chrome/chromium的內核中，其中有很多C/C++的代碼。我們可以在chromium 在線倉庫[2]進行查詢。
圖片
此圖中展示了在Chromium內核中console實現
回到WHATWG中,我們就大家最熟悉的console.log來簡單聊聊，如何優雅的進行日志的輸出。
我們平時做log的輸出是不是，用console.log(message)
console.log(`${變量名}_一堆硬編碼的字符信息`)其實哇，在message中可以內嵌下面的格式化說明符。用于占位并輸出指定的信息。
下面是各種說明符的使用案例。
// %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中進行驗證。
圖片
最常見的斷點類型是代碼行斷點(就是我們經常用到的方式)。但是設置代碼行斷點可能效率較低，特別是如果我們不確定要查找的確切位置，或者如果我們正在處理大型代碼庫。
斷點類型 | 用途 |
代碼行 | 在代碼指定區域觸發斷點。 |
有條件的代碼行 | 只在滿足限定條件時，在指定地方觸發斷點 |
記錄點 | 在不暫停代碼運行的情況下向控制臺輸出日志 |
DOM | 在更改或刪除特定 DOM 節點或其子節點時觸發斷點 |
XHR | 當 XHR URL 包含某個字符串模式時觸發斷點 |
事件監聽器 | 在指定事件觸發后觸發斷點 |
異常 | 在拋出已捕獲或未捕獲異常的代碼時觸發斷點 |
函數 | 每當調用特定函數時觸發斷點 |
monitorEvents 是一個在瀏覽器開發者工具中使用的 JavaScript 方法，用于「監控指定元素上特定類型的事件」。這個方法通常用于調試和分析事件的觸發情況。
一旦使用 monitorEvents 監控了某個元素上的事件，當該元素上觸發相應類型的事件時，瀏覽器會在控制臺中打印相應的事件信息，包括事件類型、事件目標等。
// 監控特定元素上的一個或多個事件類型monitorEvents(element, eventTypes);// 監控窗口內的點擊事件monitorEvents(window, 'click');// 監控文檔body上的鍵盤按鍵事件monitorEvents(document.body, ['keyup', 'keydown']);然后，我們還可以在控制臺的Element中直接選中元素，然后在Console中輸入對應的指令
圖片
在特定元素觸發對應的事件后，在控制臺就會打印除對應的Event的信息。
圖片
上面，我們涉及到一個$0變量。其實這是chrome-devtool的一種內置變量。在Elements選中一個元素時，我們就可以在Console中查詢對應的元素引用。
我們還可以通過getEventListeners($0)來獲取該元素上綁定的事件信息。
然后，我們還可以通過$0.addEventListener來添加對應的事件。這樣我們就不用通過class/id來現獲取元素，然后再調用addEventListener了。
圖片
monitor方法允許你監聽特定函數的調用
// 定義一個示例函數function myFn() { }// 進行監控monitor(myFn)myFn()// function myFn calledmyFn(1)// function myFn called with arguments: 1有時候，我們想要代碼中對函數想進行監控，我們還可以使用monitor。
下面代碼中，我們用Vite啟動一個React項目。
當我們對即將要監控的代碼胸有成竹時，也就是我們知道代碼的確切位置，那么我們就可以「代碼行斷點」，DevTools 總是在執行此代碼行之前暫停。
設置 DevTools 中的代碼行斷點：
我們可以在Sources的左側文件目錄中進行搜索
如果想調試的文件層級過于深，我們可以使用? P的快捷鍵，通過文件名來搜索
直接左鍵選中
或者右鍵喚起彈窗中，選擇Add breakpoint
圖片
我們還可以采用「硬編碼」的方式，通過debugger在代碼中打斷點。
console.log("front");console.log("789");debugger;console.log("456");這種方式，是我們平時經常用到的，這里就不在展開說明了。
想必上面的打斷點的方式大家都比較熟悉，現在我們再說一個大家平時可能會遇到的問題。
這種方式，墻裂推薦。效果不好，你打我。
假設現在有個循環，但是我們很確定的是，在循環的前半部分數據是好的，而在后半部分數據有問題。在之前，我們可能會通過「代碼行斷點」，在指定地方進行斷點處理。如果是這種操作的話，那我們就需要對前面的數據也需要跟蹤。
如果，下次遇到這種操作，我們可以用「有條件的代碼行斷點」 - 這種斷點在我們想要跳過與我們的不關心的數據時非常有用。
上面的代碼中表示，當i>3時候，才會觸發斷點，此時我們可以通過Watch來查詢我們想知道的的數據信息，并且還可以在Block和Local也會顯示當前斷點上下文中的數據信息。
例如，我們可以在觸發斷點后，使用console.table()來查驗localStorage的信息。
如果函數的調用層級比較多，我們還可以把篩選條件置換成console.trace()在斷點觸發時，來查驗對應的函數調用層級。
圖片
同時，我們還可以在用一種近乎癲狂的方式，用我們自己的參數來為所欲為的讓代碼按照我們既定的路線進行運行。
圖片
我們通過對參數進行假定，然后在觸發對應的函數時，按照我們給定的參數來運行函數
圖片
在代碼層面id值為1，但是我們可以通過「有條件的代碼行斷點」，將其替換成我們想要探查的數值。并且還不影響函數的運行順序。
針對一個長list的循環，我們想通過一些方式來計算它的耗時，一般我們通過硬編碼的方式使用console.time()/console.timeEnd()在循環的前后進行處理。
其實，我們可以在起始點設置一個帶有條件console.time('label')的斷點，在結束點設置一個帶有條件console.timeEnd('label')的斷點。
圖片
只有當當前函數以 N 個參數調用時才暫停：arguments.callee.length === N
在函數「有可選參數」的情況下很有用。
只有當當前函數以錯誤的參數個數調用時才暫停：(arguments.callee.length) != arguments.length
圖片
程序化切換
使用全局布爾值對一個或多個條件斷點進行門控：
圖片
圖片
上面的案例中，我們使用了setTimeout來控制enableBreakpoints,其實我們還可以手動觸發window.enableBreakpoints = true;來控制是否對某些斷點進行開啟和關閉。
使用「日志代碼行斷點」（logpoints）可以在「不暫停執行且不用在代碼中添加console.log()調用的情況下」，將消息輸出到控制臺。其實，這種情況和「有條件的代碼行斷點」中加入console.log()效果差不多。
設置日志點的步驟：
圖片
這個示例展示了在第 9 行設置的「日志代碼行斷點」，將變量i的值輸出到控制臺。
使用Breakpoints面板可以禁用、編輯或刪除代碼行斷點。
Breakpoints面板「按文件對斷點進行分組，并按行和列號進行排序」。我們可以對組執行以下操作：
當我們禁用斷點時，Sources 面板會使其在行號旁邊的標記「變為透明」。
組具有上下文菜單。在Breakpoints面板中，選中一個組然后右鍵，然后選擇：
要編輯斷點：
圖片
圖片
假設我們有如下的代碼
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。
當我們想要在更改 DOM 節點或其子節點的代碼上暫停時，可以使用 「DOM 變更斷點」。
設置 DOM 變更斷點的步驟：
圖片
我們可以在以下位置找到 DOM 變更斷點列表：
圖片
圖片
當我們觸發上面button時候，也就是觸發了，div的子樹修改的斷點，在動作觸發的同時，我們就會跳轉到指定的代碼中。
圖片
在此時，我們也可以通過Watch來查看指定數據的信息。和在Block和Local中查看上下文中的信息。
這里有一個點，額外提醒一下，上面的代碼是用Hook寫的，而我們之前寫過，Hook其實就是一個閉包，在上面截圖右側部分是不是有一個Scope。有興趣的同學，可以打開看看。這里就不展示說明了。
假設，我們有如下的頁面結構
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() 的代碼行上暫停。
這種情況有助于快速找到導致頁面請求錯誤 URL 的 AJAX 或 Fetch 源代碼。
設置 XHR/fetch 斷點的步驟：
在點擊查詢后，我們就可以在指定的接口查詢中，進行斷點處理。
圖片
還有一點，我們需要額外的說明，我們用SPA搭建頁面，此時針對異步接口處理時，Axios是一個王者級別的解決方案。
如果大家看過Axios源碼的話，就會知道，它其實就是在XHR和Fetch上做了一層封裝。
所以，按道理，我們也可以通過XHR/fetch 斷點進行接口斷點。但是呢，由于Devtool有一個lognore List。
圖片
默認情況下，Know third-party scripts form source map這項是勾選的。如果我們想要在調試Axios中的接口，我們就需要把這項給取消掉。
在處理完后，別記得把這個關閉掉，要不然bundle中的debugger也會會觸發。
針對XHR我們還可以在Event Listener Breakpoints中進行對應事件的監聽。(這個我們在下面「事件監聽器斷點」中介紹)
圖片
使用「XHR/fetch 斷點」時，其實在工作中能幫助我們很大，比方說你接手了一個項目，然后發現在某個接口中出現了問題，按照我們以往的排查方式的話，是不是先在控制臺找到對應的url，然后在代碼中全局搜索這個url。通過對應的本地方法，再次向上搜索，如果嵌套層級過多，那找著找著，把原來向定位的問題都遺忘了呢。
而有了「XHR/fetch 斷點」,我們可以通過url中特定的參數進行斷點處理。并且這是一種「子上而下」的搜索方式。我們可以通過調用棧就能把調用路線很清晰的把握住。
當我們希望在事件被觸發后運行的事件監聽器代碼上暫停時，請使用事件監聽器斷點。我們可以選擇特定的事件，比如 click，或事件的類別，比如所有鼠標事件。
圖片
設置事件監聽器斷點的步驟：
假設我們存在如下的頁面
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> );}然后，我們在選中我們想要監聽的事件。
圖片
圖片
圖片
當然，如果我們想看React內部的處理邏輯，我們可以在lgnore list中將Know third-party scripts form source map打開，這樣的話我們在斷點觸發后，也能查看框架內部的處理邏輯。
圖片
當我們想在錯誤時進行斷點跟蹤時，可以使用「異常斷點」。
在Sources選項卡的Breakpoints面板中，啟用以下選項中的一個或兩個，然后執行代碼：
圖片
圖片
在這個例子中，我們在代碼的第九行特意寫了一個front789的未定義的變量，并且沒執行捕獲操作。
圖片
在這個例子中，執行在已捕獲的異常上暫停。
墻裂建議，在我們開發階段，將Pause on uncaught exceptions打開，這樣可以讓瀏覽器來幫我們找到我們代碼不正確的地方。
大家有沒有遇到過，在進行log時候，想復制某些數據，但是只能在log輸出到控制臺后，才能復制。并且這些數據只是單純的展示，想選中也不好處理。
例如：
圖片
其實，我們可以使用copy()API 將瀏覽器中的特定信息「直接復制到剪貼板，而不會有任何字符串截斷」。
我們想檢查一個只有在條件滿足時才出現的 DOM 元素。
圖片
當我們在first input懸浮時候，想查看second input時候，鼠標移出first input后，后者立馬就消失不見了。
我們可以利用如下代碼：
setTimeout(function () { debugger;}, 5000);這使我們有 5 秒的時間觸發 UI，然后一旦 5 秒計時器結束，JS 執行將暫停，沒有任何東西會讓你的元素消失。我們可以自由移動鼠標到開發工具而不失去元素：
圖片
當 JS 執行暫停時，我們就可以檢查元素、編輯其 CSS、在 JS 控制臺中執行命令等。
在檢查依賴于特定光標位置、焦點等 DOM 時很有用。
(function () { let last = document.activeElement; setInterval(() => { if (document.activeElement !== last) { last = document.activeElement; console.log("Focus changed to: ", last); } }, 100);})();
圖片
[1]WHATWG:https://spec.whatwg.org/
[2]chromium 在線倉庫:https://source.chromium.org/chromium/chromium/src;l=21
本文鏈接：http://www.www897cc.com/showinfo-26-35845-0.html你會在瀏覽器中打斷點嗎？我會！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號