Chrome DevTools 调试指南

3,788 阅读19分钟

“这是我参与8月更文挑战的第2天,活动详情查看: 8月更文挑战

1. Chrome DevTools功能简介

Chrome DevTools由以下九部分组成:

  • Element元素面板:检查和调整页面,调式DOM,调试CSS
  • Network网络面板:调试请求,了解页面静态资源分布以及网页性能的检测
  • Console控制台面板:调试JavaScript。查看Console log日志、交互式代码调试
  • Sources源代码资源面板:调试JavaScript页面源代码,进行断点调试代码
  • Application应用面板:查看、调试客户端存储,如Cookie、LocalStorage、SessionStorage等
  • Performance性能面板:查看网页的细节,细粒度对网页载入进行性能优化
  • Memory内存面板: JavaScript CPU分析器,内存堆分析器
  • Security安全面板: 查看网页安全及证书问题
  • LightHouse面板:进行性能分析,给出优化建议

image.png 打开Chrome开发者工具快捷键

2. 使用Elements调试DOM

2.1 查看编辑HTML和DOM

可以在页面中选中DOM,在DOM中反向定位到页面位置 可以对HTML和DOM进行编辑操作:

  • 编辑内容
  • 编辑属性
  • 修改元素类型
  • 调整DOM节点顺序
  • 编辑HTML代码
  • 删除、隐藏、增加、拷贝节点

2.2 在Console中访问节点

我们也可以在console访问节点:

(1)使用document.querySelectorAll()访问

进入Element模块,点击ESC键即可。这个方法返回一个NodeList数组,数组中是所有的选中的标签

(2)使用$0快速访问选中的元素

当我们选中一个元素时,会显示下面这样的提示: 这也就是说,我们可以使用$0来访问该元素,这样就会显示出我们选中的元素:

(3)拷贝 JS Path 进行访问

右键点击选中的元素,点击Copy,选择Copy JS path,即可复制该元素的路径,在Console中粘贴就会显示出对应的元素: 显示的结果:

2.3 在DOM中断点调试

我们可以在以下几种情况下进行断点调试:

(1)属性修改时打断点

我们将选中的a标签的href值进行修改:

步骤:右键点击元素 => Break on =>attribute modifications ,这样就给元素打上断点,复制该元素的JS path,并对其值进行修改,然后执行断点:

执行后:

(2)节点删除时打断点

这个和上面的步骤类似,我们来删除一个a节点,需要使用其父元素的removeChild属性,断点设置为Break on=> node removal

执行后(删除了左上角的“地图”标签):

(3)在子树修改时打断点

这种方式,我们需要对父元素打断点,这次来删除左上角的“贴吧”标签,断点设置为Break on=> subtree modifications

执行后:

3. 调试样式及CSS

3.1 查看和编辑CSS

查看一下百度输入框的样式:

在这些样式中,从上到下,优先级依次降低。因为有些样式优先级较低,会被较高优先级的样式覆盖掉,所以会被划掉。我们可以对这些样式的属性或属性值进行修改,也可以划掉这个样式,使其隐藏。

可以通过Filter过滤需要的属性,过滤出来的属性会进行高亮显示:

还可以实时查看该元素的盒模型:

3.2 在元素中动态添加类与伪类

可以通过点击右上角的:hov.cla来动态的添加类与伪类,也可以对已有的类伪类进行查看:

动态的添加类:

添加伪类需要勾选上面的伪类类型,在进行添加。

3.3 快速调试CSS数值及颜色图形动画等

在右上角element.style右侧有三个点,鼠标移动上去就可以看到以下四个按钮:

这四个按钮分别是:

  • text-shadow:文字阴影
  • box-shadow:盒子阴影
  • color:文字颜色
  • background-color:背景颜色

可以通过这四个按钮功能实现可视化的调节元素对应的样式。

(1)以text-shadow为例,可以通过调整数值来调整阴影的偏移位置以及模糊程度:

(2)box-shadow:

(3)color:

(4)background-color

可以打开Animations来调试动画:

