跑分安卓第一！Redmi K60至尊版8月發(fā)布！盧偉冰：目標(biāo)年度性能之王
8月5日消息，Redmi K60至尊版將于8月發(fā)布，在此前舉行的戰(zhàn)略發(fā)布會(huì)上，官方該機(jī)將搭載搭載天璣9200+處理器，安兔兔V10跑分超177萬分，是目前安卓陣營(yíng)最高的分?jǐn)?shù)
不知道大家平時(shí)在前端開發(fā)中，是如何追蹤數(shù)據(jù)流向的。console.log()/console.count()/console.table()肯定大家或多或少的使用過。 還有那debugger也是必不可少的方式。
針對(duì)，一些簡(jiǎn)單的數(shù)據(jù)查驗(yàn)，上面所說的其實(shí)已經(jīng)夠用。但是，在面對(duì)頁面結(jié)構(gòu)繁雜，數(shù)據(jù)流向紊亂的應(yīng)用時(shí)，上面的措施就有點(diǎn)捉襟見肘。
所以，今天我們來深入研究一下，如何優(yōu)雅的進(jìn)行數(shù)據(jù)追蹤。也就是如何高效的在瀏覽器中進(jìn)行斷點(diǎn)的跟蹤。
好了，天不早了，干點(diǎn)正事哇。
「前置知識(shí)點(diǎn)」，只是做一個(gè)概念的介紹，不會(huì)做深度解釋。因?yàn)?，這些概念在下面文章中會(huì)有出現(xiàn)，為了讓行文更加的順暢，所以將本該在文內(nèi)的概念解釋放到前面來?！溉绻蠹覍?duì)這些概念熟悉，可以直接忽略」同時(shí)，由于閱讀我文章的群體有很多，所以有些知識(shí)點(diǎn)可能「我視之若珍寶，爾視只如草芥，棄之如敝履」。以下知識(shí)點(diǎn)，請(qǐng)「酌情使用」。
我們?cè)诹瞬黄鸬腂ase64中介紹過RFC。
圖片
它可以算是網(wǎng)絡(luò)協(xié)議的「圣經(jīng)」。
而，針對(duì)前端的部分技術(shù)，其實(shí)我們可以在WHATWG[1]找對(duì)對(duì)應(yīng)的標(biāo)準(zhǔn)描述。換句話說，我們可以里面找到最權(quán)威的解釋說明和使用方式。
WHATWG (Web Hypertext Application Technology Working Group) 是一個(gè)由一群來自不同公司的 web 開發(fā)者組成的組織，致力于推動(dòng) web 標(biāo)準(zhǔn)的發(fā)展。該組織成立于2004年。WHATWG 最知名的工作之一就是 HTML Living Standard（HTML5），該標(biāo)準(zhǔn)定義了現(xiàn)代 web 頁面的結(jié)構(gòu)和行為。除了HTML Living Standard，WHATWG 還參與了一些其他規(guī)范的制定，包括Web Workers、Web Storage、Fetch API 等。
下面是我們截取的部分技術(shù)的文檔。
圖片
在Console中，我們看到如下的結(jié)構(gòu)。
圖片
看到截圖中，有一個(gè)namespace console 。我們可以從截圖中得知。在內(nèi)置console中包含四部分
在之前我們講瀏覽器內(nèi)核時(shí)提到過。在chrome/chromium的內(nèi)核中，其中有很多C/C++的代碼。我們可以在chromium 在線倉庫[2]進(jìn)行查詢。
圖片
此圖中展示了在Chromium內(nèi)核中console實(shí)現(xiàn)
回到WHATWG中,我們就大家最熟悉的console.log來簡(jiǎn)單聊聊，如何優(yōu)雅的進(jìn)行日志的輸出。
我們平時(shí)做log的輸出是不是，用console.log(message)
console.log(`${變量名}_一堆硬編碼的字符信息`)其實(shí)哇，在message中可以內(nèi)嵌下面的格式化說明符。用于占位并輸出指定的信息。
下面是各種說明符的使用案例。
// %s - 字符串格式化console.log("輸出字符串: %s", "前端柒八九!");// %d or %i - 整數(shù)格式化console.log("輸出整數(shù)格式: %d", 42);console.log("輸出整數(shù)格式: %i", 42);// %f - 浮點(diǎn)數(shù)格式化console.log("輸出浮點(diǎn)數(shù)格式: %f", 3.14159);// %o - 以可折疊的優(yōu)化多行樣式顯示一個(gè)對(duì)象，適合復(fù)雜對(duì)象const obj = { age: 18, b: 'string', c: { name: "前端柒八九" } };console.log("輸出對(duì)象格式: %o", obj);// %O - 以不可折疊的 JavaScript 對(duì)象格式化console.log("用于簡(jiǎn)單的對(duì)象表示: %O", obj);// %c - 應(yīng)用 CSS 樣式到輸出console.log("%c對(duì)文本進(jìn)行樣式化輸出.", "font-size:20px; color:blue;");我們將其復(fù)制到Source-Snippet中進(jìn)行驗(yàn)證。
圖片
最常見的斷點(diǎn)類型是代碼行斷點(diǎn)(就是我們經(jīng)常用到的方式)。但是設(shè)置代碼行斷點(diǎn)可能效率較低，特別是如果我們不確定要查找的確切位置，或者如果我們正在處理大型代碼庫。
斷點(diǎn)類型 | 用途 |
代碼行 | 在代碼指定區(qū)域觸發(fā)斷點(diǎn)。 |
有條件的代碼行 | 只在滿足限定條件時(shí)，在指定地方觸發(fā)斷點(diǎn) |
記錄點(diǎn) | 在不暫停代碼運(yùn)行的情況下向控制臺(tái)輸出日志 |
DOM | 在更改或刪除特定 DOM 節(jié)點(diǎn)或其子節(jié)點(diǎn)時(shí)觸發(fā)斷點(diǎn) |
XHR | 當(dāng) XHR URL 包含某個(gè)字符串模式時(shí)觸發(fā)斷點(diǎn) |
事件監(jiān)聽器 | 在指定事件觸發(fā)后觸發(fā)斷點(diǎn) |
異常 | 在拋出已捕獲或未捕獲異常的代碼時(shí)觸發(fā)斷點(diǎn) |
函數(shù) | 每當(dāng)調(diào)用特定函數(shù)時(shí)觸發(fā)斷點(diǎn) |
monitorEvents 是一個(gè)在瀏覽器開發(fā)者工具中使用的 JavaScript 方法，用于「監(jiān)控指定元素上特定類型的事件」。這個(gè)方法通常用于調(diào)試和分析事件的觸發(fā)情況。
一旦使用 monitorEvents 監(jiān)控了某個(gè)元素上的事件，當(dāng)該元素上觸發(fā)相應(yīng)類型的事件時(shí)，瀏覽器會(huì)在控制臺(tái)中打印相應(yīng)的事件信息，包括事件類型、事件目標(biāo)等。
// 監(jiān)控特定元素上的一個(gè)或多個(gè)事件類型monitorEvents(element, eventTypes);// 監(jiān)控窗口內(nèi)的點(diǎn)擊事件monitorEvents(window, 'click');// 監(jiān)控文檔body上的鍵盤按鍵事件monitorEvents(document.body, ['keyup', 'keydown']);然后，我們還可以在控制臺(tái)的Element中直接選中元素，然后在Console中輸入對(duì)應(yīng)的指令
圖片
在特定元素觸發(fā)對(duì)應(yīng)的事件后，在控制臺(tái)就會(huì)打印除對(duì)應(yīng)的Event的信息。
圖片
上面，我們涉及到一個(gè)$0變量。其實(shí)這是chrome-devtool的一種內(nèi)置變量。在Elements選中一個(gè)元素時(shí)，我們就可以在Console中查詢對(duì)應(yīng)的元素引用。
我們還可以通過getEventListeners($0)來獲取該元素上綁定的事件信息。
然后，我們還可以通過$0.addEventListener來添加對(duì)應(yīng)的事件。這樣我們就不用通過class/id來現(xiàn)獲取元素，然后再調(diào)用addEventListener了。
圖片
monitor方法允許你監(jiān)聽特定函數(shù)的調(diào)用
// 定義一個(gè)示例函數(shù)function myFn() { }// 進(jìn)行監(jiān)控monitor(myFn)myFn()// function myFn calledmyFn(1)// function myFn called with arguments: 1有時(shí)候，我們想要代碼中對(duì)函數(shù)想進(jìn)行監(jiān)控，我們還可以使用monitor。
下面代碼中，我們用Vite啟動(dòng)一個(gè)React項(xiàng)目。
當(dāng)我們對(duì)即將要監(jiān)控的代碼胸有成竹時(shí)，也就是我們知道代碼的確切位置，那么我們就可以「代碼行斷點(diǎn)」，DevTools 總是在執(zhí)行此代碼行之前暫停。
設(shè)置 DevTools 中的代碼行斷點(diǎn)：
我們可以在Sources的左側(cè)文件目錄中進(jìn)行搜索
如果想調(diào)試的文件層級(jí)過于深，我們可以使用? P的快捷鍵，通過文件名來搜索
直接左鍵選中
或者右鍵喚起彈窗中，選擇Add breakpoint
圖片
我們還可以采用「硬編碼」的方式，通過debugger在代碼中打斷點(diǎn)。
console.log("front");console.log("789");debugger;console.log("456");這種方式，是我們平時(shí)經(jīng)常用到的，這里就不在展開說明了。
想必上面的打斷點(diǎn)的方式大家都比較熟悉，現(xiàn)在我們?cè)僬f一個(gè)大家平時(shí)可能會(huì)遇到的問題。
這種方式，墻裂推薦。效果不好，你打我。
假設(shè)現(xiàn)在有個(gè)循環(huán)，但是我們很確定的是，在循環(huán)的前半部分?jǐn)?shù)據(jù)是好的，而在后半部分?jǐn)?shù)據(jù)有問題。在之前，我們可能會(huì)通過「代碼行斷點(diǎn)」，在指定地方進(jìn)行斷點(diǎn)處理。如果是這種操作的話，那我們就需要對(duì)前面的數(shù)據(jù)也需要跟蹤。
如果，下次遇到這種操作，我們可以用「有條件的代碼行斷點(diǎn)」 - 這種斷點(diǎn)在我們想要跳過與我們的不關(guān)心的數(shù)據(jù)時(shí)非常有用。
上面的代碼中表示，當(dāng)i>3時(shí)候，才會(huì)觸發(fā)斷點(diǎn)，此時(shí)我們可以通過Watch來查詢我們想知道的的數(shù)據(jù)信息，并且還可以在Block和Local也會(huì)顯示當(dāng)前斷點(diǎn)上下文中的數(shù)據(jù)信息。
例如，我們可以在觸發(fā)斷點(diǎn)后，使用console.table()來查驗(yàn)localStorage的信息。
如果函數(shù)的調(diào)用層級(jí)比較多，我們還可以把篩選條件置換成console.trace()在斷點(diǎn)觸發(fā)時(shí)，來查驗(yàn)對(duì)應(yīng)的函數(shù)調(diào)用層級(jí)。
圖片
同時(shí)，我們還可以在用一種近乎癲狂的方式，用我們自己的參數(shù)來為所欲為的讓代碼按照我們既定的路線進(jìn)行運(yùn)行。
圖片
我們通過對(duì)參數(shù)進(jìn)行假定，然后在觸發(fā)對(duì)應(yīng)的函數(shù)時(shí)，按照我們給定的參數(shù)來運(yùn)行函數(shù)
圖片
在代碼層面id值為1，但是我們可以通過「有條件的代碼行斷點(diǎn)」，將其替換成我們想要探查的數(shù)值。并且還不影響函數(shù)的運(yùn)行順序。
針對(duì)一個(gè)長(zhǎng)list的循環(huán)，我們想通過一些方式來計(jì)算它的耗時(shí)，一般我們通過硬編碼的方式使用console.time()/console.timeEnd()在循環(huán)的前后進(jìn)行處理。
其實(shí)，我們可以在起始點(diǎn)設(shè)置一個(gè)帶有條件console.time('label')的斷點(diǎn)，在結(jié)束點(diǎn)設(shè)置一個(gè)帶有條件console.timeEnd('label')的斷點(diǎn)。
圖片
只有當(dāng)當(dāng)前函數(shù)以 N 個(gè)參數(shù)調(diào)用時(shí)才暫停：arguments.callee.length === N
在函數(shù)「有可選參數(shù)」的情況下很有用。
只有當(dāng)當(dāng)前函數(shù)以錯(cuò)誤的參數(shù)個(gè)數(shù)調(diào)用時(shí)才暫停：(arguments.callee.length) != arguments.length
圖片
程序化切換
使用全局布爾值對(duì)一個(gè)或多個(gè)條件斷點(diǎn)進(jìn)行門控：
圖片
圖片
上面的案例中，我們使用了setTimeout來控制enableBreakpoints,其實(shí)我們還可以手動(dòng)觸發(fā)window.enableBreakpoints = true;來控制是否對(duì)某些斷點(diǎn)進(jìn)行開啟和關(guān)閉。
使用「日志代碼行斷點(diǎn)」（logpoints）可以在「不暫停執(zhí)行且不用在代碼中添加console.log()調(diào)用的情況下」，將消息輸出到控制臺(tái)。其實(shí)，這種情況和「有條件的代碼行斷點(diǎn)」中加入console.log()效果差不多。
設(shè)置日志點(diǎn)的步驟：
圖片
這個(gè)示例展示了在第 9 行設(shè)置的「日志代碼行斷點(diǎn)」，將變量i的值輸出到控制臺(tái)。
使用Breakpoints面板可以禁用、編輯或刪除代碼行斷點(diǎn)。
Breakpoints面板「按文件對(duì)斷點(diǎn)進(jìn)行分組，并按行和列號(hào)進(jìn)行排序」。我們可以對(duì)組執(zhí)行以下操作：
當(dāng)我們禁用斷點(diǎn)時(shí)，Sources 面板會(huì)使其在行號(hào)旁邊的標(biāo)記「變?yōu)橥该鳌埂?span style="display:none">dbK28資訊網(wǎng)——每日最新資訊28at.com
組具有上下文菜單。在Breakpoints面板中，選中一個(gè)組然后右鍵，然后選擇：
要編輯斷點(diǎn)：
圖片
圖片
假設(shè)我們有如下的代碼
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ā)時(shí)，會(huì)在div中插入一個(gè)新的div。
當(dāng)我們想要在更改 DOM 節(jié)點(diǎn)或其子節(jié)點(diǎn)的代碼上暫停時(shí)，可以使用 「DOM 變更斷點(diǎn)」。
設(shè)置 DOM 變更斷點(diǎn)的步驟：
圖片
我們可以在以下位置找到 DOM 變更斷點(diǎn)列表：
圖片
圖片
當(dāng)我們觸發(fā)上面button時(shí)候，也就是觸發(fā)了，div的子樹修改的斷點(diǎn)，在動(dòng)作觸發(fā)的同時(shí)，我們就會(huì)跳轉(zhuǎn)到指定的代碼中。
圖片
在此時(shí)，我們也可以通過Watch來查看指定數(shù)據(jù)的信息。和在Block和Local中查看上下文中的信息。
這里有一個(gè)點(diǎn)，額外提醒一下，上面的代碼是用Hook寫的，而我們之前寫過，Hook其實(shí)就是一個(gè)閉包，在上面截圖右側(cè)部分是不是有一個(gè)Scope。有興趣的同學(xué)，可以打開看看。這里就不展示說明了。
假設(shè)，我們有如下的頁面結(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("接口請(qǐng)求完成"); } }; useEffect(() => {}, []); return ( <div> <h1>XHR Debugger Demo</h1> {posts.map((item) => ( <div key={item?.id}>{item?.title}</div> ))} <button onClick={() => getPosts()}>接口查詢</button> </div> );}當(dāng)我們想在 XMLHttpRequest（XHR）的「請(qǐng)求 URL 包含特定字符串時(shí)」暫停時(shí)，可以使用 「XHR/fetch 斷點(diǎn)」。DevTools 會(huì)在 XHR 調(diào)用 send() 的代碼行上暫停。
這種情況有助于快速找到導(dǎo)致頁面請(qǐng)求錯(cuò)誤 URL 的 AJAX 或 Fetch 源代碼。
設(shè)置 XHR/fetch 斷點(diǎn)的步驟：
在點(diǎn)擊查詢后，我們就可以在指定的接口查詢中，進(jìn)行斷點(diǎn)處理。
圖片
還有一點(diǎn)，我們需要額外的說明，我們用SPA搭建頁面，此時(shí)針對(duì)異步接口處理時(shí)，Axios是一個(gè)王者級(jí)別的解決方案。
如果大家看過Axios源碼的話，就會(huì)知道，它其實(shí)就是在XHR和Fetch上做了一層封裝。
所以，按道理，我們也可以通過XHR/fetch 斷點(diǎn)進(jìn)行接口斷點(diǎn)。但是呢，由于Devtool有一個(gè)lognore List。
圖片
默認(rèn)情況下，Know third-party scripts form source map這項(xiàng)是勾選的。如果我們想要在調(diào)試Axios中的接口，我們就需要把這項(xiàng)給取消掉。
在處理完后，別記得把這個(gè)關(guān)閉掉，要不然bundle中的debugger也會(huì)會(huì)觸發(fā)。
針對(duì)XHR我們還可以在Event Listener Breakpoints中進(jìn)行對(duì)應(yīng)事件的監(jiān)聽。(這個(gè)我們?cè)谙旅妗甘录O(jiān)聽器斷點(diǎn)」中介紹)
圖片
使用「XHR/fetch 斷點(diǎn)」時(shí)，其實(shí)在工作中能幫助我們很大，比方說你接手了一個(gè)項(xiàng)目，然后發(fā)現(xiàn)在某個(gè)接口中出現(xiàn)了問題，按照我們以往的排查方式的話，是不是先在控制臺(tái)找到對(duì)應(yīng)的url，然后在代碼中全局搜索這個(gè)url。通過對(duì)應(yīng)的本地方法，再次向上搜索，如果嵌套層級(jí)過多，那找著找著，把原來向定位的問題都遺忘了呢。
而有了「XHR/fetch 斷點(diǎn)」,我們可以通過url中特定的參數(shù)進(jìn)行斷點(diǎn)處理。并且這是一種「子上而下」的搜索方式。我們可以通過調(diào)用棧就能把調(diào)用路線很清晰的把握住。
當(dāng)我們希望在事件被觸發(fā)后運(yùn)行的事件監(jiān)聽器代碼上暫停時(shí)，請(qǐng)使用事件監(jiān)聽器斷點(diǎn)。我們可以選擇特定的事件，比如 click，或事件的類別，比如所有鼠標(biāo)事件。
圖片
設(shè)置事件監(jiān)聽器斷點(diǎn)的步驟：
假設(shè)我們存在如下的頁面
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)} > 按鈕點(diǎn)擊 </button> {posts.map((item) => ( <div key={item?.id}>{item?.title}</div> ))} </div> );}然后，我們?cè)谶x中我們想要監(jiān)聽的事件。
圖片
圖片
圖片
當(dāng)然，如果我們想看React內(nèi)部的處理邏輯，我們可以在lgnore list中將Know third-party scripts form source map打開，這樣的話我們?cè)跀帱c(diǎn)觸發(fā)后，也能查看框架內(nèi)部的處理邏輯。
圖片
當(dāng)我們想在錯(cuò)誤時(shí)進(jìn)行斷點(diǎn)跟蹤時(shí)，可以使用「異常斷點(diǎn)」。
在Sources選項(xiàng)卡的Breakpoints面板中，啟用以下選項(xiàng)中的一個(gè)或兩個(gè)，然后執(zhí)行代碼：
圖片
圖片
在這個(gè)例子中，我們?cè)诖a的第九行特意寫了一個(gè)front789的未定義的變量，并且沒執(zhí)行捕獲操作。
圖片
在這個(gè)例子中，執(zhí)行在已捕獲的異常上暫停。
墻裂建議，在我們開發(fā)階段，將Pause on uncaught exceptions打開，這樣可以讓瀏覽器來幫我們找到我們代碼不正確的地方。
大家有沒有遇到過，在進(jìn)行l(wèi)og時(shí)候，想復(fù)制某些數(shù)據(jù)，但是只能在log輸出到控制臺(tái)后，才能復(fù)制。并且這些數(shù)據(jù)只是單純的展示，想選中也不好處理。
例如：
圖片
其實(shí)，我們可以使用copy()API 將瀏覽器中的特定信息「直接復(fù)制到剪貼板，而不會(huì)有任何字符串截?cái)唷埂?span style="display:none">dbK28資訊網(wǎng)——每日最新資訊28at.com
我們想檢查一個(gè)只有在條件滿足時(shí)才出現(xiàn)的 DOM 元素。
圖片
當(dāng)我們?cè)趂irst input懸浮時(shí)候，想查看second input時(shí)候，鼠標(biāo)移出first input后，后者立馬就消失不見了。
我們可以利用如下代碼：
setTimeout(function () { debugger;}, 5000);這使我們有 5 秒的時(shí)間觸發(fā) UI，然后一旦 5 秒計(jì)時(shí)器結(jié)束，JS 執(zhí)行將暫停，沒有任何東西會(huì)讓你的元素消失。我們可以自由移動(dòng)鼠標(biāo)到開發(fā)工具而不失去元素：
圖片
當(dāng) JS 執(zhí)行暫停時(shí)，我們就可以檢查元素、編輯其 CSS、在 JS 控制臺(tái)中執(zhí)行命令等。
在檢查依賴于特定光標(biāo)位置、焦點(diǎn)等 DOM 時(shí)很有用。
(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你會(huì)在瀏覽器中打斷點(diǎn)嗎？我會(huì)！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 合思費(fèi)控一體化 + 商旅消費(fèi)解決方案，助力中科馭數(shù)實(shí)現(xiàn)業(yè)財(cái)融合
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)