浏览器开发者模式F12的基本使用

chrome浏览器的开发者工具可通过F12快捷键打开

1.调整开发者工具在页面的显示

浏览器开发者模式F12的基本使用_第1张图片

2.检查界面元素,设备切换,网页或终端(终端选择),断点查看

浏览器开发者模式F12的基本使用_第2张图片

3.可查看不同手机的界面适配问题

浏览器开发者模式F12的基本使用_第3张图片

4.如何打断点

浏览器开发者模式F12的基本使用_第4张图片

5.目标位置界面点击鼠标右键,检查,也可打开开发者工具同时element元素,是选中目标元素。

浏览器开发者模式F12的基本使用_第5张图片

6.修改界面元素的样式

浏览器开发者模式F12的基本使用_第6张图片

7.console控制台:查看错误信息和调试性信息也可以写测试脚本

浏览器开发者模式F12的基本使用_第7张图片

8.source,可编写代码并执行

浏览器开发者模式F12的基本使用_第8张图片

9.根据前端请求和后台返回数据进行判断是前端还是后端的问题

浏览器开发者模式F12的基本使用_第9张图片

浏览器开发者模式F12的基本使用_第10张图片

浏览器开发者模式F12的基本使用_第11张图片

浏览器开发者模式F12的基本使用_第12张图片

Timing:资源请求的详细信息花费时间

浏览器开发者模式F12的基本使用_第13张图片

10.application简介

浏览器开发者模式F12的基本使用_第14张图片

11.如果需要登录系统的前提之下操作,可以通过如下方式获得登录cookie的头部信息

浏览器开发者模式F12的基本使用_第15张图片

浏览器开发者模式F12的基本使用_第16张图片

你可能感兴趣的:(测试工具)