我一直覺(jué)得Chrome 控制臺(tái)Console是前端開(kāi)發(fā)里最值得花時(shí)間摸透的工具。很多人對(duì)它的印象停留在“看報(bào)錯(cuò)、點(diǎn)一下元素、跑兩行小腳本”但如果你把它當(dāng)成一個(gè)完整的調(diào)試命令行來(lái)用會(huì)發(fā)現(xiàn)里面藏著一整套 API 和快捷命令從選擇元素、監(jiān)聽(tīng)函數(shù)、查看事件綁定到性能計(jì)時(shí)和斷點(diǎn)設(shè)置幾乎能覆蓋日常排查的絕大部分需求。這篇文章可以當(dāng)作一份通用版的 Console 命令速查文檔適合前端開(kāi)發(fā)者、爬蟲(chóng)調(diào)試人員以及對(duì)瀏覽器工具感興趣的產(chǎn)品和技術(shù)同學(xué)。我盡量把每條命令的用法、適用場(chǎng)景和容易踩的坑一起寫進(jìn)去爭(zhēng)取讓新手看完能直接上手老手也能翻到一些平時(shí)沒(méi)注意到的細(xì)節(jié)。1. 打開(kāi)控制臺(tái)之前先搞清 Console 對(duì)象與命令行 API 的關(guān)系1.1 三種打開(kāi)方式和最容易被忽略的兩個(gè)設(shè)置打開(kāi)控制臺(tái)這件事聽(tīng)起來(lái)沒(méi)什么好講的但不同場(chǎng)景下效率差異很大。Windows 和 Linux 下可以用 CtrlShiftJ 直接進(jìn)入 Console 面板macOS 上是 CommandOptionJ按 F12 打開(kāi)開(kāi)發(fā)者工具后再切到 Console 也完全沒(méi)問(wèn)題。我個(gè)人習(xí)慣用快捷鍵直達(dá)因?yàn)檎{(diào)試時(shí)往往要反復(fù)切換 Elements、Sources、Network 面板每次都拿鼠標(biāo)點(diǎn)一遍真的很浪費(fèi)時(shí)間。進(jìn)入控制臺(tái)之后有兩處設(shè)置建議根據(jù)場(chǎng)景調(diào)整。第一處是日志級(jí)別過(guò)濾Console 默認(rèn)會(huì)把 Verbose詳細(xì)級(jí)別的日志折疊起來(lái)如果你想看console.debug()的輸出需要把日志級(jí)別切到 Verbose否則大概率會(huì)以為自己的打印語(yǔ)句沒(méi)生效。第二處是“Selected context only”如果你的頁(yè)面里有 iframe、擴(kuò)展腳本或者 service worker 在輸出日志Consonle 會(huì)很吵勾選這個(gè)選項(xiàng)可以只看當(dāng)前執(zhí)行上下文的內(nèi)容排查問(wèn)題的時(shí)候干凈很多。1.2 Console 對(duì)象與命令行 API 的邊界這是很多人搞混的第一個(gè)點(diǎn)。console.log()、console.table()、console.time()這一系列屬于 Console API本質(zhì)是console對(duì)象上的方法寫在頁(yè)面代碼里一樣能執(zhí)行。而$_、$0、debug()、monitor()、copy()這些屬于命令行 API它們是 DevTools 注入到當(dāng)前執(zhí)行環(huán)境里的工具函數(shù)只存在于控制臺(tái)交互上下文頁(yè)面腳本里訪問(wèn)不到。理解這個(gè)區(qū)別很重要。比如你在控制臺(tái)里輸入$0能拿到 Elements 面板當(dāng)前選中的元素但你不能把$0寫進(jìn)項(xiàng)目代碼里上線之后ReferenceError直接砸臉。反過(guò)來(lái)console對(duì)象上的方法可以被代碼覆蓋和改寫而命令行 API 通常不太容易受頁(yè)面腳本影響。調(diào)試的時(shí)候遇到“為什么這個(gè)函數(shù)在頁(yè)面上沒(méi)定義、在控制臺(tái)里卻能執(zhí)行”這類問(wèn)題十有八九就是觸到了這個(gè)邊界。另一個(gè)容易被忽略的點(diǎn)是控制臺(tái)本質(zhì)上是一個(gè) REPL 環(huán)境你輸入的每一行都會(huì)先被 JavaScript 引擎執(zhí)行然后再把結(jié)果格式化輸出。所以像document.querySelector這種表達(dá)式會(huì)顯示函數(shù)源碼而如果直接輸入document控制臺(tái)會(huì)把整個(gè)文檔對(duì)象折疊成一個(gè)可點(diǎn)擊的樹(shù)形結(jié)構(gòu)。這個(gè)“先執(zhí)行、再格式化”的機(jī)制是所有控制臺(tái)命令行為的基礎(chǔ)后面的很多命令都是在這個(gè)邏輯上展開(kāi)的。2. 高頻命令速查從 $_ 到 $0-$4再到 $() 與 $$()2.1 $_重復(fù)使用上一個(gè)計(jì)算結(jié)果$_是控制臺(tái)里非常實(shí)用的快捷變量它永遠(yuǎn)保存著上一個(gè)表達(dá)式的執(zhí)行結(jié)果。比如你在控制臺(tái)輸入1 2回車后得到 3此時(shí)輸入$_ * 4控制臺(tái)會(huì)直接返回 12。在計(jì)算嵌套數(shù)據(jù)、臨時(shí)修改某個(gè)值時(shí)這個(gè)變量能省掉很多重復(fù)輸入的功夫。實(shí)際用的時(shí)候有幾個(gè)細(xì)節(jié)要注意。$_保存的是最近一次表達(dá)式的結(jié)果如果你中間執(zhí)行了某個(gè)返回undefined的語(yǔ)句$_就被覆蓋成undefined了。另外在監(jiān)聽(tīng)器里用$_還可能踩到坑比如你先執(zhí)行了一個(gè)異步操作然后又去讀$_拿到的不一定是預(yù)期的中間值。所以我的習(xí)慣是$_適合臨時(shí)交互不適合寫多步驟腳本復(fù)雜的中間值老老實(shí)實(shí)賦給自定義變量更穩(wěn)。2.2 $0-$4直接引用 Elements 面板選中的元素$0到$4是一組歷史引用$0返回 Elements 面板里當(dāng)前選中的元素$1返回上一次選中的元素依此類推總共保留最近五次選擇記錄。這個(gè)功能配合 Elements 面板使用堪稱神器先在頁(yè)面上右鍵“檢查”選中一個(gè)按鈕然后切到 Console 輸入$0.textContent馬上就能看到按鈕里的文案輸入$0.offsetParent能快速判斷它被哪個(gè)父級(jí)定位容器約束。我經(jīng)常用$0做“先選中、后操作”的調(diào)試流程。比如懷疑某個(gè)元素的樣式不對(duì)先在 Elements 里選中它再到 Console 里執(zhí)行$0.style.outline 2px solid red瞬間畫出邊框確認(rèn)邊界。如果發(fā)現(xiàn)改錯(cuò)了還能從$1、$2里找回之前選過(guò)的元素不需要跳回面板重新點(diǎn)選。唯一要注意的是這些引用只在當(dāng)前 DevTools 會(huì)話內(nèi)有效刷新頁(yè)面之后引用鏈會(huì)清空$0會(huì)變成undefined。2.3 $() 與 $$()選擇器函數(shù)的便捷替代$()是document.querySelector()的簡(jiǎn)寫$$()是document.querySelectorAll()的簡(jiǎn)寫但$$()返回的是數(shù)組不是 NodeList所以可以直接用map()、filter()、forEach()這些數(shù)組方法。舉個(gè)例子我想快速拿到頁(yè)面里所有外鏈的域名輸入$$(a[href^http]).map(a new URL(a.href).hostname)回車之后立刻能看到去重的域名列表。這在爬蟲(chóng)調(diào)試和頁(yè)面結(jié)構(gòu)分析場(chǎng)景里特別順手不需要打開(kāi)一個(gè)臨時(shí)編輯器寫循環(huán)、再粘貼回控制臺(tái)執(zhí)行。這里有一個(gè)經(jīng)典沖突如果頁(yè)面本身引入了 jQuery$這個(gè)標(biāo)識(shí)符會(huì)被 jQuery 占用控制臺(tái)里的$()可能就變成 jQuery 的選擇器了。遇到這種情況可以直接用document.querySelector()來(lái)兜底或者把函數(shù)重命名一下再使用比如const $ document.querySelector.bind(document)不過(guò)要注意在某些版本的 DevTools 里內(nèi)置$()和頁(yè)面全局$是會(huì)互相覆蓋的具體行為跟 DevTools 版本和頁(yè)面加載時(shí)機(jī)有關(guān)。我建議在團(tuán)隊(duì)項(xiàng)目里統(tǒng)一約定調(diào)試時(shí)優(yōu)先用$$()和document.querySelector避免被頁(yè)面環(huán)境干擾。2.4 高頻命令速查小抄為了方便日常翻閱我匯總了一張速查表覆蓋本文后面會(huì)展開(kāi)講的一部分核心命令命令作用示例$_引用上一個(gè)表達(dá)式的結(jié)果$_$0引用 Elements 面板當(dāng)前選中的元素$0.style.color #f60$()querySelector的簡(jiǎn)寫$(.nav).innerHTML$$()querySelectorAll的數(shù)組版簡(jiǎn)寫$$(img).length$x()用 XPath 選擇元素$x(//div[classitem])copy()把內(nèi)容復(fù)制到剪貼板copy(document.title)clear()清空控制臺(tái)輸出clear()這里面$x()在 XPath 場(chǎng)景下很有用尤其是嵌套層級(jí)深的頁(yè)面結(jié)構(gòu)用 XPath 比 CSS 選擇器更靈活。但日常調(diào)試用 CSS 選擇器居多XPath 當(dāng)成補(bǔ)充工具記住就可以了。3. console.* 家族從 log 到 table 的完整用法3.1 log、info、warn、error、debug 的分級(jí)輸出console.log()是最基礎(chǔ)的輸出方法但實(shí)際項(xiàng)目里我很少單獨(dú)用log。更合理的做法是讓不同類型的消息走不同的級(jí)別普通信息用console.info()警告用console.warn()錯(cuò)誤用console.error()調(diào)試細(xì)節(jié)用console.debug()。這樣做的直接好處是控制臺(tái)自帶濾鏡可以把日志按級(jí)別過(guò)濾線上環(huán)境里warn和error會(huì)高亮顯示一眼就能抓到重點(diǎn)。你可能會(huì)問(wèn)console.info()和console.log()的輸出樣式看起來(lái)幾乎一樣有必要區(qū)分嗎有。DevTools 的日志級(jí)別不僅僅影響顯示樣式還會(huì)影響性能監(jiān)控、錯(cuò)誤上報(bào)工具的過(guò)濾邏輯。很多團(tuán)隊(duì)的錯(cuò)誤監(jiān)控腳本會(huì)自動(dòng)捕獲console.error()的輸出如果你所有日志都一律用log后續(xù)想按級(jí)別篩數(shù)據(jù)就無(wú)從下手了。一個(gè)小坑console.debug()輸出在默認(rèn)情況下是不顯示的必須把日志級(jí)別切到 Verbose 才能看到。如果你在調(diào)試時(shí)“明明寫了debug卻找不到輸出”先別查代碼檢查一下控制臺(tái)的日志級(jí)別下拉菜單很大概率就是被過(guò)濾掉了。3.2 格式化輸出與 %c 樣式魔法console.log()支持類似 C 語(yǔ)言的格式化占位符常用的有%s字符串、%d整數(shù)、%o對(duì)象可展開(kāi)的 DOM 對(duì)象、%O對(duì)象普通 JS 對(duì)象。比如console.log(%s %d %s, 訂單編號(hào), 1024, 已支付)這個(gè)寫法的優(yōu)勢(shì)在于打印結(jié)構(gòu)復(fù)雜的字符串時(shí)不需要做一堆變量拼接讀起來(lái)也干凈。不過(guò)我想重點(diǎn)說(shuō)的是%c占位符它后面的字符串會(huì)被當(dāng)成 CSS 樣式應(yīng)用到整條日志上console.log(%c訂單創(chuàng)建失敗, color: #fff; background: #e74c3c; padding: 4px 8px; border-radius: 4px; font-size: 14px;)這條日志打印出來(lái)是白字紅底的徽章樣式在大量日志輸出里極其醒目。我在團(tuán)隊(duì)的調(diào)試規(guī)范里推薦過(guò)這種做法錯(cuò)誤統(tǒng)一用紅底白字%c前綴警告用黃底黑字普通日志不加樣式。配合日志級(jí)別過(guò)濾基本上不用盯著屏幕找半天。3.3 console.table 與 console.dir從對(duì)象到表格console.table()是我最常用的輸出工具之一。當(dāng)你有一組結(jié)構(gòu)相似的對(duì)象時(shí)用table打印出來(lái)是一個(gè)可排序的表格視覺(jué)上比一堆折起來(lái)的大對(duì)象清晰太多。比如console.table([ { name: 張三, age: 24, city: 上海 }, { name: 李四, age: 30, city: 北京 } ])如果對(duì)象里有大量不需要展示的字段還可以傳第二個(gè)參數(shù)指定列console.table(list, [name, age])console.dir()則是把對(duì)象以樹(shù)形結(jié)構(gòu)展開(kāi)顯示。最常見(jiàn)的用法是打印 DOM 元素console.log(document.body)顯示的是 HTML 標(biāo)簽結(jié)構(gòu)而console.dir(document.body)顯示的是這個(gè)元素的屬性和方法列表包括clientWidth、scrollHeight、dataset這些你需要的信息。想快速了解一個(gè) DOM 節(jié)點(diǎn)有什么屬性時(shí)dir遠(yuǎn)比log好用。3.4 計(jì)時(shí)、分組、計(jì)數(shù)、斷言與堆棧這幾個(gè)方法比較“小而美”但每個(gè)都有明確的使用場(chǎng)景。console.time()和console.timeEnd()是一對(duì)計(jì)時(shí)器括號(hào)里的標(biāo)簽是同一個(gè)字符串時(shí)才會(huì)正確結(jié)束并打印耗時(shí)。比如console.time(數(shù)組排序耗時(shí)) arr.sort() console.timeEnd(數(shù)組排序耗時(shí))要注意time和timeEnd的標(biāo)簽必須完全一致拼寫錯(cuò)一點(diǎn)就會(huì)得到一條警告信息而無(wú)法正常輸出。標(biāo)簽重復(fù)使用時(shí)timeEnd會(huì)結(jié)束上一次未結(jié)束的同名計(jì)時(shí)器所以嵌套場(chǎng)景下盡量用語(yǔ)義化標(biāo)簽。console.count()用來(lái)統(tǒng)計(jì)同一段代碼的執(zhí)行次數(shù)適合確認(rèn)事件回調(diào)有沒(méi)有觸發(fā)、觸發(fā)了多少次。配合countReset()可以清零重新計(jì)數(shù)。console.group()和console.groupEnd()可以把一組日志折疊起來(lái)。業(yè)務(wù)邏輯比較復(fù)雜時(shí)把不同模塊的輸出歸組控制臺(tái)會(huì)清爽很多。groupCollapsed()則是默認(rèn)折疊的版本想看細(xì)節(jié)再點(diǎn)展開(kāi)大型項(xiàng)目里實(shí)測(cè)很好用。console.assert()會(huì)在條件為假時(shí)打印一條錯(cuò)誤日志相當(dāng)于“斷言”。我調(diào)試接口數(shù)據(jù)時(shí)經(jīng)常用它c(diǎn)onsole.assert(user.age 18, 用戶年齡必須大于18當(dāng)前值, user.age)條件滿足時(shí)什么都不打印條件不滿足時(shí)直接紅字報(bào)錯(cuò)寫臨時(shí)校驗(yàn)邏輯很方便。最后是console.trace()它會(huì)在控制臺(tái)打印當(dāng)前的調(diào)用堆棧。排查“這個(gè)函數(shù)到底是被誰(shuí)調(diào)進(jìn)來(lái)的”這類問(wèn)題時(shí)在可疑函數(shù)里加一行console.trace()就能看到完整的調(diào)用鏈路不用去 Sources 面板手動(dòng)打斷點(diǎn)。4. 命令行 API 里容易被人忽略的老牌工具debug、monitor、getEventListeners4.1 debug 與 monitor給第三方函數(shù)“插樁”debug()命令可以在指定函數(shù)上自動(dòng)設(shè)置一個(gè)斷點(diǎn)函數(shù)執(zhí)行時(shí)就會(huì)停在入口處。用法是傳入函數(shù)本身或函數(shù)名比如debug(fetch)這樣頁(yè)面任何代碼調(diào)用fetch時(shí)都會(huì)在fetch入口斷住你可以在 Sources 面板里一步步看參數(shù)、走邏輯。不想繼續(xù)就執(zhí)行undebug(fetch)移除斷點(diǎn)。這個(gè)功能最妙的地方在于不管目標(biāo)函數(shù)是你自己寫的還是第三方庫(kù)里的只要能在全局作用域訪問(wèn)到就能直接插樁。我曾經(jīng)用debug(HTMLElement.prototype.click)來(lái)排查一個(gè)“明明調(diào)用了 click 卻沒(méi)有觸發(fā)點(diǎn)擊事件”的問(wèn)題斷住之后直接看到調(diào)用方傳進(jìn)來(lái)的上下文問(wèn)題根源立刻就清楚了。monitor()和debug()類似但它是打印函數(shù)的每次調(diào)用參數(shù)和返回值而不是中斷執(zhí)行monitor(document.querySelector)之后每執(zhí)行一次document.querySelector(...)控制臺(tái)就會(huì)輸出一條記錄包含參數(shù)和返回結(jié)果。這種監(jiān)聽(tīng)方式對(duì)確認(rèn)“某個(gè)函數(shù)有沒(méi)有被調(diào)用、被調(diào)用了幾次、每次都傳了什么”非常有幫助尤其適合定位“某個(gè)接口被無(wú)限重復(fù)請(qǐng)求”這類性能問(wèn)題。用unmonitor()取消監(jiān)聽(tīng)。4.2 getEventListeners查看元素綁了哪些事件getEventListeners()返回指定元素上注冊(cè)的所有事件監(jiān)聽(tīng)器對(duì)象。比如選中一個(gè)按鈕后getEventListeners($0)輸出結(jié)果會(huì)按事件類型分組click字段下的數(shù)組里就是該事件注冊(cè)的所有處理函數(shù)。每個(gè)監(jiān)聽(tīng)器對(duì)象里還能看到useCapture、passive等屬性排查事件是冒泡觸發(fā)還是捕獲觸發(fā)時(shí)非常直觀。這個(gè)命令的典型使用場(chǎng)景是“頁(yè)面有個(gè)按鈕點(diǎn)了沒(méi)反應(yīng)”。很多新人會(huì)直接去代碼里搜a(bǔ)ddEventListener但如果你用的是第三方組件庫(kù)事件綁定可能發(fā)生在庫(kù)的內(nèi)部搜半天搜不到。直接在控制臺(tái)getEventListeners($0).click看一下數(shù)組里到底有幾個(gè)處理函數(shù)每個(gè)函數(shù)的源碼是什么一下子就鎖定了范圍。如果監(jiān)聽(tīng)器返回空對(duì)象說(shuō)明這個(gè)元素根本沒(méi)有綁定對(duì)應(yīng)事件問(wèn)題很可能出在事件委托或者別的元素上排查方向立刻就能調(diào)整。4.3 keys、values、copy、inspect、clear輔助操作一把梭keys()和values()分別返回對(duì)象的所有鍵名和鍵值數(shù)組。它們看起來(lái)和Object.keys()重復(fù)但妙處在于可以用在任意控制臺(tái)表達(dá)式上配合$_使用非常流暢const obj { name: test, level: 2 } keys(obj) values(obj)copy()會(huì)把內(nèi)容復(fù)制到系統(tǒng)剪貼板這個(gè)命令我要單獨(dú)夸一下。平時(shí)想把接口返回的大 JSON 復(fù)制到編輯器里手動(dòng)選中復(fù)制不僅費(fèi)勁還可能漏掉縮進(jìn)。直接copy(JSON.stringify(data, null, 2))然后去編輯器里粘貼格式完整、絕不丟內(nèi)容。配合fetch在控制臺(tái)里先獲取接口數(shù)據(jù)再用copy導(dǎo)出來(lái)整個(gè)鏈路不到五秒鐘。inspect()會(huì)跳轉(zhuǎn)到 Elements 面板并選中傳入的 DOM 元素。比如從一堆匹配div中篩選出第一個(gè)想看看它在頁(yè)面上的實(shí)際位置inspect($(div))clear()清空控制臺(tái)輸出。需要注意它和console.clear()的區(qū)別console.clear()是 Console API可以在代碼里調(diào)用clear()是命令行 API只能在控制臺(tái)交互里執(zhí)行。兩者效果一樣但頁(yè)面代碼里沒(méi)有clear()這個(gè)函數(shù)用錯(cuò)了會(huì)報(bào)錯(cuò)。5. 幾個(gè)真實(shí)的調(diào)試場(chǎng)景從找事件到查性能瓶頸5.1 場(chǎng)景按鈕點(diǎn)擊沒(méi)反應(yīng)先查監(jiān)聽(tīng)器再?zèng)Q定是否打斷點(diǎn)有次接到一個(gè)反饋說(shuō)頁(yè)面上某個(gè)“提交訂單”按鈕點(diǎn)擊沒(méi)有任何反應(yīng)。這種問(wèn)題大多數(shù)時(shí)候不是按鈕沒(méi)綁定事件而是事件綁定了但執(zhí)行出錯(cuò)或者被某個(gè)外層元素?cái)r截了。我的排查鏈路是先在 Elements 面板選中按鈕切到 Console 執(zhí)行g(shù)etEventListeners($0)如果click數(shù)組是空的說(shuō)明按鈕自身沒(méi)有綁定事件可能事件在父級(jí)委托或者按鈕被一層遮罩蓋住、壓根點(diǎn)不到。如果click數(shù)組里有多個(gè)處理函數(shù)逐個(gè)看函數(shù)源碼找到可疑的那一個(gè)然后debug($0.__clickHandler)這樣我就能在點(diǎn)擊按鈕時(shí)停在對(duì)應(yīng)函數(shù)入口按步執(zhí)行看哪一行拋異常。整套流程下來(lái)從發(fā)現(xiàn)問(wèn)題到鎖定根因通常不會(huì)超過(guò)三分鐘。5.2 場(chǎng)景用一個(gè)函數(shù)找出頁(yè)面里的重復(fù)事件綁定有次排查一個(gè)性能問(wèn)題發(fā)現(xiàn)某個(gè)列表項(xiàng)的點(diǎn)擊事件執(zhí)行次數(shù)成倍增長(zhǎng)懷疑是事件被重復(fù)綁定了。直接在控制臺(tái)里寫一個(gè)小函數(shù)遍歷關(guān)鍵節(jié)點(diǎn)$$(.list-item).map(item ({ text: item.textContent.slice(0, 10), listeners: getEventListeners(item).click?.length || 0 }))$$()拿到所有列表項(xiàng)getEventListeners()統(tǒng)計(jì)每個(gè)項(xiàng)綁定的 click 監(jiān)聽(tīng)器數(shù)量。輸出的表格一眼就能看出哪些項(xiàng)綁定了多個(gè)監(jiān)聽(tīng)器順著那段代碼去找重復(fù)綁定的地方就非?？炝?。這種組合拳是控制臺(tái)命令的真正價(jià)值單個(gè)命令只能幫你做一件事組合起來(lái)能幫你快速做結(jié)構(gòu)化排查。5.3 場(chǎng)景監(jiān)控異步函數(shù)的調(diào)用頻率和參數(shù)另一個(gè)常見(jiàn)需求是“某個(gè)接口好像被頻繁調(diào)用每次參數(shù)都不一樣”。直接打斷點(diǎn)太煩因?yàn)榻涌诿棵肟赡苷{(diào)用幾十次。這時(shí)候monitor()就派上用場(chǎng)了monitor(fetch)然后什么都不用做正常操作頁(yè)面控制臺(tái)會(huì)持續(xù)輸出每次fetch的調(diào)用參數(shù)和返回值。打開(kāi)控制臺(tái)觀察輸出頻率馬上就能判斷接口是不是在循環(huán)里被調(diào)用。如果是某個(gè)特定函數(shù)導(dǎo)致的可以換成monitor(axios.post)或者直接監(jiān)聽(tīng)自定義業(yè)務(wù)函數(shù)。這種方法不侵入代碼、不打斷運(yùn)行流程非常適合線上環(huán)境的即時(shí)排查。5.4 場(chǎng)景計(jì)算一段渲染邏輯的實(shí)際耗時(shí)性能優(yōu)化時(shí)console.time()是最直接的計(jì)時(shí)手段。但要注意在控制臺(tái)里使用它和在代碼里使用有一點(diǎn)區(qū)別控制臺(tái)本身是異步執(zhí)行的可能無(wú)法捕捉到瀏覽器渲染管線之后的完整時(shí)間。如果需要更精確的數(shù)據(jù)建議配合performance.now()const start performance.now() // 在控制臺(tái)手動(dòng)觸發(fā)一段邏輯 console.log(耗時(shí), performance.now() - start, ms)這種原始的時(shí)間戳方式更適合控制臺(tái)交互場(chǎng)景因?yàn)樗灰蕾嘽onsole.time()內(nèi)部的事件循環(huán)機(jī)制結(jié)果更可靠。特別是在對(duì)比“兩種寫法哪種更快”的時(shí)候直接在控制臺(tái)跑幾輪、算平均值效果比憑感覺(jué)判斷好得多。6. 團(tuán)隊(duì)項(xiàng)目里關(guān)于 console 的幾個(gè)實(shí)踐問(wèn)題6.1 把 console.log 從臨時(shí)工具變成團(tuán)隊(duì)規(guī)范很多項(xiàng)目里的console.log是臨時(shí)調(diào)試隨手寫的上線時(shí)要么忘記刪要么全刪掉下一次排查問(wèn)題時(shí)又到處亂加。我見(jiàn)過(guò)比較成熟的團(tuán)隊(duì)會(huì)定一套簡(jiǎn)單的打印規(guī)范業(yè)務(wù)入口和出口用console.info異常用console.error性能耗時(shí)統(tǒng)一用performance的標(biāo)記然后配合console.group把同一模塊的日志歸組。這樣開(kāi)發(fā)環(huán)境和線上排查都舒服很多。另外我強(qiáng)烈建議在團(tuán)隊(duì)調(diào)試規(guī)范里引入%c樣式前綴。比如所有組件庫(kù)內(nèi)部調(diào)試日志統(tǒng)一用藍(lán)色前綴[Lib]業(yè)務(wù)日志用綠色前綴[Biz]錯(cuò)誤日志用紅底白字。這樣混合輸出的時(shí)候掃一眼顏色就能判斷日志屬于哪個(gè)體系不用每條都展開(kāi)看。成本極低收益非常直接。6.2 生產(chǎn)環(huán)境還能不能留著 console 輸出這是團(tuán)隊(duì)項(xiàng)目里繞不開(kāi)的問(wèn)題。我的觀點(diǎn)是不是所有console都要?jiǎng)h而是要看輸出的內(nèi)容是否涉及敏感數(shù)據(jù)。像接口請(qǐng)求參數(shù)、用戶信息、內(nèi)部錯(cuò)誤對(duì)象這些在任何環(huán)境下都不應(yīng)該打印。對(duì)于無(wú)害的結(jié)構(gòu)化日志如果開(kāi)發(fā)環(huán)境已經(jīng)夠用線上可以保留但要控制級(jí)別和數(shù)量避免日志量大到影響性能。如果公司項(xiàng)目里希望構(gòu)建產(chǎn)物完全去掉console可以借助構(gòu)建工具的配置。比如在打包壓縮階段把 console 相關(guān)語(yǔ)句移除配置思路是按環(huán)境區(qū)分只有生產(chǎn)環(huán)境才開(kāi)啟移除。需要注意移除console不僅僅是刪幾行代碼的問(wèn)題如果代碼里存在依賴console返回值或者把console傳給其他函數(shù)的寫法暴力移除可能導(dǎo)致運(yùn)行時(shí)報(bào)錯(cuò)。所以在做全局清理前先檢索一下項(xiàng)目里的console用法確認(rèn)都是獨(dú)立調(diào)用再去配置清理規(guī)則。6.3 用控制臺(tái)給前端函數(shù)做“單測(cè)”和渲染驗(yàn)證最后分享一個(gè)日常工作里的小玩法在控制臺(tái)里臨時(shí)粘貼一個(gè)函數(shù)定義然后立刻調(diào)用驗(yàn)證。比如我急著確認(rèn)某個(gè)時(shí)間格式化函數(shù)在不同邊界下是否正常function formatTime(t) { return t 10 ? 0 t : String(t) } [0, 5, 9, 10, 23].map(formatTime)控制臺(tái)直接輸出結(jié)果比反復(fù)刷新頁(yè)面、點(diǎn)擊操作要快得多。如果驗(yàn)證的是組件渲染邏輯可以先在控制臺(tái)改一個(gè)元素的關(guān)鍵樣式或文本再?zèng)Q定是不是要落代碼。這種“用小函數(shù)快速驗(yàn)證邏輯、再遷移到項(xiàng)目里”的做法能明顯減少提交代碼后發(fā)現(xiàn)低級(jí) bug 的頻率。控制臺(tái)本質(zhì)上是瀏覽器自帶的一個(gè) JavaScript 運(yùn)行時(shí)用來(lái)做臨時(shí)實(shí)驗(yàn)、邊界值測(cè)試、數(shù)據(jù)篩選體驗(yàn)完全不輸給本地寫腳本跑一遍。