1. 快速打开与隐藏
- 快捷键启动：按`Ctrl+Shift+I`（Windows）或`Cmd+Option+I`（Mac）直接打开→支持在任意网页调试。
- 分离面板：点击工具右上角的“双箭头”图标→拖动工具栏独立为窗口→方便多屏幕操作。
2. 元素检查与实时编辑
- 定位元素：在“Elements”面板右键点击HTML标签→选择“Inspect”→高亮页面对应区域（可修改属性值立即生效）。
- 样式覆盖：在“Styles”板块双击CSS属性→输入新值（如将`color: black`改为`red`）→无需刷新页面预览效果。
3. 网络请求分析
- 过滤请求类型：在“Network”面板左侧筛选器中勾选“XHR”→仅显示Ajax请求→快速定位API接口。
- 模拟弱网环境：点击右上角“Throttle”→选择“Slow 3G”→测试页面在低网速下的加载性能（可调整延迟和丢包率）。
4. 控制台输出与调试
- 日志级别筛选：在“Console”面板点击“错误”、“警告”标签→隐藏非关键信息→快速定位代码报错。
- 自定义输出：在控制台输入`console.log('测试消息')`→支持添加时间戳、分组展示（如`console.group('分组名')`）。
5. 移动端模拟与调试
- 设备分辨率切换：在“Device Mode”工具栏选择手机型号（如iPhone 14）→自动调整视口尺寸→测试响应式布局。
- 触摸事件模拟：右键点击页面元素→选择“Simulate Touch Event”→触发点击、滑动等手势操作。
6. 源码调试与断点设置
- JavaScript断点：在“Sources”面板找到脚本文件→点击行号添加断点→使用“Step Over/Into”逐行调试。
- 远程调试：在地址栏输入`chrome://inspect`→连接手机或虚拟机上的Chrome→跨设备调试网页（需开启USB调试）。