Chrome开发者工具详解

web测试离不开开发者工具的使用，作为初学者，整理了以下内容，如果你也是初学者，可以了解下呦~~，进阶教程：https://www.w3cschool.cn/chromedevtools/an1b1hjj.html

 

一、面板介绍

Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板、Audits面板。

• Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈；
• Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell；

• Sources:断点调试JS；

• Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化；
• Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能；
• Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节；
• Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等；
• Security:判断当前网页是否安全；

• Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

二、面板功能

1、Elements面板

实时编辑DOM节点和CSS样式

• 双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里面；
• 点击右侧Style面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式；
• 点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值；
• 查看网页的本地修改历史；
• 点击Styles面板中修改过属性的文件名，会跳转到Source面板；
• 在文件位置右击选择Local modifications,可以查看本地的所有修改记录；
• 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容。

2、Console面板

控制台输出日志：通过JS代码或者命令行console.log()、console.warn()和console.error()可以将日志信息输出到控制台

• console.log 显示一般的基本日志信息，当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
• console.warn 显示带有黄色小图标的警告信息
• console.error 显示带有红色小图标的红色的错误信息
• console.assert 当第一个参数为false时，才会显示第一个参数的值
• 可以根据JS条件判断输出不同的日志信息

注： 当需要换到下一行而不是回车的时候，请按Shift+Enter。

3、Sources面板

你可以在这个面板里面调试你的JS代码，也可以在工作区打开你的本地文件。

调试JS代码

• 你可以点击JS代码块前面的数字外来设置断点，如果当前代码是经过压缩的话，可以点击下方的花括号{}来增强可读性，所有的断点都会列出右侧的断点区。
• 设置断点

断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发

① DOM元素节点发生改变时

在Elements面板中指定的DOM节点上右击，在弹出的菜单中选择Break on...，可以看到三个选择项，比如我们选择Subtree modifications，那么当选择的节点里面的子节点被添加、删除、修改，则断点就会被触发。

② XHR生命周期状态改变时

当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时，则断点就会有触发。

③ 指定的事件执行时

在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件，勾选你要监听的事件，在指定的事件执行时，断点就会有触发。

4、Network面板

面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。该面板主要包括5大块窗格(Pane)：

 

1. Controls 控制Network的外观和功能。
2. Filters 控制Requests Table具体显示哪些内容。
3. Overview 显示获取到资源的时间轴信息。
4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
5. Summary 显示总的请求数、数据传输量、加载时间信息。

Network 面板按钮介绍如下图：

 

Requests Table(请求列表)

此列表列出了检索的每个资源。默认情况下，此表按时间顺序排序，也就是最早的资源在顶部。单击资源名称可以获得更多信息。提示：右键单击列表的任何标题栏可以以添加或删除信息列。

Requests Table列表中，每一列的含义：

• Name：资源名
• Status：响应状态
• Type：响应数据类型
• Size:响应数据大小
• Initiator 标记请求是由哪个对象或进程发起的（请求源）。
• Parser： 请求由Chrome的HTML解析器时发起的。
• Redirect：请求是由HTTP页面重定向发起的。
• Script：请求是由Script脚本发起的。
• Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
• Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
• Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
• Timeline 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。

 

资源详细信息

点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：

• Headers：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等。
• Preview：根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
• Response：显示HTTP的Response信息(未进行格式化)。
• Cookies：显示资源HTTP的Request和Response过程中的Cookies信息。
• Timing：显示资源在整个请求生命周期过程中各部分花费的时间。

1、 Headers页面中包含的http请求以及响应信息等，可以查看该资源、接口的状况。

2、Preview页面可以查看服务端返回的json数据，并且按照JavaScript的对象格式展示预览。层层展开后可以看到具体的数据，有时定位前后端bug时可以通过将其与页面的数据做简单比较，看是否一致。

3、Response显示的内容与Preview里面的一样，只是Response里面的内容还未进行格式处理。
4、Cookies显示资源HTTP的Request和Response过程中的Cookies信息，在Application中也可以查看。不是所有的资源都有Cookies。

5、Timing显示资源在整个请求生命周期过程中各部分花费的时间，实际功能测试时用的不多

Disable cache

在已加载缓存信息时，如果这时需要验证刚部署的版本，遇到问题没解时可以勾选“Disable cache”，然后刷新页面重新验证下。勾选“Disable cache”刷新页面的过程中，客户端不会使用本地缓存，重新从服务端加载资源。需要注意的是该方法不是适用于所有的客户端。Android端App的H5页面因为机制可能不同，不一定适用。Web端直接清理所有的历史信息来清除缓存。有的PC端桌面应用内嵌了Chrome DevTools工具时，可以在H5页面使用该功能。

清除缓存

有的客户端测试H5页面时没有清理缓存功能，可以使用Chrome DevTools工具清理，浏览器和Android系统还是通过应用去删除缓存更方便、稳定。

 

5、Security面板

通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。

HTTPS和HTTP的区别主要为以下四点：
① https协议需要到CA申请证书，一般免费证书很少，需要交费。
② http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
③ http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④ http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

如果网页是安全的，则会显示这样一条消息：This page is secure (valid HTTPS).。如果网页是不安全的，则会显示：This page is not secure.。

通过点击View certificate可以查看main origin的服务器证书信息。点击左侧可以查看指定源的连接和证书详情。

该面板可以区分两种类型的不安全的页面：

• 如果被请求的页面通过HTTP提供服务，那么这个主源就会被标记为不安全。
• 如果被请求的页面是通过HTTPS获取的，但这个页面接着通过HTTP继续从其他来源检索内容，那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击。

点击左侧则提供一个跳转到Network面板视图的链接信息。

中间人攻击(Man-in-the-Middle Attack,"MITM攻击")是一种“间接”的入侵攻击，这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的两台通信计算机之间，这台计算机就称为“中间人”。

6、Audits面板

对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。选中Network Utilization、Web Page Performance，点击Run按钮，将会对当前页面进行网络利用率和页面的性能优化作出诊断，并给出相应的优化建议

7、Memory面板

 

8、Prerformance面板

功能

• 模拟移动设备的CPU；
• 记录运行时的性能表现；
• 定位影响性能的代码所在位置。

工具栏简介

1. 点击【设置按钮】展示更多设置；
2. Network 模拟网络环境；
3. CPU 模拟移动设备 CPU ；
4. 点击左上角录制按钮开始录制性能。

性能分析

1. FPS 数据，红色说明此帧存在严重问题，绿色的长条越高，说明 FPS 越高，用户体验越好。
2. CPU 运行数据，与数字 5 中的颜色是对应的。各种颜色代表该时间段，CPU 在处理上花费的时间。
3. 鼠标悬停，可看到当前帧的 PFS 。
4. 主线程运行状况，X 轴代表时间， Y 轴代表调用栈，上面的 event 调用下面的 event 。

定位代码

1. 事件长条的右上角，如果出现了红色小三角，说明这个事件是存在问题的，点击可以在 Summary 面板看到详细信息。
2. 点击 reveal 可以定位到问题代码的位置。

注：

1、使用 Chrome 的匿名模式，可以保证页面在一个相对干净的环境下运行，避免 Chrome 插件对调试的影响。

2、打开控制台，快捷键 Ctrl+Shift + P 打开命令菜单，输入 Show Rendering ，点击 FPS meter ，显示 FPS 实时面板。

9、Application面板