Chrome 开发者工具

1.Element面板

Elements 面板主要用于对页面 HTML 和 CSS 的检查以及可视化编辑。

DOM树

• 右击页面任意处，选择检查 / 审查元素，查看选中页面对应的 DOM 元素
• 点击 ，当图标显示为蓝色时，鼠标点击页面任意一处，可以查看选中页面对应的 DOM 元素
• 鼠标悬停 DOM 树上的任意一个节点，页面会用淡蓝色的蒙板在页面上标记 DOM 节点对应的页面
• 按键盘的向上向下键可以在展开的节点之间进行切换，向左向右键可以收缩和展开节点

编辑DOM

        你可以任意修改 DOM 树上的任意信息，比如修改节点的类型、属性，或者改变 DOM 节点的所属关系等等。不过需要注意的是，这些修改都是临时的，不会得到保存，当刷新页面时所有修改都将重置。

可以通过选中一个 DOM 节点，再右击进行查看：

• Add Attribute：为选中节点添加一个属性

• Edit Attribute：修改选中节点中选中属性

• Edit as HTML：将选中节点当做 HTML 进行编辑

• 复制选中的节点，可以复制选中节点的选择器、XPath、元素本身、outerHTML 等，也能剪切、粘贴节点，我们一般选择复制节点的选择器

• Hide element：隐藏节点

• Delete element：删除节点

• Expand all：展开所选节点下的所有子节点

• Collapse all：收缩所选节点下的所有子节点，包括自己

• 4 个伪类：选中则表示所选节点处于相应的状态，比如选中 :hover 则表示所选节点当前正处于鼠标悬停的状态

• Scroll into View：如果所选的 DOM 节点对应的页面元素不在可视区域内的话，点击这个选项则会将页面滚动到可以显示对应的页面元素的位置

• Break on：给 DOM 节点设置断点，主要用来调试 JavaScript 代码，这段代码的作用是用来修改所加断点的 DOM 节点，这一般用在比较复杂的网页应用当中。可以给所选的 DOM 节点添加 3 种类型的断点：

  • subtree modifications：所选节点的子节点被添加、删除、移动的话，则会触发
  • attribute modifications：所选节点的属性被修改的话，则会触发
  • node removal：所选节点被删除的话，则会触发

样式

 样式（style）部分主要由5个小面板组成，分别是：

• Style：实时编辑与所选元素相关的样式
• Computed：检查编辑所选元素的盒模型
• Event Listeners：查看与所选元素相关的 JS 事件监听
• DOM Breakpoints: DOM 断点
• Properties：所选节点对应的对象及父类们

Styles 面板可以允许你通过各种方式来修改元素的样式，并且会想方设法使得你调试时简单方便。

按照上图标注的序号进行描述：

1. element.style：代表所选元素的内联样式。比如我选择的是 Github 的 header 块，如果我直接修改其 HTML 为 <div class="header" style="background: red"></div>，那么 element.style 中就会出现 background: red;，相反，如果我在 element.style 块中点击任意空白处，添加 CSS 样式，那么你会在对应的元素节点上看到 style 属性，值就是你写在 element.style 内的内容
2. 鼠标悬浮在  上会出现 ，可以帮助你通过可视化界面的形式调试 text-shadow、 box-shadow、 color、 background。另外，最后一个 "+" 的符号代表可以添加新的 CSS 规则（在 element.style 中没有）
3. 单击属性或者属性值，进行修改，按 tab 键修改下一个属性或值，按 tab + shift 修改上一个属性或值。当值是数字类型时，按上下键可以以 1 为单位递增或递减，按 alt + 上下键以 0.1 为单位递增或递减，shift + 上下键以 10 为单位递增或递减，记不得这些快捷键就老老实实手动输入吧；点击空白处，添加新的样式
4. Style 面板对 color 非常友好，点击色块可以打开取色器（color picker，取色器功能非常强大，大家自行感受），然后对颜色进行可视化编辑。同样的，shadow 属性也能如此
5. 以 "Inherited from ..." 为分界，上面的样式都是作用于元素本身的，下面的都是其继承而来的，继承的对象一般不止一个，可能是父元素，父元素的父元素...
6. 将鼠标悬停在一个选择器上时，可以看到这个选择器所影响的所有页面元素（不包括可视区域外的元素）
7. 这边有 3 个选项
   • 点击 ":hov"，出现 ，可以强制所选元素处于某个状态，这个也能通过右击元素，选择一个状态来实现
   • 点击 ".cls"，出现 ，查看所有与当前元素直接相关的样式规则，你可以禁止/允许某个类作用于所选元素，也可以添加新的类
   • 点击 "+"，新建一个样式规则

