当前位置：首页 > article >正文

F12抓包01：启动、面板功能介绍、语言设置、前端样式调试

article 2024/9/24 4:31:16

浏览器检查工具通常用来作为浏览器web服务测试过程中，辅助测试、排查问题、定位缺陷的工具。

本文以mac系统下，当前比较常用的Chrome浏览器为例，讲解“检查”工具的常用功能操作方法。

一、打开方式

1、鼠标操作：浏览器网页界面 - 鼠标右键单击（mac双指单击触摸板） - 菜单浮层单击选择“检查”。

2、mac快捷键：fn + 触摸屏F12。

（Chrome浏览器“检查”工具）

二、导航菜单

（Chrome浏览器“检查”工具-英文）

（Chrome浏览器“检查”工具-中文）

英文名称	中文名称	功能
元素定位		从页面通过鼠标悬停或选定，定位页面元素。
设备仿真工具		模拟网页在各种终端的显示效果。
Elements	元素	查看和编辑网页的HTML结构和CSS样式。
Console	控制台	查看和调试JavaScript代码的输出和错误信息。可输出日志、警告和错误消息，或者执行特定的命令来与页面进行交互。
Sources	源代码/来源	查看和调试网页中的t代码。可设置断点，逐行执行代码，并查看变量的值和函数的调用堆栈，排查问题。
Network	网络 /网络分析	1. 分析网络性能； 2. 监视浏览器与服务器之间的网络请求和响应。查看请求的详细信息、响应的状态码和内容。
Performance	性能	性能分析，识别潜在的性能瓶颈和优化机会。提供了一些有用的工具和视图，如时间轴、内存分配和CPU占用等。
Memory	内存	查看当前网页的JavaScript占用的内存情况。
Applicantion	应用	本地存储，调试网页的离线和响应式设计功能。
Security	安全	显示当前网页的安全性信息。比如是否使用了HTTPS协议进行加密通信，是否存在潜在的安全风险等。
Lighthouse		前端性能测试插件，显示统计图样式测试报告。
Recorder	记录器	录制、回放操作过程： 1.录制并进行replay； 2.导出给开发进行replay复现bug； 3.导入进行replay； 4.分析页面性能。
Performance insights	性能数据分析	录制操作，分析性能。