瀏覽器開(kāi)發(fā)者工具遠(yuǎn)不止簡(jiǎn)單的<code>console.log()，其強(qiáng)大的功能能顯著提升開(kāi)發(fā)效率。本文將深入探討一些鮮為人知的實(shí)用技巧，助您優(yōu)化工作流程。

核心要點(diǎn)

• 利用控制臺(tái)的實(shí)時(shí)表達(dá)式實(shí)時(shí)監(jiān)控腳本變化，無(wú)需在日志中查找特定更改。
• 使用控制臺(tái)直接操作當(dāng)前文檔，使用<code>$_獲取上次命令結(jié)果，<code><code>到
訪問(wèn)已檢查元素的堆棧。
從控制臺(tái)切換到“Sources”面板，獲得更強(qiáng)大的腳本編輯環(huán)境，支持多行腳本和與網(wǎng)頁(yè)的復(fù)雜交互。
使用快捷鍵（如Ctrl Shift P）通過(guò)命令菜單快速訪問(wèn)開(kāi)發(fā)者工具，簡(jiǎn)化調(diào)試過(guò)程。
通過(guò)設(shè)置工作區(qū)，將瀏覽器開(kāi)發(fā)者工具中所做的更改直接同步到源代碼，實(shí)現(xiàn)調(diào)試和開(kāi)發(fā)的無(wú)縫集成。
通過(guò)Devtools for VS Code擴(kuò)展程序?qū)isual Studio Code與瀏覽器開(kāi)發(fā)者工具集成，結(jié)合強(qiáng)大的編輯功能和實(shí)時(shí)站點(diǎn)調(diào)試。

跳出舒適區(qū)

<code>console.log()開(kāi)發(fā)者往往習(xí)慣于固定的工作流程，這可能會(huì)限制效率提升。常見(jiàn)的流程是：在編輯器中編寫(xiě)代碼，保存后切換到瀏覽器加載，然后使用開(kāi)發(fā)者工具調(diào)整CSS，進(jìn)行尺寸調(diào)整和移動(dòng)模擬測(cè)試。通過(guò)添加

語(yǔ)句進(jìn)行調(diào)試，密切關(guān)聯(lián)行號(hào)和調(diào)試信息。

這種方式效率低下且混亂。瀏覽器工具中充斥著不屬于最終產(chǎn)品的調(diào)試信息，不僅讓其他人難以理解，也給新手開(kāi)發(fā)者帶來(lái)困擾。我們僅使用了開(kāi)發(fā)者工具的一小部分功能，錯(cuò)失了提升效率的機(jī)會(huì)。

本文將介紹一些Chromium瀏覽器開(kāi)發(fā)者工具以及Visual Studio Code中的實(shí)用功能。首先，讓我們深入了解控制臺(tái)。

進(jìn)階控制臺(tái)技巧

<code>console.log(thing)我們習(xí)慣于在代碼中添加

進(jìn)行調(diào)試。但這有時(shí)效率不高，且原始格式的數(shù)據(jù)難以理解。

以下技巧可在GitHub獲取演示頁(yè)面，并在打開(kāi)開(kāi)發(fā)者工具的瀏覽器中查看。 （或在CodePen查看在線演示）

首先，在日志中添加花括號(hào)，不僅打印變量值，還顯示變量名，方便追蹤。

let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}

格式化日志

使用以百分號(hào)開(kāi)頭的格式說(shuō)明符，可以以不同格式記錄特定值：

• <code>%s：作為字符串記錄
• <code>%i或<code>%d：作為整數(shù)記錄
• <code>%f：作為浮點(diǎn)數(shù)記錄
• <code>%o：作為可展開(kāi)的DOM元素記錄
• <code>%O：作為可展開(kāi)的JavaScript對(duì)象記錄

可以混合使用這些說(shuō)明符，替換順序與參數(shù)順序一致：

let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}

還可以進(jìn)行類(lèi)型轉(zhuǎn)換：

console.log('%ix %s developer', 10, 'console');
// 10x console developer

<code>%c說(shuō)明符允許使用CSS樣式化日志消息：

console.log('%i', 12.34455241234324234); // 12

分組日志

使用<code>console.group()將日志分組，方便展開(kāi)和折疊：

console.log('%cPay attention to me','color:firebrick;font-size:40px')

可以嵌套分組，并使用<code>console.groupCollapsed()默認(rèn)不展開(kāi)分組：

const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);

日志過(guò)濾

使用<code>console.info()、<code>console.error()和<code>console.warn()，可以利用控制臺(tái)側(cè)邊欄或級(jí)別選擇器過(guò)濾消息，方便在大量日志中查找特定信息。

其他有用的控制臺(tái)方法

<code>console.count()和<code>console.countReset()方法可以統(tǒng)計(jì)方法調(diào)用或功能執(zhí)行次數(shù)：