我们给百度的输入搜索框加了一个:hover之后高度变高的效果,这个工具就会录制这个动画的开始和离开,并显示在下方:

随便点击一个进去,就可以对动画的属性值进行调试:

4. 使用 Console 和 Sources 调试 JavaScript

4.1 Console面板简介及交互式命令

可以使用Console面板执行以下功能:

  • 运行JavaScript代码,交互式编程
  • 查看程序中打印的Log日志

(1)在Console中输入一些JavaScript代码,表达式,算法等来进行调试:

(2)查看程序中打印的Log日志:

在平时项目,可能使用console来打印后端传来的请求响应数据,来查看数据格式。还会查看一些代码的运行结果等等。

console提供了很多方法打印方法:

主要的调试方法有以下四种,其中errorwarn方法有特定的图标和颜色标识:

  • console.log():打印普通信息
  • console.info():打印提示性信息
  • console.error():打印错误信息
  • console.warn():打印警示信息

4.2 调试JavaScript的基本流程及断点调试

对于JavaScript的调试主要有以下两种方式:

  • 传统的console.log或者是alert()打印运行时信息进行调试
  • JavaScript断点调试

(1)使用debugger进行断点调试

断点调试,在需要断点的位置设置一个debugger

代码下面有一行工具栏,可以进行单步的调试:

他们分别代表:

  • Resume script execution:恢复脚本的执行
  • Step over next function call:跳过下一个函数的执行
  • Step into next function call:进入到下一个函数的执行
  • Step out of current function:跳出当前函数
  • Step(快捷键F9):单步执行

(2)使用事件监听进行断点调试

除了使用debugger之外,还可以直接进行断点设置:

最下面这个是事件监听的事件,我们只要选中相应的事件,再在页面执行响应的事件,就可以进行断点调试。

(3)在代码行上设置断点

通常我们会在有问题的那几行代码设置断点,然后进行断点调试(可以同时设置多个断点):

可以在Scope中查看相关变量的值。

4.3 Sources源代码面板简介

Sources面板包含了该网站的静态资源:

我们可以使用快捷键Ctrl+P来搜索相关的静态资源文件来查看,还可以使用快捷键Ctrl+ Shift+P来调出命令行,命名行中有所有命令的快捷键:

打开需要调试的文件,就可以在右侧进行编辑调试。

4.4 使用Snippets来辅助Debugging

我们可以点击New snippet来添加一个代码片段来辅助调试,比如,可以引入JQuery来赋值调试:

引入片段之后,右键点击该引入的文件,点击run,就可以使用JQuery对原来的样式、事件等进行调试了。

需要注意的是:新引入的代码片段不会对原有代码产生影响。

4.5 使用DevTools作为代码编辑器

在Sources中有一个Filesystem,在里面可以添加本地文件进行编辑操作,相当于一个编辑器(这种方法是对本地源代码的编辑):

5. 调试网络

5. 1 Network 面板简介

我们可以用Network面板来完成以下事情:

  • 查看网页资源请求预览,查看资源分布
  • 针对单一请求查看Request/Response或消耗时间等
  • 分析网页性能优化,使用工具代理页面请求数据等

我们可以看到执行一个操作之后,所有的网络请求数据:

5.2 使用Network查看网页查看站点网络

选择过滤,就可以对网络请求数据进行筛选,可以搜索数据名称,也可以根据类型进行筛选:

All是请求回来的所有数据,XHR是所有异步请求的数据。 点开XHR中的一条请求数据,就可以查看它的详细信息:

过滤按钮后面是search,过滤只能过滤请求数据,而search不仅可以搜索到请求数据还可以搜索数据的请求头和请求体,还可以进行正则匹配:

可以通过Preserve log可以记录上一个网页的请求,可以通过Disable cache禁用缓存:

对于单一的请求,Headers 是请求头相关数据,Preview是对请求回来的数据进行预览,Response是请求回来的数据,Timing在心性能优化时会用到:

timing内容:

在请求的最下面,有对所有请求的统计信息:

5.3 使用Network Waterfall分析页面载入性能

