超越console.log（） - 提高調試技能

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

核心要點

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

跳出舒適區

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

語句進行調試，密切關聯行號和調試信息。

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

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

進階控制台技巧

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

進行調試。但這有時效率不高，且原始格式的數據難以理解。

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

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

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

格式化日誌

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

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

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

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()方法可以統計方法調用或功能執行次數：

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

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

用實時表達式替換日誌

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

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

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

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

使用控制台操作當前文檔

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

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

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

從控制台到Sources面板

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

開發者工具命令菜單

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

代碼片段

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

覆蓋

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

工作區：同步開發和調試任務

工作區允許將項目文件夾添加到開發者工具，實現開發者工具與編輯器的同步。

Devtools for VS Code擴展程序

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

後續步驟

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

JavaScript調試技能常見問題解答

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

以上是超越console.log（） - 提高調試技能的詳細內容。更多資訊請關注PHP中文網其他相關文章！