const extendedlabel = 'The Millenium Falcon Crew extended';
const meat = 'Humanoids';
const metal = 'Droids';
console.group(extendedlabel);
console.groupCollapsed(meat);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(meat);
console.group(metal);
console.log('R2D2');
console.log('C3PO');
console.groupEnd(metal);
console.groupEnd(extendedlabel);

<code>console.time()方法可以測(cè)量腳本執(zhí)行時(shí)間：

console.count('Chocula'); // Chocula: 1
console.count(); // default: 1
console.count('Chocula'); // Chocula: 2
console.countReset('Chocula'); 
console.count(); // default: 2 
console.count(); // default: 3
console.count('Chocula'); // Chocula: 1

<code>console.dir()顯示數(shù)據(jù)內(nèi)容和類(lèi)型，<code>console.dirxml()顯示節(jié)點(diǎn)的XML表示，<code>console.table()以可排序表格顯示JSON數(shù)據(jù)。

用實(shí)時(shí)表達(dá)式替換日志

<code>console.log()監(jiān)控頻繁變化的值效率低下。實(shí)時(shí)表達(dá)式可以解決這個(gè)問(wèn)題。啟用開(kāi)發(fā)者工具中的眼睛按鈕，輸入有效的JavaScript表達(dá)式，其值將顯示在控制臺(tái)上方。

例如，輸入<code>document.activeElement，表達(dá)式將顯示頁(yè)面中當(dāng)前激活的元素。

實(shí)時(shí)表達(dá)式持久有效，與特定域名或站點(diǎn)無(wú)關(guān)。調(diào)試完成后應(yīng)將其移除，避免錯(cuò)誤。

實(shí)時(shí)表達(dá)式非常適合監(jiān)控腳本數(shù)據(jù)變化，尤其適用于鼠標(biāo)位置等頻繁變化的值。

使用控制臺(tái)操作當(dāng)前文檔

控制臺(tái)是一個(gè)REPL，允許編寫(xiě)和執(zhí)行JavaScript，并使用自動(dòng)完成功能了解當(dāng)前文檔的可用方法和屬性。

控制臺(tái)還提供許多便捷方法和快捷方式：

• <code>$_：存儲(chǔ)上次命令的結(jié)果。
• <code><code>到
：最近檢查的元素堆棧。
• <code>$()<code>$$()和<code>document.querySelector()：分別簡(jiǎn)寫(xiě)<code>document.querySelectorAll()和
。
• <code>$x()
：使用XPath選擇DOM元素。
• <code>copy()
：將內(nèi)容復(fù)制到剪貼板。
• <code>clear()
：清除控制臺(tái)。
• <code>getEventListeners(node)
：列出節(jié)點(diǎn)的所有事件監(jiān)聽(tīng)器。
• <code>monitorEvents(node, events)
：監(jiān)控和記錄節(jié)點(diǎn)上的事件。
• <code>monitor(method)
：在調(diào)用方法時(shí)創(chuàng)建日志項(xiàng)。

從控制臺(tái)到Sources面板

控制臺(tái)的單行環(huán)境限制了代碼編寫(xiě)?？梢允褂肧hift Enter編寫(xiě)多行腳本。 “Sources”面板提供更強(qiáng)大的腳本編輯環(huán)境。

開(kāi)發(fā)者工具命令菜單

命令菜單(Ctrl Shift P或Cmd Shift P)允許通過(guò)鍵盤(pán)訪問(wèn)所有開(kāi)發(fā)者工具功能。

代碼片段

代碼片段是保存與文檔交互的腳本的便捷方式。它們可以訪問(wèn)當(dāng)前打開(kāi)的瀏覽器文檔和控制臺(tái)的便捷方法。

覆蓋

覆蓋是遠(yuǎn)程文件的本地副本。瀏覽器開(kāi)發(fā)者工具會(huì)使用本地副本替換遠(yuǎn)程文件，方便編輯網(wǎng)站樣式表或進(jìn)行性能測(cè)試。

工作區(qū)：同步開(kāi)發(fā)和調(diào)試任務(wù)

工作區(qū)允許將項(xiàng)目文件夾添加到開(kāi)發(fā)者工具，實(shí)現(xiàn)開(kāi)發(fā)者工具與編輯器的同步。

Devtools for VS Code擴(kuò)展程序

Devtools for VS Code擴(kuò)展程序?qū)isual Studio Code與瀏覽器開(kāi)發(fā)者工具集成，結(jié)合強(qiáng)大的編輯功能和實(shí)時(shí)站點(diǎn)調(diào)試。

后續(xù)步驟

建議學(xué)習(xí)使用斷點(diǎn)調(diào)試，這是一種更有效的調(diào)試方法。

JavaScript調(diào)試技能常見(jiàn)問(wèn)題解答

（此處省略了原文中FAQs部分，因?yàn)檫@部分內(nèi)容與文章主旨關(guān)系不大，且篇幅較長(zhǎng)，保留會(huì)使偽原創(chuàng)后的文章顯得冗余。）

以上是超越console.log（） - 提高調(diào)試技能的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！