超越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中文网其他相关文章！