对于请求数据,右侧会显示请求时间:

可以根据请求时间的长短,对项目做出相应的优化。如,有些JS、CSS文件可以合并、进行压缩等操作,对于图片可以懒加载等。

可以查看某个请求的具体请求时间,来确定是哪里耗时较多:

6. 客户端存储Application面板

6.1 查看与调试Cookie

可以在Application面板查看Cookie:

可以直接点击添加、删除、修改上面Cookie的属性值,还可以通过document.cookie ='cookie名称 = cookie值'来添加新的cookie:

6.2 查看与调试LocalStorage与SessionStorage

我们同样可以直接点击添加、删除、修改LocalStorage与SessionStorage的属性值:

使用localStorage的API可以对其进行增删改查的操作(sessionStorage也有类似的操作):

LocalStorage会永久存储在该站点的本地存储下,SessionStorage的本地存储会在一次会话或者登出、关闭浏览器等情况之后删除。

7. 调试移动设备、H5页面及远程调试

7.1 移动端H5页面调试

点击如图所示的按钮,就可以切换为移动端显示,可以在上面的工具栏切换显示的设备,以及缩放的大小:

7.2 使用Chrome DevTools 进行H5页面的开发

当针对移动设备进行开发时,会有一些诸如获取地理位置,角度、尺寸、方向等操作。我们使用快捷键Ctrl+shift+p调出菜单,然后搜索sensors,点击会出现Sensors面板:

这三个选项分别是:

  • Location:地理位置信息
  • Orientation:设备的方向信息
  • Touch:触摸信息

我们可以通过这些选项更改地理位置信息更改模拟设备的方向更改触摸相关属性。 还可以使用快捷键Ctrl+shift+p调出菜单,然后搜索Network conditions,点开会出现一个菜单:

第一项是禁用缓存,第二项是模拟网络情况,第三项是模拟用户的user-agent,里面有很多选项可以选择:

8. Performance性能面板

8.1 Performance面板简介

Performance面板主要是对网站应用的运行时性能表现进行检测与分析,其可以检测的内容包括:页面的每秒帧数(FPS)、CPU的使用情况、各种请求的时间花费、网络任务的执行情况。

Performance面板可以在Chrome开发中工具中打开,建议在无痕模式下使用该工具,因为该模式下网页不会受到缓存或其他插件程序等因素的影响:

可以看到,上图Performance面板中间提示了如何开始使用这个面板,点击左上角最左侧的黑色圆就可以开始一个新的监测记录,点击刷新按钮可以记录整个刷新过程中的监测记录,还可以点击右侧按钮来删除检测记录。

点击刷新按钮,网站首页的性能结果如下,其包含的信息可以分为四大类:控制面板、概览面板、线程面板、统计面板:

8.2 控制面板

控制面板中有五个选择项和两个下拉框,它们的含义如下:

  • Screenshots:表示是否截取每一帧的屏幕截图,默认会勾选,并且在概览面板中展示随时间变化的截屏动画,如果取消勾选,则不会这哪是这部分内容;
  • Memory:表示是否记录内存消耗,默认不会候选,如果勾选则会在线层面板与统计面板之间展示出各种类型资源的内存消耗曲线;
  • Web Vitals:是谷歌针对网页加载速度和体验所提出的一套指标,这套指标用于测试网页的加载速度及用户体验等,这里不做详细说明;
  • Disable javaScript samples:如果需要模拟手机端的运行环境时则需要勾选,它表示关闭JavaScript样本,减少在手机端运行时的开销;
  • Enable advanced paint instrucmentation(slow):表示是否开启加速渲染工具,用来记录渲染事件的相关细节,该功能比较消耗性能,开启后重新生成检测报告的速度会变慢。
  • Network:在性能检测时,用以切换模拟网络环境,可以模拟弱网(2g/3g)条件下网站的一些表现情况,然后根据弱网的具体表现进行相关优化。;
  • CPU:限制CPU的处理速度,主要用于模拟低俗CPU运行时的性能。

8.3 概览面板

