Web测试之浏览器调试简介

lsekfe

Web测试中，浏览器作为必须的结果呈现手段，是每个测试工程师都会使用的。但是在测试中，启用浏览器进行调试，或者观察浏览器信息，却不是每个测试工程师都会注意或者是会无意间疏漏的方面。

随着越来越多的应用内容通过浏览器界面进行呈现，大量的前后端交互信息也在浏览器内体现，很多测试工程师早期在开始接触浏览器页面信息的时候，是从代码检查入手的，逐渐了解HTML代码在浏览器中配合不同属性代码，呈现不同的显示效果。

而又随着动态渲染以及新的前端框架技术的广泛应用，浏览器调试信息包含越来越多的内容，逐渐地，浏览器调试信息也成为测试工作中需要覆盖的一个方面，而在实践过程当中，浏览器调试信息查看和验证可以使得测试工作事半功倍，甚至可以查看到一些被表面正常显示所掩盖的深层错误，从而消除隐患。

“F12”键启动页面调试，是前端开发人员工作中的利器，但这个控制台不仅仅对程序员非常友好，对测试工程师来说也常常能在其中找到普通网页中不曾展现的信息。所以它应该成为测试工程师必备的一项技能，甚至是常规测试过程。

浏览器调试在开发过程中是一个必需的环节，前端通过对浏览器的调试来确认前端架构呈现的效果是符合需求的，而测试工程师也可以通过查看调试信息来测试前端以及同后端的信息交互，甚至可以设定一些场景条件，来对UI进行更深入的测试。

一、调试信息栏简介

调试信息栏，是整个浏览器的属性设置及交互内容展示的面板，里面包含了页面前端显示和前后端交互信息的全部内容。

一般启动页面调试信息栏是通过按下“F12”键，启动后页面如图，不同浏览器显示的界面大同小异，但是内容是相同的。

调试信息栏内包含的信息非常全面，但并非所有的内容都是测试过程中需要关注的，因此，本文中只着重介绍正在日常测试工作中会经常涉及到的几大方面，以及需要着重检查的check point。

可以通过鼠标拖拽来确定显示栏的大小，另外通过选择：Customize and control DevTools菜单下的Dock Side，可以选择调试信息栏停靠在页面的位置。

二、调试信息栏的项目和内容

整个信息栏一般分为几大部分，如图所示：

首先最上面的是功能菜单区，在这里，可以选择不同的查看项类型，而下方的内容显示区，则会显示选择的类别内容。

最右侧的页面属性区则是显示当前页面元素的各种文本属性或可视属性。

最下方则是页面信息区，一般的隐藏信息都会在这里显示，包括调试信息栏本身的一些状态都会显示在这里。但这个区域并不是测试工程师需要特别关注的部分。

一、调试信息查看器的分项介绍

3.1功能菜单区

在这一区域，有如下几种不同的类别：Elements、Console、Sources、Network、Performance、Memory、Application、Security、Lighthouse、Recorder等

其中Elements（元素）是以源代码的形式显示网页内所有内容的方式，也就是我们常说的HTML代码，在这个功能模式下，页面所有的UI元素都和源代码中的每一行或每一部分对应。使用菜单栏的点选功能，就可以看到具体的元素及其范围和源代码中哪一部分对应，从而更精确地定位元素。如图：

可以看到在点选模式下，图中画红框的部分已经被高亮对应起来，方便进行比对，同时在UI界面上列出元素的基本属性。自动化测试中使用xpath进行元素定位，就是在这个模式下进行的。

Console（控制台）则是可以通过输入命令行的模式，直接对当前的界面和连接的后端服务进行操作。具体操作多见于前端开发人员调试，测试工程师主要使用的则是断言、计数、打印对象等等，使用的场景并不多。如下：

Sources（来源）是以分级目录的形式提供给前端开发人员针对文件进行调试的页面模式，在工作区域打开的文件页面，显示文件代码，而此时可以直接打入断点，然后通过步进运行来观察显示值的变化。如下：

Network（网络）是用来查看网络请求内容的页面，包括前端发起的请求，以及后端的响应内容，还有可以查看cookie信息。包括响应状态码、响应数据类型、响应数据大小以及响应时间等，还可以对请求进行筛选和分类。如下：

这个是测试工程师最为关注的页面，没有之一，在这里可以观察和监测到前后端交互的所有细节，并且大量的问题也可以在这里被检出，哪怕是页面显示一切正常。

Performance（性能）页面是用来检测页面性能的模式，主要是由页面性能的高级汇总，例如帧率、CPU占用率以及网络请求等信息组成，可以通过对该页面的录制/回放来进行有关性能的测试。如下：

一般说来，在日常的测试中，测试工程师依然会将页面显示正常作为主要的关注点，对于性能方面，如果不是需要承受海量并发的情况，在这个页面，前端开发工程师要比测试工程师更加关注数据的健康程度，而这一点在开发和测试的工作内容上几乎是相同的。

Memory（内存）是内存调试页面，可以监控内存的使用情况、时间的耗时以及回收的内存大小。浏览器提供页面实时占用内存的数据，可以连接到远程目标并实时观察内存使用情况。如下：

Application（应用）是存放浏览器缓存的地方，这里的缓存分两种，一种是本地缓存，另一种是浏览器缓存。在这里查看所有的内容，主要作用是检查web应用加载的所有资源。如下：

3.2测试工程师常用的操作

