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

最新推荐文章于 2025-07-01 21:42:44 发布

小码菌

最新推荐文章于 2025-07-01 21:42:44 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签：测试工具

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/qq_37772593/article/details/131941163

通过F12可以开启Chrome的开发者工具，它支持界面元素检查，设备模拟，断点设置，样式修改，以及在console控制台查看错误和执行脚本。资源请求时间分析帮助定位性能问题，而Application面板可用于查看登录cookie等信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

在这里插入图片描述

2.检查界面元素，设备切换，网页或终端（终端选择），断点查看

在这里插入图片描述

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

在这里插入图片描述

4.如何打断点

在这里插入图片描述

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

在这里插入图片描述

6.修改界面元素的样式

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

10.application简介

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。