在概览面板中,可以选择一个起始时间点,然后拖动鼠标左键来滑动选择面板中国的局部范围,来进行更小范围的性能观察。这部分的性能信息主要包括以下三个指标:

  • FPS:衡量动画是否流畅的重要指标。当绿色柱状图较高时,就代表FPS帧率很高,体验也就越流畅,如果FPS帧率较低,就会是红色的横条,表明帧率较低,影响用户体验,这里图中并没有出现红色,说明网页的整个体验还是非常流畅的。这里特别说明一下不管是游戏还是网页,都是帧率越高,体验越好。
  • CPU:展示CPU的使用情况。这个指标和下面的Sumarry指标是一一对应,而且这里它们的颜色所代表含义也是相同的,每个颜色代表各个过程所耗费的时间。从图中可以看到,整个加载过程中,白色部分(ldle)占比是最大的,这里代表的是空闲性能,第二大占比的橙色对应的是脚本加载时间,所以要想更快可以试着从加快脚本加载速度方面去优化。
  • NET:展示各个请求所花费的具体时间,这里看不太清,可以直接去 Network 面板当中去具体观察各个请求所花费的时间,然后针对具体的请求具体分析。

8.4 线程面板

线程面板就是主线程执行过程中的火焰图,主线程在解析HTML和CSS、页面绘制及执行JavaScript的过程中,每个事件调用栈和耗时情况都会反应在这个图中。其中每一个长条都代表一个事件,将鼠标悬浮至其上面时,就可以查看到相应的时间的执行耗时与事件名。

在面板下方,可以看到非常重要的一个指标:Main,它代表主线程,如下图:

图中不同颜色表示不同的事件类型。横轴代表时间,纵轴代表具体的调用堆栈。调用堆栈就像是浏览器当中的解释器,可以利用它追踪函数的执行流。当浏览器中调用了多个函数,通过这种机制可以追踪到哪个函数正在执行,具体函数体中又调用了哪个函数。

常见的事件类型有:

  • HTML解析;
  • JavaScript事件;
  • 页面布局更改;
  • 元素样式重新计算;
  • 页面涂层的绘制。

8.5 统计面板

统计面板会根据在概念面板中选择时间区域的不同,绘制出不同类型任务执行耗时的可视化图标,这里点击线程面板中的一个矩形,如下图:

点击之后看到这个事件下对应的一些具体信息,这里还可以点击Range右侧链接,点击之后会直接跳到sources面板对应的代码位置,这个功能方便了定位代码:

统计面板中包含四个Tab,其含义如下:

  • Summary:展示各类任务事件耗时环形图;
  • Bottom-Up:查看各个事件耗时的排序列表,列表包含两个维度:去除子事件后该事件本身的耗时和包含子事件从开始到结束的总耗时;
  • Call Tree:查看全部或指定火焰图中某个事件的调用栈;
  • Event Log:查看关于每个事件详细的日志。

9. LightHouse面板

9.1 LightHouse面板简介

Lighthouse是一款用于改进网站应用质量的开源自动化检测工具。只要为 Lighthouse 提供一个需要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告,其内容包括:性能检测、可访问性检测、SEO检测、是否符合PWA的检测、其他是否符合最佳实践的检测。 检测报告不仅涉及上面这些方面的现状分析,同时还提供了一些优化指导建议,方便开发者快速发现潜在的性能瓶颈并实施优化改进。

LightHouse的优点:

  • 评分报告全面且具有一定的权威性;
  • 提供解决方案;
  • 发现大的性能问题。

LightHouse的 缺点:

  • 测试环境较单一,用户群体的环境各有不同;
  • 存在波动,不同时刻的访客群体存在差异,数据只能反应当前时刻的效果。

Lighthouse的使用方式有三种:Chrome扩展程序、Chrome开发者工具面板、Node.js命令行。

这里主要介绍其在Chrome控制面板中的使用。在新版的Chrome浏览器中,将LightHouse集成在了开发者工具中,打开控制台,切换到LightHouse面板,如图所示:

9.2 检测得分

