Chrome Dev Tools---[基础篇]-白红宇

Chrome Dev Tools 是每一位前端工程师开发调试的必备利器，称之为FE的瑞士军刀也毫不为过。然而，每每当发现一些自己不知道的用法时，我们经常会觉得，自己只是掌握了其强大功能的九牛一毛。为了能够让她发挥出最大功效，首先，我们应当了解她更多的使用方法；然后，在开发中合适的场景下，刻意练习使用；最后，熟练掌握那些之前不了解的功能，并为我所为用，最大提升效率。

本文翻译自，主要介绍了Elements, Console, Sources, Network四个Tab页面下的功能。敬请期待Chrome Dev Tools 性能篇

Elements

进入：
1. Cmd + Alt + c inspect，点击想观察的节点
2. console中inspect(DOM)，DOM为想观察的节点。

遍历节点：
1. 鼠标点击
2. 在DOM节点中，上下箭头跳转，向右箭头，展开折叠的节点。向左箭头，折叠打开的节点。

编辑节点
F2 -> Edit as HTML. ctrl+enter保存更改，Esc退出更改，不保存.

编辑 DOM 节点名称或属性
1. 直接在节点名或属性上双击
2. 选中突出节点，Enter,然后Tab选择.
3. 右键,Edit/Add Attribute.

点击并拖动,可以移动DOM节点.

右键->Scroll into view,滚动页面使节点在视口中显示.

断点调试
1. 右键节点->break on，可以对该节点的子树修改、属性修改、节点移除三种事件添加断点
2. 右侧DOM Breakpoints,管理DOM断点.
3. Event Listener
  1. Ancestors 显示祖先节点的事件侦听器。
  2. 每个Event Listener包含两个属性
    - handler, 右键 -> Show Function Definition
    - useCapture, addEventListener函数中useCapture的值(bool).
    - Framework listeners, 框架事件监听器.

Styles，位于面板左侧，主要是样式相关内容
- 页面底端的Computed 可以编辑，修改。
- 点击Styles中的文件名->跳转到Source->右键，Local Modifications.
- Inherited from <NODE>,点击<NODE>可以跳转到该DOM节点。
- 灰色条目不是已定义规则，而是在运行时计算的规则。
- 鼠标悬停在 CSS 选择器上可以查看受该选择器影响的所有元素。
- 点击右上角.cls,可以查看、增加、删除class。
- 点击(并长按)右上角+按钮，(选择要向哪一个样式表)添加一个新的 CSS 规则。
- 点击右上角:hov，或在元素上点击右键，启用/删除伪类。
- 点击css属性进行修改，tab跳转；Alt/ /Shift/Shift+Fn + 上/下，增减0.1,1,10,100。
- 鼠标悬停到样式表上面，此时右下角出现三个点，移动过去，此时有color,background-color等快捷方式。
- 点击color声明左侧带颜色的小正方形，打开color-picker。

Console

进入: Cmd + Alt + J

编辑时，输入Shift + Enter实现换行，而不会直接运行。

Settings -> General -> Console ->
- Hide network messages/ Log XMLHttpRequests/ Preserve log / Enable custom formatters
- Show timestamps 展开消息堆叠.

Console API

Ctrl + L/ clear() /console.clear() 清空console.

右键 -> Save As 保存console输出.

日志组按组输出,可嵌套:

console.group("Group Name")  console.groupCollapsed("Group Name")//默认折叠  console.groupEnd()复制代码

计时器,时间戳,在Timeline上有标注

console.time("name");  console.timeEnd("name");  // 向Timeline添加一个标记  console.timeStamp("Adding result");复制代码

断言,在console中可跳转到代码对应位置.
```
console.assert(a < 500, "a > 500!");复制代码
```

堆栈追踪&&错误处理

// 追踪堆栈  try {      // some code here  } cache(e) {      console.log(e.stack);  }  // 打印跟踪调用栈  console.trace();  // 处理运行时异常  window.onerror = function(message, url, line){      console.log("window.onerror was invoked with message = " + message + ", url = " + url + ", line = " + line);  }复制代码

字符串替换 %s %d %f %o(DOM节点) %O(js对象) %c 样式。不过有了ES6以后，推荐使用更加方便、灵活的模板字符串

