使用Chrome作为开发环境的11个技巧。
因此，出于某种原因，您决定在开发时专注于Chrome。您打开开发人员工具并开始调试代码。
有时，您打开控制台以查看程序输出，或者打开Elements选项卡以检查DOM元素的CSS样式。
您真的很擅长Chrome DevTools吗？实际上，开发人员工具具有许多使生活更轻松的强大功能，但很少有人了解它们。
我将告诉您最有用的信息。
让我们从查看命令菜单开始。Chrome中的命令菜单类似于Linux中的命令外壳。在其中，您可以编写命令来控制Chrome。
打开Chrome开发者工具。要访问命令菜单，请使用热键：
- Windows：Ctrl + Shift + P
- macOS：Cmd + Shift + P
您也可以通过图形界面打开它，如下所示：
在此区域中，您可以看到一长串命令，这些命令使您可以访问许多有用的功能。
进阶萤幕撷取功能
您必须经常拍摄屏幕一部分的屏幕截图，并且我毫不怀疑为此会在您的计算机上安装了方便的程序。他们可以：
- 拍摄整个页面的屏幕截图，包括视口之外的内容？
- 抓取单个DOM元素的内容？
这通常是必需的，但是用于创建屏幕截图的大多数系统工具无法应对这些任务。幸运的是，我们有专用的Chrome命令来截取这样的屏幕截图。
他们来了：
- 屏幕截图捕获完整尺寸的屏幕截图
- 屏幕截图捕获节点屏幕截图
例
打开任何网页，例如在Medium：medium.com/tag/javascript上最受欢迎的JavaScript文章。
打开命令菜单并运行命令
Screenshot Capture full size screenshot。
我们完整地拍摄了整个当前页面的快照
原始屏幕截图的质量很好，但是在这里我上传了压缩图像以节省带宽。
如果要截取DOM元素的屏幕快照，则可以使用系统工具，但是它们将无法完美地捕获该元素。Chrome为此提供了专用命令
Capture node screenshot。
首先打开“元素”选项卡，然后选择所需的元素。然后运行命令。
结果如下：
在控制台中使用上一次操作的结果
我们经常在控制台中调试代码。假设您想知道如何在JavaScript中反转字符串。您正在Internet上寻找所需的信息，并且遇到了这段代码。 是的，此代码使行反向。但是你还没有搞清楚是怎么工作的方法，，和什么样的结果给了他们每个人。您可以通过编写如下代码逐步完成此代码： 现在，我们知道每个方法返回的值。 但是为什么要写那么多？在这么长的记录中容易出错，也很难理解。让我告诉你一个秘密：控制台中有一个不可思议的变量，用于存储上次操作的结果。
'abcde'.split('').reverse().join('')
split()reverse()join()
$_
$_是一个特殊变量，其值始终等于控制台中上一次执行的操作的结果。这个技巧使调试变得容易得多。
重新发送XHR请求
在前端项目中，您通常需要使用XHR发送请求以从服务器接收数据。如果我需要重新发送请求怎么办？
没有经验的开发人员刷新页面，但这很不方便。在Chrome浏览器中，我们可以直接在“网络”标签中调试代码。
- 打开网络选项卡。
- 按下XHR按钮。
- 选择要重新发送的XHR请求。
- 从上下文菜单中选择“重放XHR”以重放请求。
这是一个动画示例：
跟踪页面加载状态
页面完全加载可能需要十秒钟以上的时间。在这种情况下，您需要在每个单独的时间控制页面加载过程。
在Chrome DevTools中，您可以通过选中
Capture Screenshots“网络”标签旁边的框来获取页面加载时的屏幕截图。
选择屏幕快照以查看有关相应网络请求的信息。这种可视化效果将使您更好地了解在特定时间点发送到服务器的网络请求。
复制变量
您知道如何将JavaScript变量的值复制到剪贴板吗？
这似乎是不可能完成的任务，但是Chrome提供了一种特殊的功能来解决它
copy。
ECMAScript不包含复制功能的定义，它是Chrome功能。它可用于将JavaScript变量的值复制到剪贴板。
将图像复制为带有“ data：”前缀的URI
有两种方法可以将图像插入页面：您可以链接到外部文件，也可以使用数据嵌入图像：URL。
数据：URL（前缀URL
data:）是一种将小文件作为嵌入式元素嵌入文档中的方案，它以前被称为“数据：URI”，但是WHATWG删除了该名称。
将小图像直接嵌入到数据中：URL方案减少了对服务器的HTTP请求数量，从而使页面加载速度更快。
如何在Chrome中执行此操作？
观看动画：
将对象数组输出到表
假设我们有一个对象数组：
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]
在控制台中很难感知到此类信息。而且，如果数组较长且包含更多复杂元素，那么迷失在数组中甚至会更容易。
幸运的是，Chrome具有将对象数组输出到表的功能。
这将对您有用，而且不止一次。
在“元素”选项卡上拖动
有时您需要在页面上移动一些DOM元素以测试用户界面。在“元素”选项卡上，可以将任何HTML元素拖到代码中的任何位置：
在本示例中，我在“元素”选项卡上拖动了一个元素，其在网页上的位置也立即更改。
引用控制台中当前选择的项目
$0 是另一个魔术变量，包含在“元素”选项卡中选择的元素。
激活CSS伪类
伪类使您不仅可以根据元素在文档树中的位置来为其设置样式，还可以根据外部因素（例如浏览历史记录（例如：访问），内容状态（例如：以某种形式检查），指针位置）来设置样式。鼠标（例如：： hover伪类将元素悬停在元素上时会更改其样式）。
可以为一个元素编写多个伪类。为了更轻松地测试样式，可以直接从“元素”选项卡激活伪类。
例
查看页面代码：
<!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>我们在浏览器中打开页面，在“元素”选项卡中检查伪类的工作方式，并在必要时进行更改。
隐藏项目的热键
调试CSS样式时，通常需要隐藏一个元素。Chrome可以快速完成此操作：您只需选择一个项目，然后按键
H。
在键盘上按H键
此操作将样式应用于元素
visibility: hidden !important;。
将DOM元素存储为全局临时变量
如果我们想在控制台中快速引用一个DOM元素，我们可以这样做：
- 选择一个项目。
- 用鼠标右键打开上下文菜单。
- 选择“存储为全局变量”。
