1. 打开开发者工具
- 快捷键：按`Ctrl+Shift+I`（Windows/Linux）或`Command+Option+I`（Mac）直接打开。若仅需打开控制台，可使用`Ctrl+Shift+J`（Windows/Linux）或`Command+Option+J`（Mac）。
- 右键菜单：在网页任意区域点击右键，选择“检查”或“Inspect”。
- 菜单栏：点击浏览器右上角三个点图标，选择“更多工具” > “开发者工具”。
2. 核心面板功能详解
- 元素面板（Elements）
- 查看和编辑HTML/CSS：选中页面元素后，可直接修改其HTML结构或CSS样式，实时预览效果。双击样式属性即可编辑，修改后页面立即更新。
- 盒模型调试：点击元素后，页面会显示边框、内边距等布局细节，方便调整间距和尺寸。
- 快速定位元素：按`Ctrl+Shift+C`（Windows/Linux）或`Command+Shift+C`（Mac）进入元素选择模式，点击页面直接定位到对应代码位置。
- 控制台面板（Console）
- 执行JavaScript代码：在控制台输入命令（如`console.log("测试")`）可输出日志，或调用函数（如`document.title = "新标题"`）修改页面内容。
- 查看错误信息：脚本错误会显示在控制台，点击错误行可跳转到源代码面板对应位置。
- 交互式调试：支持声明变量、调用函数，甚至通过`$_`访问上一次执行结果。
- 网络面板（Network）
- 监控请求：记录所有网络请求（如HTML、CSS、JS、图片），显示状态码、加载时间、文件大小等。
- 过滤与搜索：按资源类型（如XHR、Doc）、状态码（如404）或关键词筛选请求，快速定位问题。
- 模拟网络环境：选择“Online”或“Slow 3G”等选项，测试不同网络条件下的加载表现。
- 源代码面板（Sources）
- 调试JavaScript代码：在代码行号处点击设置断点，刷新页面后自动暂停执行，逐步排查问题。
- 单步执行：使用“步入”“步过”“跳出”按钮控制代码流程，观察变量变化。
- 监控表达式：在“Watch”标签中添加表达式，实时跟踪变量值。
- 应用面板（Application）
- 管理存储数据：查看和删除Cookie、LocalStorage、SessionStorage、IndexedDB等数据，解决缓存导致的页面异常。
- 清除缓存：点击“Clear storage”按钮，清理浏览器缓存和扩展数据。
- 性能面板（Performance）
- 录制性能报告：点击“录制”后刷新页面，生成性能分析报告，包括帧率、JS执行时间、资源加载耗时等。
- 优化建议：通过火焰图找到耗时较长的函数，针对性优化代码或资源加载顺序。
3. 实用快捷键与隐藏功能
- 快速打开面板：`Ctrl+Shift+P`（Windows/Linux）或`Command+Shift+P`（Mac）调出命令菜单，输入关键词执行操作（如“Clear console”清空控制台）。
- 设备模拟：在应用面板中设置手机型号或自定义分辨率，测试响应式布局。
- 命令行交互：在控制台输入`performance.now()`记录时间戳，分析代码执行耗时。
如需进一步帮助，可访问Chrome帮助中心或联系谷歌技术支持获取详细指南。
