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

核心要點

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

跳出舒適區(qū)

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

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

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

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

進階控制臺技巧

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

進行調(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：作為浮點數(shù)記錄
• <code>%o：作為可展開的DOM元素記錄
• <code>%O：作為可展開的JavaScript對象記錄

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

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

還可以進行類型轉換：

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()默認不展開分組：

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()，可以利用控制臺側邊欄或級別選擇器過濾消息，方便在大量日誌中查找特定信息。

其他有用的控制臺方法

<code>console.count()和<code>console.countReset()方法可以統(tǒng)計方法調(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é)點的XML表示，<code>console.table()以可排序表格顯示JSON數(shù)據(jù)。

用實時表達式替換日誌

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

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

實時表達式持久有效，與特定域名或站點無關。調(diào)試完成後應將其移除，避免錯誤。

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

使用控制臺操作當前文檔

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

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

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

從控制臺到Sources面板

控制臺的單行環(huán)境限制了代碼編寫。可以使用Shift Enter編寫多行腳本。 “Sources”面板提供更強大的腳本編輯環(huán)境。

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

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

代碼片段

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

覆蓋

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

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

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

Devtools for VS Code擴展程序

Devtools for VS Code擴展程序將Visual Studio Code與瀏覽器開發(fā)者工具集成，結合強大的編輯功能和實時站點調(diào)試。

後續(xù)步驟

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

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

（此處省略了原文中FAQs部分，因為這部分內(nèi)容與文章主旨關係不大，且篇幅較長，保留會使偽原創(chuàng)後的文章顯得冗餘。）

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