每个标准的Web浏览器通常都提供了开发者工具来调试Web应用程序。例如，大多数浏览器都有内置的JavaScript调试器、DOM树检查器、网络监视器和网络速度模拟器。流行的Google Chrome浏览器提供了众所周知的DevTools工具包，其中包含以提高生产力为重点的Web应用程序调试功能。除了本机Web应用程序调试外，您还可以在Chrome上调试TypeScript、Deno、Node.js和React Native应用程序，这要归功于DevTools协议。
Web应用程序调试过程通常涉及使用浏览器控制台、调试器界面和DOM检查器。Web开发人员经常使用浏览器控制台来查看与调试相关的日志值。此外，他们还使用控制台执行快速的代码片段进行调试和实验。为了帮助在控制台上高效编写代码片段，Chrome提供了几个以提高生产力为重点的快捷方式，例如Bash解释器，它可以提高GNU/Linux终端上的开发人员生产力。我们可以使用这些Chrome控制台实用程序快捷方式来加快与Web应用程序调试相关的任务（例如，在检查器中获取所选的DOM元素）。这些控制台实用程序仅在浏览器控制台中工作，因此您不必担心Web应用程序源文件中的命名冲突。
在本文中，我将解释您可以在Chrome中使用的几个控制台实用程序，以更快地调试Web应用程序。在Chrome控制台中使用这些快捷方式的代码片段，以避免耗时的鼠标点击或在调试活动中输入冗长的代码。
流行的JQuery库提供了一种基于CSS选择器的更高效的方式来选择DOM元素，与传统的Web API相比。如果您需要访问某些DOM节点属性或在控制台上搜索某些DOM节点，这将变得很容易，如果您的Web应用程序使用JQuery，您可以使用$语法，因为JQuery已经加载，但是如果您不使用JQuery呢？
即使您不使用JQuery库，Chrome也允许您在控制台上使用$语法。在Chrome控制台上，$作为document.querySelector方法的快捷方式，让您可以立即查询一个元素：
$('.item-01')
上面的代码片段打印具有item-01类名的第一个DOM节点。类似地，$$快捷方式触发document.querySelectorAll方法并返回多个元素。例如，以下代码片段打印所有<h1>元素：
$$('h1')
您还可以根据XPath表达式选择DOM元素，如下所示：
$x('/html/body/div')
每个浏览器和JavaScript运行时（如Node.js）都为开发人员提供了一个功能齐全的控制台API，供他们在Web应用程序代码库中用于调试目的。当出现意外问题时，您可以在浏览器控制台上记录一些消息。然后，您可以分析它们以诊断开发人员或用户测试期间的关键问题。console.log、console.error和console.warn是常用的控制台日志记录方法。
Chrome为几个控制台API提供了仅限控制台的快捷函数名称，以提高调试生产力。dir函数触发console.dir API方法，因此您可以使用它来打印对象中的键值数据。当控制台默认打印带有HTML代码的元素时，这是一种很好的机制来打印DOM元素属性：
类似地，您可以使用table函数来使用console.table方法。此外，clear函数调用console.clear方法并清除浏览器控制台。
控制台API还提供了两种非标准方法来启动和停止性能分析器。Chrome提供了profile和profileEnd控制台函数快捷方式来调用这些特定于分析器的控制台API方法，如下所示：
作为一种现代通用编程语言，JavaScript提供了一个功能齐全的、预加载的标准库，用于几乎所有开发需求。JavaScript通过JSON样式的对象概念为您提供了一种高效处理对象的方式，并提供了内置的JSON序列化/反序列化器。每个Web开发人员都知道Object.keys和Object.values方法，这些方法帮助我们从JavaScript对象中提取键和值。Chrome控制台实用程序实现了keys和values内置函数快捷方式，并允许您在调试活动中高效使用这些经常使用的对象API方法。
假设我们需要分别检查以下对象的键和值：
const doc = {
id: 100,
title: 'My document',
size: 'A4',
authorId: 100
}
您可以使用keys函数仅打印上述对象的键，如下所示：
values函数提供了一种高效的方式来打印特定对象的所有值，如下所示：
以下故事解释了作为经验丰富的Web开发人员应该了解的新浏览器API：
现代Web应用程序调试过程通常涉及使用断点和DOM检查。断点帮助您调试JavaScript，DOM检查帮助您分析HTML并改进基于CSS的样式。要设置断点，我们可以使用DevTools界面或debugger JavaScript语句。Chrome控制台还提供了设置断点的快捷方式。
假设以下函数已加载并在当前控制台上下文中可用：
function genArr(n) {
let sq = n ** 2;
sq = Math.min(sq, 1000);
let arr = [...new Array(sq).keys()];
return arr;
}
假设您需要在genArr函数内设置断点。您可以通过在控制台上调用debug函数来激活自动断点：
debug(genArr)
然后，DevTools将自动为genArr函数添加断点：
现在，当执行genArr函数时，自动断点会停止代码执行。可以使用以下函数调用来停用自动断点：
undebug(genArr)
上述方法允许您设置断点和浏览函数。如果您需要在不激活自动断点的情况下检查函数源代码怎么办？inspect函数可以帮助您导航到特定函数。它还会在控制台上打印特定函数的源代码，如下所示：
您可以使用相同的函数来检查DOM元素。例如，以下代码片段开始检查当前活动元素：
inspect(document.activeElement)
在进行调试任务时，有几种方法可以检测函数调用。一些开发人员通常手动使用console.log语句，通过在控制台上打印一些值来检测函数调用。同时，一些开发人员设置断点。这些方法都有一些缺点。如果特定函数被调用了数千次，使用断点将会非常耗时。另一方面，如果您希望使用基于console.log的方法，您必须手动编辑源文件。
Chrome控制台实用程序提供了monitor和unmonitor内置控制台函数，以在不使用断点或手动编辑源文件的情况下高效监视函数调用。
假设您需要监视先前的genArr函数执行：
function genArr(n) {
let sq = n ** 2;
sq = Math.min(sq, 1000);
let arr = [...new Array(sq).keys()];
return arr;
}
首先，通过以下方式激活特定函数的监视功能：
monitor(genArr)
现在，每次调用genArr函数时，都会监视并在控制台上打印传入的参数：
可以使用以下代码片段为genArr函数停用函数监视：
unmonitor(genArr)
DevTools提供了几种检测浏览器事件的方法。它允许您设置事件断点，当特定事件被触发时，自动设置源代码断点。此外，它还提供了一个功能，可以浏览附加到window对象的全局事件。如果您想直接从控制台检测和浏览Web应用程序事件，该怎么办呢？
Chrome控制台工具提供了内置函数getEventListeners，用于查找特定对象的已注册事件侦听器。例如，以下代码片段打印出附加到当前活动DOM元素对象的所有事件侦听器：
getEventListeners(document.activeElement)
上述实用函数帮助我们浏览已注册的事件侦听器，但是如果不使用DevTools GUI中基于GUI的事件侦听器断点功能，我们如何知道何时触发特定事件呢？
monitorEvents和unmonitorEvents快捷函数允许我们基于捕获事件的JavaScript对象来监视浏览器事件。
看下面的代码片段：
monitorEvents(document.activeElement, 'click')
一旦您在控制台上输入上述代码片段，您就可以在控制台上找到当前活动元素的所有点击事件：
可以使用以下代码片段停用事件监视：
unmonitorEvents(document.activeElement)
每个命令行解释器通常都提供各种以提高开发任务效率为重点的快捷方式。例如，Bash解释器提供了$?特殊参数，用于获取上一个命令进程的退出代码。类似地，Chrome控制台解释器为Web应用程序调试任务提供了几个简写变量。
$_简写变量返回在控制台上执行的上一个表达式的返回值。
看下面的例子：
之前，我们使用了document.activeElement属性和$查询选择器简写来引用一些DOM元素。然而，开发人员倾向于在调试过程中在元素标签（检查器）中选择DOM树元素，而不改变实际呈现的DOM的焦点。因此，如果有一个简写变量可以获取检查器中当前选定的DOM元素，我们就可以在控制台上高效地使用它，而不使用document.activeElement或基于$的选择器语法。
Chrome允许您使用$0简写变量引用所选的检查器中的DOM元素。假设您需要通过控制台更改所选DOM元素的数据属性。您可以按照以下预览中所示的方式进行操作：
让我透露本文的额外调试提示。您可以使用copy函数将反序列化的JavaScript对象复制到系统剪贴板中。
看下面的示例代码片段，它将一个示例JavaScript对象复制到系统剪贴板中：
const doc = {
id: 100,
title: 'My document',
size: 'A4',
authorId: 100
};
copy(doc)