Computed

Computed 面板显示了如下内容：

• 所选元素的盒模型
• 所选元素的 CSS 样式以及值，不仅显示最终所采用的值，也显示被覆盖了的值
• 每个属性值所在的文件

鼠标悬停在盒模型上的 margin、border、padding 以及内容区域，可以在网页中看到与之相对应的区域。你还可以双击盒模型上的数字来修改它。如果所选元素的 position 属性的值为 absolute 或者 fixed 的话，还可以在 margin 的外围设置 position。

2.Console面板 

Console 主要提供两类功能：

• 在开发过程中记录代码诊断信息
• 与文档和 DevTools 交互的命令行工具

3.Sources面板

 

先来认识一下 Sources 面板(以我的 Github 首页举例)。

可以看到面板被分为左中右三个部分，左边是文件导航，中间是文件的具体内容，右边可以统称为调试面板。整个面板就像一个 IDE，所以还是挺亲切的。

左边的文件导航面板包含 3 个面板：，分别是：

• Sources：这个面板很好理解，展示了网页所用到的所有文件

• Content scripts：Content scripts 指的是 Chrome 拓展注入在网页中的脚本。比如我安装了一个叫 JSONView 的 Chrome 拓展，打开我的 Content scripts 面板会看到：

  

• Snippets：Snippets 的含义是片段，在这里指的是一小段程序，这个一小段程序跟在其他地方不一样的是，可以访问这个页面中的变量和函数等。

中间面板的其他操作都比较显而易见，只是有 4 点需要简单提一下。

标记 1、2 处可以隐藏/展开左右两个面板，标记 3 处格式化代码，使得代码变得易于阅读，当代码被压缩时尤其有用。另外需要提一下的是打开文件的快捷方式，可以用 Cmd + p / Ctrl + p 在任何一个功能面板上搜索一个文件，按 enter 键在 Sources 面板上打开。

右边的调试面板比较复杂，需要借助调试的例子来解释作用。不过我们可以先大概熟悉一下：

右侧的面板为上下结构，上面是一组功能按钮，下面由很多面板组成，这些面板中，看名字大概能知道第二个显示的是调用栈，从四个开始就是各种类型的断点。那真相是什么呢？我们下面结合调试实例来解释这些按钮/面板的功能。

添加断点及断点类型

 

添加断点

打开一个文件，中间的面板中显示了代码，代码的左侧有代码行号，代码行号所在的位置叫做行号槽，点击行号槽，为相应的行添加断点，并在相应的行号上面加上一个类似肩章的五边形图标。特别提一下的是，这个图标的颜色是蓝色的。如下：

另外，如果一条语句由多行组成，如果在这条语句的行中添加断点的话，那么断点将会被加到下一条语句。举例如下：

在上面的代码中，你可以在 13 行添加断点，但如果你想在 14-17 行添加断点的话，那么断点将会被添加到 19 行。另外，你也不能为空行添加断点，那也会被添加到下一条语句上。比如你想在 18 行添加断点，但实际会被添加到 19 行。

条件断点

右键一个没有添加断点的行号，选择 "Add conditional breakpoint"，输入你的条件，当条件满足时，断点才会生效。回车后，效果如下：

可以看见，条件断点跟一般断点的区别就是颜色变成了黄色。

行内断点

之前有人在评论里问，为什么我的这个系列文章要加一个 v57 这个前提，行内断点就是一个很好的回答。行内断点是从 Chrome(v55) 才有的一个功能，意思是你可以在一行内添加多个断点。看下面的例子：

跟前面添加断点方式一样，我先在 15 行添加了一个断点，当程序中断在 15 行时，出现了上图的例子。但与一般的例子不同的是，上面有 3 处标红的位置，表示 3 处断点。但第 1 个断点跟后 2 个不一样的是，第 1 个断点是默认处于激活状态，而后 2 个则不是，只有点击激活后才能生效。

断点的其他操作

• 忽略：如果你想暂时忽略某个断点，右键断点，选择 "Disable breakpoint"
• 修改：修改断点生效的条件。你可以将一个非条件断点通过这个方式修改成条件断点，也可以将条件断点变成非条件断点
• 删除：你可以直接点击断点，或者右键 "Remove breakpoint"

黑盒脚本

右键行号槽的时候，第一个选项总是："Blackbox Script"。

