F12抓包01：启动、面板功能介绍、语言设置、前端样式调试
浏览器检查工具通常用来作为浏览器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 | 性能数据分析 | 录制操作，分析性能。 |
三、切换语言
① 点击检查工具右上角“设置”图标，进入设置界面；
（点击右上角“设置”）
② 设置界面“Preference”→“Language”，选择“中文”；
（设置语言）
（选择中文）
③ 重启检查工具：关闭检查工具，重新打开，使配置生效。
（重启非常重要，后续的fiddler、Charles工具都是配置后需要重启生效。）
（菜单已切换成中文）
四、前端样式调试
“元素”tab导航下，修改标签属性可以实时查看网页修改后效果（刷新后复原），进行前端调试。
举例：百度搜索页
①html标签，选中“百度一下”按钮，修改value为“土小帽点一下”；
②右侧样式可以修改网页css样式，修改按钮宽度、高度、颜色。
