如何使用浏览器开发者工具？

水深无声 2023-09-25 16:29 65阅读 0赞

测试Web的同学都知道浏览器开发者工具。今天给大家简单介绍下这个工具。

每个web开发人员都需要一些基本的工具来理解代码的底层结构，并使我们能够检查web内容。开发人员工具直接构建在浏览器中。这些工具依赖于浏览器。这些工具中的大多数在各种浏览器中都很常见，可以执行一系列任务，从检查当前加载的HTML、CSS和JavaScript的元素。使用开发人员工具，我们可以直接与系统客户端获取的源代码进行交互。本文将解释浏览器的开发者工具的这些基本功能。

在所有浏览器中，开发人员工具的基本功能保持不变，只是命名约定和术语发生了变化。在本文中，我们将主要集中在两种流行的浏览器Firefox和Chrome上。

**如何在浏览器中打开DevTools**

有许多方法可以打开浏览器开发人员工具。

![e553ef3d47d5bfc220342b1c2ff03783.png][]

![cad508d61ad35a9c2128b5522f6cb23b.png][]

要访问网页的DOM或CSS，右键单击页面上所需的元素并选择Inspect。或按Command+Option+C (Mac)， Control+Shift+C/I (Windows, Linux, Chrome OS)，或按F12 (ie, Edge)。

**1. 查看器**

查看器工具允许您查看当前正在检查的网页的HTML, CSS。使用它，您可以检查页面上的每个元素应用了哪些CSS。它还允许您预览即时更改的HTML和CSS反映在浏览器中。这些更改不是永久性的，刷新浏览器窗口后会重新设置。

![695d5cbd1ec3659ec43276d3a473882c.png][]

![6fb9a0cf84bb42f5350df44aa58c8994.png][]

![af2294b694af3c96ad69924197424be0.png][]

*  编辑HTML(添加属性/编辑文本):这允许更改HTML并实时查看结果。对于调试和测试非常有用。
 *  创建新节点:创建另一个空的内部分区。
 *  生成节点副本:创建除法的精确副本，具有相同的属性。
 *  删除节点:删除当前元素。
 *  复制/复制为HTML:复制当前选定的HTML。
 *  更改伪类 (:hover/:active/:focus):它强制元素状态被打开。使我们能够查看元素上的特定样式。
    
    ![1dfaa7bc9596fe90a12d4eab89b1d10d.png][]
 *  复制CSS路径/复制XPath:检查器最有用的功能(功能可以手动启用)，它允许复制CSS选择器或XPath表达式，这选择当前的HTML元素。

应用程序:

*  查看和更改DOM/ CSS
 *  检查和更改HTML页面。
 *  检查动画
 *  找到未使用的CSS。

**2. 控制台**

控制台用于调试网页源代码中的JavaScript。控制台窗口充当我们的调试窗口，允许我们处理没有按预期工作的JavaScript。它允许您对当前加载在浏览器中的页面运行代码块或单行JavaScript。控制台报告浏览器在试图执行代码时遇到的错误。

![2ce339527e2fcb9602bbb1b6ccf74ad0.png][]

*  控制台识别了正确的语法，并生成了与JavaScript代码对应的警报消息。
 *  它还可以识别类型错误，并为错误的语法提供错误消息。

应用程序:

*  查看日志消息
 *  运行JavaScript
 *  保存日志
 *  将相似元素分组
 *  日志xmlhttprequest
 *  保存在线表达式

**3.调试器(Firefox)**

Sources/Debugger UI面板监视JavaScript代码，并允许您设置断点和监视变量的值。断点设置在代码中我们希望暂停执行周期并调试或识别执行问题的地方。使用这个面板，可以调试JavaScript。

这个面板有三个部分:

![5476c350445b1d179062cd43e8bc5f38.png][]

1. 文件列表(Firefox)/文件导航器(Chrome):列出与我们正在调试的页面相关的每个文件。

2. 源代码(Firefox)/代码编辑器(Chrome):在此面板中显示所选文件的内容。还可以在此面板中设置断点，以便暂停执行。

3.注意表达式和断点:这些是检查页面JavaScript的工具。

还有两个部分只在代码运行时出现。

4. 调用堆栈:它显示执行了哪些代码以获得当前行。

5. 作用域:它显示从给定代码的不同角度可见的值。

应用程序:

*  使用断点暂停代码。
 *  将更改保存到带工作区的磁盘。
 *  从任何页面运行代码片段。
 *  找到未使用的JavaScript。
 *  使用本地重写在页面重新加载时持久化更改。
 *  获取JavaScript调试参考。

**3.网络监控**

Network面板用于确保正在下载或上传的所有资源都按预期完成。它使我们能够查看页面加载时发出的网络请求。它告诉我们每个请求需要多长时间，以及每个请求的详细信息。监控器在加载时是空的，在监控器打开时，一旦执行任何操作，就会创建日志。

网络日志的每一行都表示一个资源列表。这些资源按以下结构列出:

*  状态:HTTP响应码。
 *  类型:资源类型。
 *  启动器:启动器列是指向请求源代码的超链接。
 *  时间:请求占用的时间。
 *  时间轴/瀑布:这些请求的各个阶段的图形表示。

![922b7017633c17a6af46cfff9d5717c5.png][]

应用程序:

