【译】像高级前端开发人员同样使用Chrome DevTools

时间 2020-07-27

标签高级前端开发人员同样使用 chrome devtools 栏目 Chrome 繁體版

原文原文链接

原文地址： https://medium.com/javascript...
做者：Dornhothjavascript

若是选择 Chrome 做为开发环境，则必须知道的 11 个技巧。html

好的，如今因为某种缘由，你最终选择了 Chrome 为开发使用的浏览器。而后，你打开了开发者工具（ Developer Tools ）并开始调试代码。前端

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

可是你真的了解 Chrome 开发者工具（ DevTools ）吗？实际上，它提供了许多强大但未知的功能，能够大大提升咱们的开发效率。node

在这里，我将介绍最有用的功能，但愿对你有所帮助。chrome

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

首先，咱们打开 Chrome 开发工具，而后用如下快捷方式打开命令菜单：后端

windows：Ctrl + Shift + P
macOS：Cmd + Shift + P

或者咱们能够单击下面的按钮将其打开：数组

而后咱们能够到命令面板，在这里咱们能够选择各类命令来执行各类强大的功能。浏览器

强大的屏幕截图

捕捉屏幕的一部分是一个很是常见的需求，而且我肯定你当前的计算机上已经具备很是方便的截图软件。可是，你能够完成如下任务吗？

截取网页上全部内容的屏幕快照，包括可视窗口中未出现的全部内容
精确捕获 DOM 元素的内容

这是两个常见的需求，可是使用操做系统附带的截屏工具并不能很容易地解决它们。此时，咱们可使用命令来帮助咱们完成这个需求。

对应的命令是:

Screenshot Capture full size screenshot

Screenshot 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 元素引用，咱们能够这样作:

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