1. 元素检查与编辑：按`Ctrl + Shift + C`（Windows/Linux）或`Cmd + Opt + C`（Mac）快速打开元素选择工具，点击页面元素可定位到`Elements`面板。右键点击元素可编辑HTML或CSS，修改后效果实时显示。在`Styles`面板中，可临时调整样式，如修改颜色、边距等，适合测试设计效果。
2. 网络请求分析：在`Network`面板中，刷新页面可记录所有网络请求。查看请求状态、耗时、文件大小，筛选“慢请求”优化加载速度。右键点击请求可复制链接或cURL命令，方便在终端复现。启用“禁用缓存”功能，可模拟首次加载，精准分析资源请求。
3. 断点调试与代码执行：在`Sources`面板中，点击行号设置断点，代码执行到此处会暂停。使用`Step Over`（逐行执行不进入函数）、`Step Into`（进入函数内部）等按钮逐步调试。在控制台输入变量名或表达式，可实时查看值。按`F8`可继续执行到下一个断点。
4. 性能分析与优化：在`Performance`面板中，点击“录制”后操作页面，生成性能报告。关注“加载时间”“脚本执行时间”等指标，识别瓶颈。使用“覆盖范围”功能，对比不同版本的资源文件，避免重复加载未变更的资源。
5. 移动端模拟与调试：在`Console`面板输入`document.body.style.width = 375 + 'px'`，模拟手机屏幕宽度。在`Toggle device toolbar`（快捷键`Ctrl + Shift + M`）中选择设备型号，测试响应式布局。启用“显示描边”功能，高亮页面中的触控区域。
6. 常见问题解决方案：若开发者工具无法打开，尝试重新安装Chrome或检查系统权限。若网络请求数据不显示，确保`Network`面板已开启且未被过滤。若断点不生效，确认源代码未被压缩或混淆，必要时在`Sources`面板手动映射源码。