*  检查单个资源的属性(HTTP头、内容、大小)。
 *  检查网络请求列表
 *  查看网络流量记录
 *  创建性能分析
 *  检查web插座
 *  检查服务器发送的事件
 *  限制网络速度

**4. 性能工具**

性能在运行时记录，并告知页面在运行时的表现，而不是加载时的表现。该工具可以大致了解站点的总体响应能力有多好。它还可以衡量网站的JavaScript和布局性能。该工具创建一个记录/配置文件，在一段时间内的网站，该工具使运行。一个概述是使用RAIL模型创建的，列出了渲染网站所做的浏览器活动的所有框架。

![bac6af4ac45ab30dbf6a56d3724a1924.png][]

应用程序:

*  模拟移动CPU
 *  记录本网站的运行时表现
 *  每秒帧数分析
 *  找到瓶颈容量
 *  动画CSS属性

**5. 可访问性检查**

该工具提供了一种访问重要信息的方法，这些信息通常通过当前视图页面上的辅助技术堆栈暴露在辅助技术堆栈中。它允许检查哪些元素缺失或需要注意。

可访问性是一种实践，即创建尽可能多的人可用的网站。这个工具尽最大努力不阻止任何人访问信息，由于任何类型的残疾。残疾还包括由于用于访问网站的设备缺乏功能而导致用户无法使用的任何功能。这可能包括他们的网络连接速度，或者他们的地理位置或地区。

![95cd43cd2ca06fc2d125fe58dd0dfda0.png][]

可访问性窗口以树形图的形式显示，表示当前页面上的所有项。具有嵌套子元素的项目会得到这些箭头，单击这些箭头可以显示子元素的嵌套级别。

应用程序:

*  全键盘控制
 *  将可访问性树打印为JSON
 *  显示网页标签顺序
 *  检查易用性问题
 *  模拟由色盲人士浏览的网页
 *  突出显示UI项
 *  检查项目是否设置了正确的角色

我们已经讨论了浏览器DevTool面板中出现的5个用户最常使用的主要工具。从测试和调试的角度来看，这些工具对于开发也很重要。因此，总是知道有这样的基本开发和调试工具，这将使它更容易

结论:

浏览器开发工具是非常有用和重要的web开发工具。直接在浏览器中实时工作的能力大大简化了开发过程。有了这些工具，我们可以利用它们广泛的应用程序来预览样式更改，修改HTML或帮助编写JavaScript代码并进行一些调试。有很多方法可以使用这些列出的开发工具，而且可能性是无限的。因此，我们总是鼓励尝试现有的每一种工具，因为每一种工具都打开了web开发的另一个维度。

**最后：** 下方这份完整的软件测试视频学习教程已经整理上传完成，朋友们如果需要可以自行免费领取**`【保证100%免费】`**

![在这里插入图片描述][9d205f76a3bb49d8bce29972548618fa.png_pic_center]

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！

![ea309a97fa574feeba0851be84cd3e93.gif][]

[e553ef3d47d5bfc220342b1c2ff03783.png]: https://img-blog.csdnimg.cn/img_convert/e553ef3d47d5bfc220342b1c2ff03783.png
[cad508d61ad35a9c2128b5522f6cb23b.png]: https://img-blog.csdnimg.cn/img_convert/cad508d61ad35a9c2128b5522f6cb23b.png
[695d5cbd1ec3659ec43276d3a473882c.png]: https://img-blog.csdnimg.cn/img_convert/695d5cbd1ec3659ec43276d3a473882c.png
[6fb9a0cf84bb42f5350df44aa58c8994.png]: https://img-blog.csdnimg.cn/img_convert/6fb9a0cf84bb42f5350df44aa58c8994.png
[af2294b694af3c96ad69924197424be0.png]: https://img-blog.csdnimg.cn/img_convert/af2294b694af3c96ad69924197424be0.png
[1dfaa7bc9596fe90a12d4eab89b1d10d.png]: https://img-blog.csdnimg.cn/img_convert/1dfaa7bc9596fe90a12d4eab89b1d10d.png
[2ce339527e2fcb9602bbb1b6ccf74ad0.png]: https://img-blog.csdnimg.cn/img_convert/2ce339527e2fcb9602bbb1b6ccf74ad0.png
[5476c350445b1d179062cd43e8bc5f38.png]: https://img-blog.csdnimg.cn/img_convert/5476c350445b1d179062cd43e8bc5f38.png
[922b7017633c17a6af46cfff9d5717c5.png]: https://img-blog.csdnimg.cn/img_convert/922b7017633c17a6af46cfff9d5717c5.png
[bac6af4ac45ab30dbf6a56d3724a1924.png]: https://img-blog.csdnimg.cn/img_convert/bac6af4ac45ab30dbf6a56d3724a1924.png
[95cd43cd2ca06fc2d125fe58dd0dfda0.png]: https://img-blog.csdnimg.cn/img_convert/95cd43cd2ca06fc2d125fe58dd0dfda0.png
[9d205f76a3bb49d8bce29972548618fa.png_pic_center]: https://img-blog.csdnimg.cn/9d205f76a3bb49d8bce29972548618fa.png#pic_center
[ea309a97fa574feeba0851be84cd3e93.gif]: https://img-blog.csdnimg.cn/ea309a97fa574feeba0851be84cd3e93.gif