如何使用web端的控制台（F12）

在web测试的时候需要使用控制台来进行查看接口和定位问题

在测试过程中打开控制台的方法：

1：直接电脑上按F12

2:在浏览器上右键点击“检查”

这是是Chrome浏览器的开发者工具界面

• Elements（元素），Console（控制台），Network（网络接口），Sources（源代码），Application（记录加载的资源信息）这几个类型是常见的、需要关注的

使用场景

Elements（元素）

场景1：比如说在测试过程中，浏览页面上多出一些多余的文字和图片或者是其他不符合预期的页面内容，可以通过Elements（元素，查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈）进行排查问题。

点击Elements--点击左上角的箭头图表---点击想要定位的元素信息

场景2：修改元素与属性（Elements这个修改元素的功能对于QA来说很少用），这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，这个功能也是作为调试页面效果而使用

点击Elements--点击左上角的箭头图表---点击想要定位的元素信息---右键点击元素进行修改。

add..:添加属性，edit..:修改属性，Edit as html:编辑元素代码

 Elements页面，右侧栏的功能

 

Console（控制台）

场景1：可以查看网页运行后提示的消息，错误或者警告以及输出内容等，比如播放器在播放过程中出现了断流，拉流失败等现象时，可以通过控制台报错信息定位代码问题。

场景2：在观看页上评论权限不生效的时候，可以通过在Console里面输入对应的命令来判断问题

场景3：查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉

痛点：由于发现的问题都不会是必现的，即不能轻易判断问题出现的原因，所以复现成本就会很高。可以统一一下，让开发同学将报错信息打印在Console里面，这样就算是偶现的问题也可以获取到对应的requestid信息。

Network（重点）

从发起网页页面请求Request后分析HTTP(S)请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等）

• Header：请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等
• Preview：预览面板，用于资源的预览
• Response：响应信息面板包含资源还未进行格式处理的内容
• Timing：资源请求的详细信息花费时间
• Cookies:身份

 

场景1：页面出现报错信息时，可以通过查看Network中相应接口请求信息判断问题，可以通过复制preview中的“requestid”或者“Request Payload”的参数或者是response参数等信息给后端同学查相应的报错日志定位问题

Sources（源代码）QA少用

主要用于查看web站点的资源列表及javascript代码的debug

 

Application（记录加载的资源信息）

记录网站加载的所有资源信息，主要关注点存储数据（Cookies）、缓存数据等

场景1：当我们测试埋点数据的时候，第一步：根据Application里面的Cookies中的字段和值测试，第二步：在对应的平台埋点事件，如查看“tea_unique_id”和value