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）

1. 开始

2. 开始重定向

3. 重定向结束

4. 开始获取app cache

5. 开始DNS查询

6. DNS查询结束

7. 开始（安全）TCP连接

8. TCP连接结束

9. 开始请求

10. 开始响应

11. 响应结束

可以通过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.常用功能

cookie

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）

准备条件：

1. Chrome32+

2. Android USB连接

3. 浏览器调试需要Android4.0+，以及Android Chrome（PC的Chrome要比Android版本高才行）

4. app调试需要Android4.4+，以及WebView.setWebContentsDebuggingEnabled(true);

步骤：

1. 开启USB调试，手机打开Chrome进入需要调试的页面

2. PC打开Chrome进入chrome://inspect，勾选Discover USB devices

3. 在设备列表中点击inspect开始远程调试

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

特色功能2：CSS预处理

SASS（SCSS），LESS，Stylus

1. 安装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

2. 启用source map

3. 转译sass，开始调试

   sass –watch –scss –sourcemap style.scss:style.css

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

特色功能3：工作空间workspace

把Chrome做为IDE

添加目录，持久保存，现场修改，代码提示、高亮、格式化