一般来说，作为测试工程师，最常使用和调试的是Elements、Network、Application三个页面。

Elements页面中，可以通过在页面的目标元素上，使用鼠标右键单击后选择“检查”，就可以在调试栏中浏览到目标元素的各项属性。如下：

标出的区域就是在Elements栏中显示的软件属性。在Edge和IE浏览器中，右键菜单还可以看到查看页面源代码，也是以页面结构排列的HTML语言，了解代码的测试工程师，可以在这个页面针对代码进行走查。

四、调试信息查看器的内容错误提示

1.    前端错误的查看和定位

即使是在页面显示正常的情况下，也可能存在很多错误，而前端的错误，通常是与界面功能、UI和兼容性相关，涉及到jsp、css、html方面比较多，而这类错误，一般是分两种，一种是页面元素定义或js有问题，如果是js写的有问题，一般浏览器都会直接显示报错 ，对于出错的js可以在Sources下查看对应报错的文件，基本上都会找到错误原因，如变量未定义，参数未定义等，这一类错误都很好解决。

现在的Web页面中，静态页面是比较少见的了，绝大部分都是动态页面，如果页面中使用了脚本或者EL表达式存值，如果存在错误，会直接出现页面报错，在控制台中是可以直接看到错误行号和错误代码的，可以根据页面的错误提示，直接在Console中或源代码中进行查找和更正。

在现有的公开网站上，几乎是无法找到这前端本身的错误的，因为所有的页面本身的错误，都会在初期的调试和测试过程中被悉数改正。但是作为参与这一过程的测试工程师来说，这一项技能则是必不可少的。

2.    后端错误的查看和定位

后端（Back-End）的错误，一般都会以页面提示的情况出现，这类问题往往会让使用者认为是页面的错误，也有认为是网站坏掉的情况（虽然也有相同的效果，但那是另一个维度，本文不做讨论）。

还有一大部分的后端错误，本身页面是不会显示错误的，需要在调试模式中进行检查才能发现，因为在页面显示甚至用户正常操作中都可能无法第一时间识别，所以这类错误在一般的测试进程当中，都是比较隐蔽的，模拟用户操作检查，效率低且容易遗漏。所以需要在控制台模式下，针对前后端的接口进行检查，如下：

在浏览器页面显示正常的情况下，API请求是报错的，但此时如果没有切换到“Network”栏，是无法发现其中的一个或若干请求是存在错误的。

一、调试信息配合内容的检查

以上图所显示的信息为例，单击报错的接口请求，就可以看到Headers的详细信息，如下：

可以看到这是一个Get请求的返回码，返回码是401。含义是未经授权的访问，这个时候基本上就可以确认是登录信息传递的问题，主要问题出在后端，可以倒推以下几种可能：

1）登录账号未在用户数据库中存储成功

2）使用了未经注册的用户信息

3）用户信息的传递出现错误

在有登录信息或者表单字段等的操作流程中，可以在API的Response栏中，查询到以json格式传递的内容项及其内容值。对应Headers栏中General下RequestURL显示的https/http协议，同RemoteAddress中端口号的对比，确认传递信息是否经过相应的加密。此处稍作发散，不再展开。

此时，可以点击Console标签页，查看Get请求的具体报错信息。需要说明的是，本文阐述的思路是遇到问题的通用思路，但选取的网站是不太可能出现文中说明的问题的，仅作为操作说明。

当从这两处收集到了足够多的信息后，可以按照上面所说的思路进行排查，比如使用DBeaver/MySQL等工具对数据库进行检查，使用Fiddler等工具对每个环节中的数据传输进行抓包分析，确定问题根因。

这一类数据传输问题，还有可能是各个环节中字符的数据类型和长度限制导致的。在这样的问题排查中，需要发散思维，逐步缩小范围，最终定位问题。

在这里需要提醒的是，无论前端后端的测试，在开始新版本的测试前，因为缓存的存在，会有新版本deploy后，原有问题仍然存在，尤其是前端问题。这是由于忘记清空缓存，在页面布局和元素没有变化的情况下，浏览器会优先读取缓存中的文件导致的。

在此，单纯按F5进行刷新是没有作用的，并不能让浏览器读取新页面，此时的刷新需要测试工程师手动清空缓存，但浏览器自带的清空cookies等功能，并不能完全达成效果，如下：

这样的操作往往并没有彻底清空缓存，所以还是会产生读回旧页面的问题，一般的简单页面可以采用Ctrl+F5强制读取新页面来刷新。当测试进行了很久，想要彻底清空缓存，可以采用如下办法：在调试模式中，选择“Application”标签页，选中“Storage”选项，会出现如下界面：

在此可以看到页面存储以饼图的形式显示出文件大小和种类，将途中所有复选框全部勾选，然后点击“Clear site data”，就可以彻底清空测试之前页面时所下载的所有脚本、元素和框架信息。

同时，在进行API信息检查的时候，也建议测试工程师在Network页面禁用缓存。这样，所有的调试都会实时调用端口服务，能够更快捷地检查到前后端交换的信息。如下：

Web测试中，浏览器的调试模式是一个非常有用的工具。利用好这个模式，可以在最大限度内发现几乎所有的隐含问题，甚至有经验的测试工程师，在一定程度上可以引导开发人员进行性能调优。

将其作为Web测试中的常规流程内容，则可以大大提升测试效率，有助于在这个层面上发现尽可能多的缺陷，从而提升测试的效果，确保质量。

岳妙慧