一般信息
您使用Chrome开发人员工具调试代码。
打开开发人员工具的命令
有时您会进入控制台以使用控制台的功能来检查程序输出的数据。有时，您需要查看“元素”面板以查看用于设置DOM元素样式的CSS。
控制台面板
但是您对Chrome开发者工具了解得很好吗？实际上，有许多功能强大但不为人所知的功能可以大大提高您的生产率。
在这里，我将讨论最有用的功能，希望您会发现它们有用。
1.菜单项运行命令
首先，我想简要介绍一下开发人员工具菜单项“运行命令”。Chrome的此菜单项就像Linux的外壳。它允许您输入命令来控制Chrome。
为了进入此菜单项，请打开开发人员工具，然后您可以立即使用适当的键盘快捷键：
- 在Windows上
Ctrl + Shift + P。 - 在MacOS-中
Cmd + Shift + P。
或者，您只需单击开发人员工具标题区域右侧的三个点，然后从出现的菜单中选择“运行命令”。
运行命令菜单项
之后，将打开命令面板，您可以在其中找到许多命令，这些命令使您可以执行许多有趣的事情。
命令面板
让我们讨论一下此面板中的一些命令。
2.用于创建屏幕截图的高级机制
Web开发人员有时需要截取屏幕一部分的屏幕截图。我相信您已经有一个非常方便的程序来解决此问题。以下是拍摄屏幕快照的一些典型任务：
- 拍摄整个页面的屏幕截图，甚至是浏览器窗口中不可见的部分。
- 捕获特定于特定DOM元素的屏幕区域的副本。
这些是常见的任务，但是使用各种屏幕截图软件并不容易完成。为了处理它们，我们可以使用上述运行命令菜单命令的功能。特别是，我们在谈论以下命令：
- 屏幕截图捕获完整尺寸的屏幕截图
- 屏幕截图捕获节点屏幕截图
▍例子
打开一个页面，例如最受欢迎的JavaScript内容的“中型”部分。
现在打开命令栏并在其中选择一个命令
Screenshot Capture full size screenshot。
截取整个页面的屏幕快照的命令
我们将截取整个页面的屏幕快照，该屏幕快照将转到downloads文件夹。
整个页面的屏幕截图
如您所见，图像非常高。为了方便起见，我在这里将其减少。实际上，这是一个高质量的图像。
同样，如果需要截取DOM元素的屏幕快照，则可以使用第三方程序，但是该第三方程序将不允许您获取与所需元素完全对应的图像。团队将帮助我们解决这个问题
Screenshot Capture node screenshot。
他们像这样使用它：首先，他们在“元素”面板中选择所需的元素，然后执行命令。
捕获与特定DOM元素相关联的屏幕区域的屏幕
截图这是在上一个动画图像中截取的屏幕截图的样子。
DOM元素截图
3.参考控制台中上一次操作的结果
控制台通常用于调试代码。想象一下，您需要学习如何使用JavaScript反转字符串。您搜索了Internet，发现了这段代码：
'abcde'.split('').reverse().join('')
您尝试在控制台中运行此代码，它似乎可以正常工作。
在控制台中检查代码
因此，此代码“改变了”这一行。然而，你感到困惑如何
split()，reverse()和方法的工作join()。您不知道它们在“翻转”生产线的中间阶段到底能做什么。因此，您决定逐步执行此代码。您从第一个方法开始，获取其结果，然后对该结果运行第二个方法，依此类推。
探索代码
完成这些实验后，很有可能确切了解原始代码的工作方式。
但是，以这种方式工作涉及许多不必要的动作。您可以在这里犯错，而且看起来都很混乱。为了改善这种情况，只要知道在开发人员工具控制台中可以使用“魔术”变量即可
$_，该变量允许您引用上一次执行的操作的结果。
使用$ _
如您所见，
$_这是一个特殊变量，其值始终等于控制台中最后执行的操作的结果。调试代码时，此变量可以很好地帮助您。
使用$ _的示例
4.重复发送XHR请求
在前端项目上工作时，通常需要使用XHR API向后端请求数据。如果您需要重新发送已经发送的XHR请求怎么办？
如果新手开发人员解决了此问题，则只需刷新页面即可。但是不断刷新页面以重新提交请求可能会非常耗时。实际上，您可以使用“网络”面板的工具来处理查询。
XHR请求重试命令
要重新执行已发送的XHR请求，请执行以下操作：
- 打开网络面板。
- 单击XHR按钮。
- 调用要重复的请求的上下文菜单。
- 从菜单中选择“重放XHR”。
这是上述步骤的动画示例。
XHR请求重试
5.监视页面加载
从此过程的开始到结束，页面完全加载可能需要十秒钟以上的时间。为了找出在页面加载过程中到底发生了什么，您可以组织对此过程的监视。
在Chrome开发者工具中，您可以通过在“网络”面板中设置“捕获屏幕截图”标志来在加载的不同时间获取页面的屏幕截图。
捕获屏幕快照标志并监视页面加载
通过单击屏幕快照，您可以查看在相应时间执行的请求。页面加载过程的可视化表示将使您比以前更准确地了解页面加载过程。
页面加载分析
6.复制JavaScript变量的内容
是否可以复制JavaScript变量的值以供以后使用该值？您可能似乎无法完成这样的任务，但是在Chrome控制台中，您可以使用特殊的命令
copy()，该命令允许您将变量的内容复制到剪贴板。
复制JS变量内容
ECMAScript标准中不提供此功能。借助Chrome，我们可以使用它。
7.将图像复制为数据URL
有两种方法可以处理网页上显示的图像。第一种方法是从外部源加载图像。第二种是以所谓的数据URL形式对图像进行编码。您可以在MDN上看到，数据URL是前缀为：data的URL。这些URL允许将小文件直接嵌入到文档中。在WHATWG停用该名称之前，它们一直被称为“数据URI”。
将小图像转换为数据URL并将其直接嵌入到页面代码中可减少页面加载时需要进行的HTTP请求的数量。结果，这可以加速页面加载。
如何使用Chrome将图片转换为数据网址？
下面是该过程的动画演示。
将图像复制为数据URL
8.方便地表示对象数组
假设我们有一个对象数组。例如-这样：
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]
让我们在控制台中显示它。
控制台中显示的对象数组
如您所见，以这种形式显示时，查看它并不是很方便。而且，如果这样的数组较长，并且其中包含的元素具有更复杂的结构，则处理起来将更加困难。
对我们来说幸运的是，Chrome具有一项特殊功能
table()，可让您格式化对象数组。
对象的格式化数组
此功能通常非常有用。
9.在“元素”面板中拖动对象
有时，在测试界面时，您需要更改页面中某些DOM元素的位置。为此，我们可以使用“元素”面板的功能，该功能可以在页面代码中移动任何HTML元素。
拖放元素
上面的动画显示了如何
<div>在“元素”面板中拖动元素以更改该元素在网页上的位置。
10.从控制台引用当前选择的项目
让我们谈谈可以在控制台中使用的另一个“魔术”变量。这是一个变量
$0。它允许从控制台访问“元素”面板中突出显示的元素。
用$ 0引用元素
11.探索伪类
在MDN上，您可以学习有关伪类的以下内容：
伪类不仅可以基于DOM树中的关系，而且还可以基于外部因素（例如访问历史（例如：访问过），内容状态（例如：在某些元素上选中））来对元素进行样式设置形状）或鼠标光标的位置（例如：悬停确定鼠标光标是否在元素上）。
对于元素，可以提供与各种伪类相关的样式。为了测试这些样式，可以直接从“元素”面板中操纵伪类。
管理伪类
▍例子
这是网页的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 150px;
}
div:hover{
color: red;
}
div:active{
color: blue;
}
div:focus{
color: brown;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
我们需要检查伪类的样式。为此，我们可以使用“元素”面板。
探索伪类样式
12.快速隐藏元素
调试页面样式时，通常需要隐藏一个元素。要尽快执行此操作，只需选择一个元素，然后按键盘上的一个键即可
H。
快速隐藏元素
这将为
visibility: hidden !important;相应的元素添加样式。
13.在临时全局变量中保存对DOM元素的引用
如果需要在控制台中快速获取对DOM元素的引用，则可以执行以下操作序列：
- 选择一个项目。
- 右键单击它以弹出上下文菜单。
- 从菜单中选择“存储为全局变量”命令。
将DOM元素引用存储为临时全局变量
您使用Chrome开发者工具的哪些鲜为人知的功能？