那什么是黑盒脚本呢？

我们写项目时，很多时候是要引用第三方库或框架的，当我们调试时，调试的对象应该是我们自己写的代码，但很多时候，我们经常在焦灼地进行下一步下一步时，突然代码跳到了第三方库或框架的源码上去，这让我们焦灼的内心更添了一把柴火。黑盒脚本就是用来解决这个问题的。它能够将一个脚本文件标记为 "Blackbox Script"，那么我们就永远不可能进入这个文件内部，这个文件对我们来讲就是一个黑盒子。为什么要强调“永远”呢？因为不仅普通的断点不能访问这个被标记了的脚本，其他的，比如说 DOM 断点、事件断点等等都无法访问那个脚本文件内部。

面板介绍 -- Breakpoints

这个面板会显示你所有的通过行号留下的断点。你可以右键管理某个或全部断点：

• Remove Breakpoints：删除选中的断点
• Deactivate Breakpoints：暂时忽略所有断点
• Disable all Breakpoints：功能同上（与上一功能有细微差别，但表现类似）
• Remove all Breakpoints：删除所有断点

除了普通的中断类型，我们下面再介绍几款其他类型的。

面板介绍 -- DOM Breakpoints

在 Elements 面板，右键 body 元素，插入 "attribute modifications breakpoint"，在 Sources 面板中显示如下：

查看 DOM 断点的详细信息请查看另一篇博客：Elements

面板介绍 -- XHR Breakpoints

XHR 断点跟 DOM 断点很类似，通过 XHR 断点可以很容易的找到 ajax 调用的触发点和调用堆栈。最新的 Chrome DevTools 中要么为所有 ajax 调用添加断点，要么都不添加断点。

面板介绍 -- Event Listener Breakpoints

展开 Event Listener Breakpoints 可以看到一组事件类型，展开一个事件类型可以看到具体的事件名称。

每个事件名称和事件类型前面都有个复选框，选中即指当页面中触发了所选的事件的话，就会触发中断。

面板介绍 -- Global Listeners

显示全局监听器，在浏览器中 window 是全局对象，所以在 Global Listeners 面板中显示绑定在 window 对象上的事件监听。

异常中断

这个跟上面几种不一样，这个是放在功能按钮组里面的。

选中 "Pause on exceptions" 按钮，如上图，当执行的脚本出现异常时会触发中断。

介绍了如何添加断点的方式以及几款中断类型，下面介绍一下如何利用断点进行调试。

断点调试

功能按钮

我们先来介绍几个功能按钮：

• ：当程序中断在断点处时，点击去往下一个断点
• ：当程序中断在断点处时，长按上面的按钮出现，点击这个按钮可以在 0.5s 内忽略任何中断，当中断出现在循环内部时一般比较有用
• ：执行下一条语句
• ：当中断停留在一个函数调用处时，点击这个按钮会进入函数内部，而上面的按钮则会执行函数调用的下一句，不会进入函数内部
• ：当中断停留在函数内部时，点击这个按钮则会跳出函数内部，停留在函数调用的下一个语句
• ：在不取消断点标记的情况下，使得所有断点失效

4.Network面板

 

Chrome DevTools 的 Network 面板主要用于度量当前网页的网络性能状况，其记录了当前网页每个网络操作的信息，包括时间数据、HTTP 请求、返回数据等等。

先看 Network 面板长啥样~下面是我 Github 首页的 Network 面板。

Network 面板包含很多小面板，有些是默认隐藏的。其中最主要的一个面板就是控制面板(Control Pane)，即上图中的 "1" 部分，控制面板上有很多的功能按钮。"2" 部分是请求表格(Requests Table)，表格内容按照请求的顺序排序，点击一个请求的 "Name" 列可以查看这个请求的具体信息；在表格的头部，右键可以看到还有很多隐藏的列，比如 Method、Protocol、Domain 等等。"3" 部分是概览(Summary)，主要显示这个网页有多少请求，请求的数据有多大，一共花费了多少时间。

上面是 Network 3 个面板的大概了解，下面就对面板 "1"、"2" 进行重点介绍。

 

Control 面板

开始/停止记录

 表示正常记录网络的请求状况，点击，当图标变成  时，代表停止记录请求状况。

清除记录

点击  可以清除请求表格内的内容。

截取加载的瞬间

点击  ，当图标变成  时，代表开启截屏模式，即截取网页在加载过程中的瞬间，这些瞬间显示了网页在什么时间加载出了哪些部分。以我的 Github 首页为例，打开截屏功能后，出现下面的结果：