添加cpu配置文件.将会添加到Profiles面板中

console.profile("label");  console.profileEnd();复制代码

其他特殊用法

// DOM元素格式化为JS对象  console.dir(document.body);  // 输出object子级元素xml  console.dirxml(object);  // 将Object,Array输出  console.table([{
     a:1, b:2, c:3}, {
     a:"foo", b:false, c:undefined}]);  console.table([[1,2,3], [2,3,4]]);  console.table(family, ["firstName", "lastName", "age"]);  // 记录相同字符串传入的次数(多用于统计函数调用次数)  console.count("Login called for user " + user);复制代码

Command Line API

↑ / ↓切换查看表达式

选择元素

$('code') // document.querySelector()$$('figure') // document.querySelectorAll()$x('html/body/p') // 返回与指定xpath匹配的数组元素$0 - 4 // 返回最近访问过的5个元素,$0为最新的一个复制代码

监听事件, 查看时间监听器(Elements->Event Listener中也可以查看)

monitorEvents(document.body, "click"); // 监听事件unmonitorEvents(document.body); // 取消监听getEventListeners(document); // 返回在指定对象上注册的事件侦听器复制代码

复制:将指定对象的字符串表示形式复制到剪贴板.
```
copy(object);copy($0);复制代码
```

调试函数

debug(fn); // 调用fn时开始调试undebug(fn); // 停止调试monitor(function); // console中将输出函数调用,以及传入的参数unmonitor(function); // 停止监控复制代码

在Elements中打开指定元素/对象/函数.

inspect(DOM);inspect(object/function);复制代码

查看对象

keys(object);values(object);复制代码

Sources

添加断点
- 添加Event断点:
  Source标签->右侧Event Listener Breakpoints->Mouse->click
- DOM断点.Elements 面板中，对DOM节点右键，Break On...
- XHR断点
- 异常断点:右上角Pause on exceptions
- 条件断点
```
//  当DOM元素满足某个条件进行断点，同时查看这个元素elem.hasAttribute('class') && inspect(elem);复制代码
```

在编辑器中行首右键,continue to here

检测变量值
- Watch->+,添加希望检测的表达式,比如,a,typeof a
- Scope窗格,在脚本暂停时,会显示当前变量

右上角Deactivate breakpoints,启动/忽略全部断点

Call Stack调用堆栈
- 在Call Stack中右键,Restart Frame
- Async,提高完整的异步函数调用堆栈的可视性
- 使用非匿名函数,提高堆栈可读性

将第三方脚本添加入黑箱:
- 在已打开的文件中,右键->Blackbox Script
- 在Call Stack中,右键->Blackbox Script
- Settings->Blockboxing->add pattern,下拉菜单中,Blackbox黑箱,Disabled阻止执行

实时编辑:编辑器中修改代码->Cmd + s，继续运行代码

Threads,切换线程

Source Map, Settings中开启

Snippets 编写代码，运行结果输出到console

Network

面板中，蓝线标志DOMContentLoaded事件，红线标志load事件。

Http1.0/1.1下,chrome最多支持对同一个domain6个TCP请求

Shift + 光标移动到request上面，此时绿色标志该请求的发起者，红色标志该请求的依赖项。

摄像机按钮，Capture Screenshots，再次刷新页面时，可以在时间轴上方看到对应屏幕状态。

disable cache,throttle,Offline,hide data urls

右键->clear browser cache

右键表格header -> 添加/移除显示列

header:Use large request rows,Show overview

右键request->copy response->console中copy({})->得到格式化的JSON

- 右键request->block request 在drawer中,查看被block的request

右键XHR request -> reply XHR

Summary: request数量,大小,时间

Filter
- 空格隔开:并
- domain,has-response-header,is(is:running),larger-than,method,mime-type,mixed-content,scheme,set-cookie-domain,set-cookie-name,set-cookie-value,status-code

Timing含义:
Queuing: 排队时间.
Stalled: http请求建立到发出去.
Proxy Negotiation、DNS Lookup
Initial Connection/Connecting: 建立链接花费时间。TCP握手移机重试.
SSL: 建立SSL链接花费时间.
Request sent: 发起请求的时间.
Waiting (Time to first byte (TTFB)): 发起请求到接受第一个字节数据.
Content Download: 获取响应数据的时间.