Chrome 开发者调试工具：DevTools

Love The Way You Lie 2022-05-20 03:59 460阅读 0赞

## 前言 ##

### 小技巧 ###

*  检查元素模式的快捷启动方式：`Ctrl + Shitf + C` 或 `Cmd + Shift + C`

### Console ###

*  多行编写模式：`Shitf + Enter`
 *  打印数组：[console.table();][console.table]
 *  清理控制台历史：`Ctrl + L`或`console.clear()`
 *  通过控制台使用元素：  
    选择元素后，输入`$0`  
    选择元素后，输入`($0)`，直接当jQuery对象使用  
    选择元素后，右键点击Copy element，粘贴到Console可快速拿到

> Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。  
> 用来取代 alert(); 或 document.write();  
> alert 弹出窗口会中断程序，且 alert 显示的对象永远是\[object \]。

参考  
[javascript console 函数详解 js开发调试的利器][javascript console _ js]  
[技巧和窍门][Link 1]

### Network ###

默认情况下，只要Chrome DevTools在开启状态，DevTools会记录所有的网络请求，记录都是在Network面板展示的。

*  点击Stop recording network log红色图标，当它变为灰色时，表示DevTools不在记录请求；
 *  点击Clear图标，可清除网络请求；
 *  点击Capture screenshots，可捕获屏幕截图；
 *  跨页面加载想保留网络请求时，勾选Preserve log；
 *  需要禁用浏览器缓存（防止取304资源）时，勾选Disable cache；
 *  模拟网速条件，选择Offline后面的下拉框；
 *  Filter 输入框，可根据输入的字符串、域、大小、状态码、媒体类型等属性进一步过滤；也可以多选后面的类型（按Ctrl再点击）；

#### Waiting (TTFB) 时间 ####

参考：[网站加载 Waiting (TTFB) 时间过长的原因和解决办法][Waiting _TTFB_]

概念

> TTFB 是 Time to First Byte 的缩写，指的是浏览器开始收到服务器响应数据的时间（后台处理时间+重定向时间），是反映服务端响应速度的重要指标。就像你问朋友了一个问题，你的朋友思考了一会儿才给你答案，你朋友思考的时间就相当于 TTFB。你朋友思考的时间越短，就说明你朋友越聪明或者对你的问题越熟悉。对服务器来说，TTFB 时间越短，就说明服务器响应越快。

优化到50ms~500ms为宜

> 因为每个服务器的硬件和网络环境都不尽相同，每个服务器的 TTFB 时间也不相同。如果想知道你的服务器可以优化到什么程度，大家可以上传一些静态的 HTML 页面到服务器，然后打开这些静态页面，看一些这些页面的 TTFB 时间，大多数服务器的 TTFB 时间都在 50 ms 一下，这个时间就是我们优化时候可以追求的时间。下面两个图中的 TTFB 时间分别是本站所在服务器的静态和动态网页 TTFB 等待时间。  
> TTFB 时间如果超过了 500 ms，用户在打开网页的时候就会感觉到明显的等待。我么可以把 500 ms 以上认为是 TTFB 时间过长。

TTFB 过长的原因

> 对于动态网页来说，服务器收到用户打开一个页面的请求时，首先要从数据库中读取该页面需要的数据，然后把这些数据传入到模版中，模版渲染后，再返回给用户。由于查询数据和渲染模版需要需要一定的时间，在这个过程没有完成之前，浏览器就一致处于等待接收服务器响应的状态。有些服务的性能比较低，或者优化没做好，这个时间就会比较长。  
> 当然，如果服务器到用户之间的网络不好，（比如，服务器在欧洲，用户在中国，用户打开网页的时候，请求需要跨越千山万水才能达到服务器），服务器接收到用户请求的时间过长，也是导致 TTFB 时间过长的原因。  
> 有时候，页面在用户的浏览器中保存了过多的 Cookie，每次请求，这些 Cookie 都要发送到服务器，服务器都要处理这些 Cookie，这也是导致 TTFB 时间过长的原因之一。

Waiting (TTFB) 时间过长的解决办法

> 知道了原因，解决办法就显而易见了，那就是缩短服务器响应时间，最简单直接并且有效的办法就是使用缓存，把 PHP 和 MySQL 的执行时间最小化，一些缓存插件可以把 SQL 查询结果缓存起来，把几十次查询结果转换为几次；一些缓存插件可以直接把用户所请求的页面静态化，用户打开网页时，相当于直接从服务器上下载了静态页面。  
> 如果是网络原因，换一个服务器是比较直接的解决办法。如果因为一些原因不能换服务器，可以使用一个 CDN，把页面同步到离用户比较近的 CDN 节点上，也是一个不错的解决办法。  
> 如果是 Cookie 的原因，可以通过修改应用程序，删除一些不必要的 Cookie，或者精简 Cookie 内容，缩短 Cookie 的有效期等，都是解决办法。

#### stalled（阻塞） ####

浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接。

http协议中有对浏览器并发请求连接数的限制，1.1版本中规定了是2个。但当今浏览器设置的各有不同。参考 [浏览器对同一域名进行请求的最大并发连接数（转贴）][Link 2]

参考  
浏览器对同一域名进行请求的最大并发连接数  
[Chrome浏览器Network面板http请求时间分析][Chrome_Network_http]  
[关于请求被挂起页面加载缓慢问题的追查（stalled 时间过长）][stalled]

参考  
[图解Chrome DevTools常用功能][Chrome DevTools]

[console.table]: https://developer.mozilla.org/zh-CN/docs/Web/API/Console/table
[javascript console _ js]: https://jingyan.baidu.com/article/e75aca855c6419142edac6c1.html
[Link 1]: http://wiki.jikexueyuan.com/project/chrome-devtools/tips-and-tricks.html
[Waiting _TTFB_]: https://www.wpzhiku.com/wating-ttfb-too-long/
[Link 2]: https://www.cnblogs.com/xiaoxiapier/p/4505117.html
[Chrome_Network_http]: http://www.cnblogs.com/zhenwen/p/5827925.html?utm_source=itdadao&utm_medium=referral
[stalled]: https://blog.csdn.net/tianhouquan/article/details/78803601
[Chrome DevTools]: https://jingyan.baidu.com/article/6525d4b17d5155ac7d2e94c3.html