在控制面板下面出现了一块新的面板，用来显示网页加载过程中的截屏。当鼠标悬浮在一张截图上时，下面的请求表格面板上出现了这张截图加载时的时间；点击一张截图时，请求表格面板也会显示相应时间内加载的资源及其信息；双击一张截图，可以查看这张截图的大图，可通过左右键进行切换。

过滤

点击  可以显示/隐藏过滤面板，如下：

可以把过滤面板看成由三个部分组成的面板，从左到右分别是：过滤文本域、隐藏 Data URLs 和请求资源类型选择。

隐藏 Data URLs 比较好理解，对 Data URLs 不理解的可以看：Data URLs。在这里主要就是为了隐藏这些用 Data URLs 来展示的资源。

在 "Hide data URLs" 后面有一组文件类型，选择一个可以在下面的请求表格中只显示相应类型的文件请求，当然你还可以在选择的同时按着 ctrl / cmd，那么就可以多选。

下面来说过滤文本域，就是过滤面板最左边的输入框，为什么放到最后讲呢，因为这里面的文章太多了，超出了我们的想象。不卖关子了，下面具体聊聊吧。

首先，最简单的用法就是我们输入一个字符串，然后可以过滤出那些资源名称中包含相应字符串的资源。这是我们一般使用的，除此以外，文本域还支持一些关键词，举个栗子：

上面的例子就用到了 "larger-than" 关键词，后面跟的参数是文件大小，可以刷选出大于 1k 的文件。

下面就看看这些关键词有哪些：

• domain：刷选来自特定域的请求
• has-response-header：刷选 HTTP 返回值包含特定头部信息的请求
• is：可以用 is:running 查看 WebSocket 资源
• larger-than：筛选文件大小超过特定数字的请求，默认单位是 byte
• method：刷选特定 HTTP 请求方法的请求
• mime-type：刷选特定 MIME 类型的请求
• mixed-content：有 mixed-content:all 和 mixed-content:displayed 两种
• scheme：刷选特定 scheme 的请求
• set-cookie-domain：刷选特定的 HTTP 返回头部的 set-cookie 属性的请求
• set-cookie-name：也是对返回的 HTTP 头部中某个属性进行刷选的关键词
• set-cookie-value：同上
• status-code：对请求的状态值进行刷选

说到这，其实也就差不多了，但还有几点需要注意一下：1) 冒号后面不能有空格；2) 大小写敏感。

Use large request rows

点击  可以看到请求表格的每一行都增高了，显示的信息也更多了。

显示/隐藏 overview

我一开始跟很多人一样，看到这个图时觉得头晕，感觉上是显示加载情况的，但又说不出具体什么意思，下面就跟大家一起了解一下这张图的含义。

首先从水平方向上从左看到右，你会看见：

• 刻度：代表时间

• 一条条水平线：一条水平线代表一项资源，这条水平线上的不同的颜色段代表这项资源在加载过程中处于什么阶段

• 有两条竖线：前面一条是蓝色，代表 DOMContentLoaded 事件被触发；后面一条是红色，代表 load 事件被触发。从概览面板也能看到这两个信息：

  

然后从垂直方向看，这些五彩斑斓的水平线有的有重叠有的没有重叠，具有重叠部分说明这些资源是在同一时间被加载的。

讲到这里，也能大概了解这张图的意思了。但还有一个问题，那些颜色代表什么呢？这个放在这篇博客的后面细讲。

Preserve log

勾选代表：当刷新页面时不清除请求表格内的信息。

Disable cache

勾选代表：禁用缓存，则当重新刷新页面时所有的数据将会重新获取，而不使用缓存。

Offline

勾选代表：使得网页处于离线状态。

模拟网络状况

当开发的是一款移动应用时，常常要考虑移动设备的网络状况。Chrome DevTools 可以模拟各种各样的网络状况。上面的 Offline 仅仅是一种情况。点击 Offline 后面的下拉框，可以发现 Chrome 自带了很多网络状况，比如 4G、3G 甚至 Offline 等等。默认的是反应真实的网络条件（自己当前的网络状况），即 No throttling。Throttle 这个词很形象，阀门，可以用它来调节流量的速度。除此以外，你还可以自定义网络状况。

除了在 Network 面板可以设置网络状况，还可以在 Drawer 中看见。具体有两种方法：

1.  -> More tools -> Network conditions
2. 按 esc 键调出 Console Drawer，在 Console Tab 旁边也有 ，点击，选择 Network conditions