原文地址：https://medium.com/javascript...
作者：Dornhoth

如果抉择 Chrome 作为开发环境，则必须晓得的 11 个技巧。

好的，当初因为某种原因，你最终抉择了 Chrome 为开发应用的浏览器。而后，你关上了开发者工具（ Developer Tools ）并开始调试代码。

有时你能够关上控制台面板（ Console panel ）来检查程序的输入，或者关上元素面板（ Elements panel ）来查看 DOM 元素的 CSS 代码。

然而你真的理解 Chrome 开发者工具（ DevTools ）吗？实际上，它提供了许多弱小但未知的性能，能够大大提高咱们的开发效率。

在这里，我将介绍最有用的性能，心愿对你有所帮忙。

在开始之前，我想介绍一下命令菜单（ Command menu ）。命令菜单对于 Chrome 就像 Shell 对于 Linux 一样。命令菜单容许你输出一些命令来操作 Chrome。

首先，咱们关上 Chrome 开发工具，而后用以下快捷方式关上命令菜单：

windows：Ctrl + Shift + PmacOS：Cmd + Shift + P

或者咱们能够单击上面的按钮将其关上：

而后咱们能够到命令面板，在这里咱们能够抉择各种命令来执行各种弱小的性能。

弱小的屏幕截图

捕获屏幕的一部分是一个十分常见的需要，并且我确定你以后的计算机上曾经具备十分不便的截图软件。然而，你能够实现以下工作吗？

截取网页上所有内容的屏幕快照，包含可视窗口中未呈现的所有内容
准确捕捉 DOM 元素的内容

这是两个常见的需要，然而应用操作系统附带的截屏工具并不能很容易地解决它们。此时，咱们能够应用命令来帮忙咱们实现这个需要。

对应的命令是:

Screenshot Capture full size screenshotScreenshot Capture node screenshot

例子

当初关上任何页面，例如，Medium 上的对于 JavaScript 的头条新闻页面。https://medium.com/tag/javascript

而后关上命令菜单并执行 Screenshot Capture full size screenshot

而后，咱们能够取得以后页面的残缺屏幕截图。

下面的原始图像十分清晰，但这里我上传了一个压缩图像，以节俭您的流量。

相似地，如果要截取 DOM 元素的屏幕快照，你能够应用零碎本人的屏幕截图工具，然而你不能精确地捕捉该元素。此时，您能够应用Capture node screenshot。

首先，在元素面板中抉择一个元素，而后运行命令。

这是精确的截屏后果:

在控制台中援用上一个操作的后果

咱们常常须要在控制台中调试代码。假如你想晓得如何在 JavaScript 中反转字符串，而后在网上搜寻相干信息并找到以下代码。

'abcde'.split('').reverse().join('')

好吧，下面的代码的确反转了字符串。然而你依然不了解split() reverse() join()办法的作用以及运行这些两头步骤的后果。所以当初你想要一步一步地执行下面的代码，你能够这样写:

好吧，在这些步骤之后，咱们的确晓得每个办法运行的返回值。

但这是十分多余的。它既容易出错，又难以了解。实际上，在控制台中，咱们能够应用神奇的变量$_来援用先前操作的后果。

$_是一个非凡的变量，它的值总是等于控制台中最初一次操作的后果。这种技术是调试代码的简便办法。

从新发送XHR申请

在咱们的前端我的项目中，咱们常常须要应用 XHR 向后端发出请求以获取数据。如果你想从新发送一个 XHR 申请，会怎么做呢?

对于老手，他可能会刷新页面，但这可能很麻烦。实际上，咱们能够间接在网络面板（ Network panel ）中进行调试。

关上网络面板
点击 XHR 按钮
抉择您要从新发送的 XHR 申请
重发 XHR

这是一个 gif 例子:

监控页面加载状态

页面从一开始就齐全加载可能须要 10 秒以上的工夫。咱们须要监控页面在不同期间是如何加载的。

在 Chrome 开发者工具中，咱们能够在网络面板下，抉择 Capture Screenshots 取得页面加载的截图。

单击每个屏幕截图，以显示相应工夫的网络申请。这种直观的演示将使你更好地理解每时每刻正在产生的网络申请。

复制变量

你能够将 JavaScript 变量的值复制到其余中央吗？
这仿佛是一个不可能实现的工作，但在 Chrome 中，有一个名为 copy 的函数能够帮忙你复制一个变量。

复制函数不是由 ECMAScript 定义的，而是由 Chrome 提供的。应用此函数，能够将 JavaScript 变量的值复制到剪贴板中。

将图像复制为 data URI

有两种办法能够解决页面上的图像，一种是通过内部资源链接加载，另一种是将图像编码为 data URLs。

Data URLs，以 Data: 协定为前缀的url，容许内容创建者将小文件内联嵌入文档中。它们以前被称为“data URIs”，直到 WHATWG 不再应用这个名称。

将这些小图像编码到 Data URLs 中，并将它们间接嵌入到咱们的代码里，能够缩小页面须要收回的 HTTP 申请数，从而放慢页面加载速度。

在 Chrome 中，咱们如何将图像转换为 data URL 呢?

这是一个 gif ：

表格对象数组（ Table object array ）

假如咱们有一个这样的对象数组：

let users = [{{name：'Jon'，age：22}，  {name：'bitfish'，age：30}，  {name：'Alice'，age：33}]

这样的数组不容易在控制台中查看。如果数组更长，元素更简单，那么就更难了解了。
侥幸的是，Chrome 提供了一个表格函数，能够将对象数组制成表格。

在许多状况下，此性能十分有用。

拖放元素面板（ Elements panel ）

有时咱们须要调整页面上某些 DOM 元素的地位来测试 UI。在元素面板，你能够拖放任何 HTML 元素，并更改其在页面中的地位：

在下面的 gif 中，我在元素面板中拖动 div 的地位，它在页面上的地位会同步扭转。

在控制台中援用以后选定的元素

$0是另一个魔法变量，它援用元素面板中以后抉择的元素。

触发CSS伪类

伪类容许您将款式利用到一个元素时，不仅与文档树的内容无关,还与内部因素无关,例如导航的历史（ :visited 等）,其内容的状态（如 :checked 在某些表单元素）,或鼠标的地位（如 :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 款式时，咱们常常须要暗藏一个元素。如果咱们抉择元素并按下键盘上的 H 键，咱们能够疾速暗藏元素。

这个操作是将visibility: hidden !important;款式增加到相应的元素。

将DOM元素存储在全局长期变量中

如果咱们想在控制台中疾速取得一个 DOM 元素援用，咱们能够这样做:

抉择元素
右击鼠标
存储为全局变量