1. 实时调试工具
- 元素检查：按`Ctrl+Shift+I`打开开发者工具→鼠标悬停直接查看DOM结构（如调整按钮位置时立即反馈）。
- 样式修改：在“Styles”面板双击属性值→实时编辑CSS（如测试不同字体颜色搭配）。
- 事件监听：在“Event Listeners”中查看绑定事件→验证点击/悬浮效果（如检查表单提交触发逻辑）。
2. 网络请求分析
- 抓取资源详情：在“Network”面板筛选“Doc”类型→查看HTML加载时间（如诊断首页渲染速度慢问题）。
- 模拟弱网环境：右键点击请求→选择“Block Request”→测试无图模式下的加载体验（如优化移动端首屏）。
- 追踪API调用：使用“XHR”过滤器→检查数据接口响应状态（如排查403错误原因）。
3. 自动化测试支持
- 控制台执行脚本：在“Console”输入`document.querySelector('.btn').click()`→模拟用户点击（如测试弹窗触发逻辑）。
- 保存日志信息：右键复制请求Header→快速获取认证token（如对接OAuth2接口）。
- 手机模式切换：按`Ctrl+Shift+M`→模拟不同设备分辨率（如测试响应式布局断点）。
4. 性能优化检测
- 录制性能轨迹：在“Performance”面板点击“Record”→生成FPS曲线图（如查找动画卡顿原因）。
- 内存泄漏分析：在“Memory”面板多次采样→对比堆栈变化（如发现未释放的定时器）。
- 首屏时间标记：在“Lighthouse”报告查看“First Contentful Paint”指标→优化图片加载策略（如延迟加载非关键资源）。
5. 代码片段管理
- 本地存储片段：在“Snippets”面板新建→保存常用JS代码块（如封装ajax请求函数）。
- 导入外部脚本：点击“{}”图标→引用CDN资源快速测试（如加载Polyfill解决兼容性）。
- 命令行操作：在终端输入`chrome --user-data-dir="C:
ewprofile"`→创建独立开发环境（如避免插件干扰调试）。
6. 版本差异对比
- 多标签页对照：同时打开不同浏览器版本→对比Flex布局渲染差异（如处理旧版IE兼容问题）。
- 浏览器标识伪装：在开发者工具“Console”输入`Object.defineProperty(navigator, 'userAgent', {value: 'Mozilla/5.0'});`→模拟特定UA（如测试Safari专属特性）。
- 私有字段测试：在地址栏输入`chrome://flags/enable-private-fields`→启用JavaScript私有属性支持（如实验新语法特性）。