点击中间的Generate report按钮就可以开始自动分析,LightHouse就会自动帮我们生成性能优化报告,如下图:

可以看到报告详细给出了各种情况下的分数情况,从左到右分别是Performance(页面性能)、Accessibility(可访性)、Best Practise(最佳实践)、SEO(搜索引擎优化)、Progressive Web App(渐进式应用)。点击其中的每一项都可以看到给出的具体优化建议。

9.3 页面性能

对于这个测试结果,有六个性能指标,如图所示:

性能评估主要包含6个指标:

  1. 首次有内容绘制时间(FCP,First Contentful Paint):用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。
  2. 最大内容绘制时间(LCP,Largest Contentful Paint):用于记录视窗内最大的元素绘制的时间,该时间会随着页面渲染变化而变化,因为页面中的最大元素在渲染过程中可能会发生改变,另外该指标会在用户第一次交互后停止记录。
  1. 速度指数(Speed Index): 指的是网页以多快的速度展示内容,标准时间是4s
  2. 阻塞交互时间(TBT, Total Blocking Time):用户体验指标,代表着页面何时真正进入可用的状态。毕竟光内容渲染的快也不够,还要能迅速响应用户的交互。
  1. 用户可交互时间(TTI, Time to Interactive):这个指标并不是指的最早的可交互时间,而是可流畅交互的时间,具体的值为FMP之后,5秒后没有long task执行(50ms以上的任务)的时间
  2. 累计布局偏移(CLS, Cumulative Layout Shift):记录了页面上非预期的位移波动。

评估之后,LightHouse会给出一些优化建议,如图所示:

可以看到共给出了四条优化建议,分别是移除未使用的js文件、消除阻塞渲染的资源、移除未使用用的CSS文件、预连接到所要请求的源。点开每一条建议,就可以看到详细的操作说明。

9.4 可访问性

这部分关于网站可访问性的审核项,在网站优化中可参考进行改善,但并非一定要遵从,如下图所示:

在上面的结果中,提出了一些可访问性方面的问题,我们可以根据这些问题进行修改,比如:

  • 按钮没有可访问的名称,依赖屏幕阅读器的用户就无法使用它;
  • 图片中没有使用alt属性,当图片资源请求失败时,如果有alt属性,就可以让用户知道该图片的信息。

9.5 最佳实践

这部分内容的审核属于网站开发的最佳实践,建议开发者尽量遵从,最佳实践的审核项如图所示:

从上图中,可以看到对最佳实践的建议:

  • 跨域链接是不安全的,在外部链接中增加rel="noopener" 或者 rel="noreferrer"来改善性能和防范安全漏洞;
  • 图片纵横比不正确的图像,它告诉我们图像显示尺寸应符合自然纵横比;

9.6 搜索引擎优化

对于这部分内容,如果符合审核项的要求,将会大大提高网站被搜索引擎搜索到的概率。优化建议如图所示:

从上图中,可以看到两个问题:

  • 如果搜索引擎没有对页面进行爬网的权限,则无法将您的页面包含在搜索结果中,这里设置了反爬;
  • 图片标签没有设置alt属性,希望能够添加,增加图片被索引的概率。

根据每部分给出的评测结果以及优化建议,开发者就可以针对性的对网站页面进行优化。

10. 在DevTools中集成Vue和React插件

我们可以在扩展程序中添加React和Vue的插件,安装之后,浏览器的右上角会显示相应的图标。如果该网站是使用Vue开发的,Vue的图标就会点亮,React也一样。

我们打开Vue官网,就可看到Vue的图标点亮了,说明该网站是使用Vue开发的(废话,Vue官网肯定用Vue开发的啦):

添加之后,就可以在DevTools中看到Vue的选项,在里面查看组件、数据、Vuex等内容:

最后:

Chrome DevTools开发者工具是前端开发中必不可少.当然,学习这些理论基础是远远不够的,我们还需要根据实际的开发需要去使用不用的工具去进行调试,用的多自然就知道如何使用了。

工欲善其事,必先利其器