Chrome DevTools

小技巧

1.表格视图

console.table(arr2/obj, [arrColName]); // 以列表形式显示对象属性/值或者多维数组键/值

2.计时

console.time/timeEnd(str); // 成对出现，配合使用

3.snippet

可以把自己的调试工具库放进去，非常方便

4.图片取色

用浏览器打开图片，审查元素，设置任意色值，用取色器取色

5.常用快捷键

Ctrl + Shift + f    跨文件查找
Ctrl + Shift + o    查找函数定义
Ctrl + p            转到Sources面板
Ctrl + Shift + c    审查元素
Ctrl + L            跳转到指定行
ESC                 显示/不显示console
Ctrl + L            清空console

零.主面板

1.常用功能

模拟设备（横屏切换），模拟触摸事件（默认开启）

2.不常用功能

模拟网络（移动网络性能优化），模拟经纬度、加速度，调试媒体查询

二.Elements

1.常用功能

定位，临时修改，查看css规则，事件监听

2.不常用功能

DOM断点（插入断点，子树更新/属性值更新/节点移除时触发，对应DOM3级节点更新事件），拖放节点修改DOM结构，强制元素显示hover/active等状态

三.Network

1.网络面板能做什么

哪个资源最晚开始下载？
哪个资源下载时耗最长？
谁发起了那个网络请求？
加载那个组件花了多少时间？

2.常用功能

查看资源加载情况以及资源url，调试Ajax（比如打开baidu显示天气的xhr），重发xhr

3.不常用功能

查看HTTP请求/响应头及主体，评估网络性能（关注时耗）

4.两条重要的时间线

蓝线表示 DOMReady 事件。事件触发的条件是：浏览器已经把整个 HTML 文档的 DOM 结构解析完毕。一般前端开发者监听这个事件是为了可靠地在文档中查找元素。这个事件触发之前有可能只下载了半截 HTML，想要的元素还没出现。

红线表示 load 事件，触发条件是：整个页面的 JS CSS 图片都下载完毕。用户看到的进度条已经不再显示为“忙”的状态。是用户眼中的加载完毕。

5.时间记录（Resource Timing API）

开始
开始重定向
重定向结束
开始获取app cache
开始DNS查询
DNS查询结束
开始（安全）TCP连接
TCP连接结束
开始请求
开始响应
响应结束

可以通过window.performance.getEntries()获取上面所有数据，页面中可以直接用（类似于console对象）

6.资源详情

Stalled/Blocking：发送请求之前的准备，比如TCP连接复用（Chrome支持每个域名有6个TCP连接），
Proxy Negotiation：连接代理服务器的时耗
DNS Lookup：DNS查询时耗（如果浏览器没有缓存DNS记录）
Initial Connection / Connecting：初始化连接的时耗，比如TCP建立连接，SSL连接等等
SSL：SSL握手时耗
Request Sent / Sending：发送请求的时耗
Waiting (TTFB)：等待响应（的第一个字节）返回的时耗
Content Download / Downloading：接收相应数据的时耗

四.Sources

1.常用功能

查看外部文件源码，[条件]断点（代码行断点/事件断点）调试

2.不常用功能

修改文件自带版本控制，格式化被压缩的代码(这种符号 {})，持久化脚本snippet（多行控制台，支持语法高亮），黑盒脚本（排除不关心的脚本文件）

3.断点类型

代码行断点
DOM断点（ES5）

DOM子树更新断点
属性更新断点
节点移除断点

XHR断点（拦截对指定url的xhr）
事件监听器断点（监听指定事件）

断点调试快捷键：F8单步 F10步过 F11步入 Shift+F11跳出

五.Timeline 渲染速度优化

1.功能

详细时耗图（包括资源下载，脚本执行，渲染，重绘等等）
绿色线表示“First Paint”，可能比DOMContentLoaded早，Paint表示Chrome请求GPU绘制画面
检查内存泄露（强制垃圾回收）
事件时耗分析

六.Profile（性能优化）

1.指标

CPU，内存占用，脚本执行时耗

2.性能优化能做什么

检查页面是不是占用了太多内存
检查内存泄露
查看GC工作频率

3.内存占用

图示是一个空白页面，2M左右是最小内存占用了

（V8引擎的GC机制不是传统的引用计数/标记清除，用的是新生代+老生代+晋升机制，新生代采用Scavenge算法（遍历对象树），老生代采用标记清除+标记整理）

结合Timeline面板检查内存泄露过程比较麻烦，详细信息请查看Chrome Developer Tools之内存分析、[JavaScript Memory Profiling](性能优化/JavaScript Memory Profiling – Google Chrome.html)

还可以检测DOM节点泄露，算是内存泄露的一种，可能某些时候回出现DOM碎片无法回收的情况

4.查看JS语句时耗

七.Resources

1.常用功能

2.不常用功能

localStorage，appCache，Session Storage，IndexedDB，web SQL，Frames（DOM对象框架层结构，分离image/html/css/js）

八.Audits 加载速度优化

检测页面载入时间，提供优化建议

九.Console

1.常用功能

计算器，测试js代码

2.不常用功能

获取元素信息（比如所有图片的src或者统计标签总数），命令行API（比如$, $$, $_, $x），console.assert(expr, str);等价于if (expr) {console.log(str)}`

十.Settings

禁用JS，禁用缓存

十一.特色功能

特色功能1：远程调试

Android与PC双向同步

支持在手机浏览器/native app中调试，支持端口转发，支持虚拟主机名映射（virtual host mapping）

准备条件：

Chrome32+
Android USB连接
浏览器调试需要Android4.0+，以及Android Chrome（PC的Chrome要比Android版本高才行）
app调试需要Android4.4+，以及WebView.setWebContentsDebuggingEnabled(true);

步骤：

开启USB调试，手机打开Chrome进入需要调试的页面
PC打开Chrome进入chrome://inspect，勾选Discover USB devices
在设备列表中点击inspect开始远程调试

【华为4.2.2 Android Chrome39,42 PC Chrome43测试浏览器远程调试失败，检测不到设备】

特色功能2：CSS预处理

SASS（SCSS），LESS，Stylus

安装ruby，gem安装sass或者compass
gem sources –remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l
gem install sass
gem install compass
启用source map
转译sass，开始调试
sass –watch –scss –sourcemap style.scss:style.css

【注意：watch效率极低，2分钟后才能检测到变化，重新生成map】