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

核心要點(diǎn)

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

跳出舒適區(qū)

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

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

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

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

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

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

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

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

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

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

格式化日志

使用以百分號開頭的格式說明符，可以以不同格式記錄特定值：

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

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

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

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

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

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

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

分組日志

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

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

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

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

日志過濾

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

其他有用的控制臺方法

<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()方法可以測量腳本執(zhí)行時間：

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)容和類型，<code>console.dirxml()顯示節(jié)點(diǎn)的XML表示，<code>console.table()以可排序表格顯示JSON數(shù)據(jù)。

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

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

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

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

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

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

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

控制臺還提供許多便捷方法和快捷方式：

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

從控制臺到Sources面板

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

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

命令菜單(Ctrl Shift P或Cmd Shift P)允許通過鍵盤訪問所有開發(fā)者工具功能。

代碼片段

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

覆蓋

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

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

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

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

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

后續(xù)步驟

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

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

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

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