1. 开启开发者模式
- 快捷键方式：在Windows或Linux系统上，按Ctrl+Shift+I或F12键；在Mac系统上，按Cmd+Option+I或Cmd+Option+J键。
- 右键菜单方式：打开你想要调试的网页，右键点击页面上的任意位置，选择“检查”或“审查元素”。
- 地址栏方式：在Chrome的地址栏中输入chrome://devtools/并回车，可进入开发者工具的介绍页面。
- 扩展程序按钮：点击浏览器右上角的三个点菜单图标，选择“更多工具”，然后选择“开发者工具”。
2. 使用技巧
- 元素面板（Elements）：可实时查看和修改网页的DOM结构、CSS样式及布局。能展开/折叠节点，右键可删除元素、复制选择器等。还可通过勾选布局相关选项，如盒模型、显示网格或弹性布局，可视化布局结构。选中元素后按H键可快速隐藏元素，直接在DOM树中拖动节点可实时预览布局变化，按Ctrl+F（Windows/Linux）或Cmd+F（Mac）输入CSS选择器可定位元素。
- 控制台（Console）：用于执行JavaScript代码、查看日志、调试错误。可直接输入JavaScript语句并回车执行，如console.log('Hello')。使用$0可引用当前选中的DOM元素，$_可引用上一次操作的返回值。可按级别过滤日志（错误/警告/信息），也可在搜索框中输入关键词过滤。支持多行输入，按Shift+Enter换行，Enter执行代码。还可使用console.time('test')和console.timeEnd('test')测量代码执行时间，console.log('%cCondition met', 'color: red', variable)可自定义日志样式。
- 来源面板（Sources）：用于调试JavaScript代码，设置断点，查看调用栈。可在左侧目录树中找到并打开JavaScript文件，点击行号添加断点，右键可编辑断点输入条件。调试时，F8用于继续执行，F10用于单步跳过函数，F11用于单步进入函数，Shift+F11用于单步跳出函数。还支持格式化代码，右键可选择格式化程序美化压缩后的代码。
- 网络面板（Network）：监控网络请求，分析资源加载性能。请求瀑布图水平轴为时间，垂直轴为资源，颜色区分请求类型。点击请求可查看标头、预览、时间线等详细信息。可过滤请求类型，排序响应时间。可模拟网络条件，如选择慢3G或自定义限速，测试弱网环境。还可拦截请求，右键请求选择阻止请求URL，模拟资源加载失败。
- 性能面板（Performance）：分析页面加载和交互的性能瓶颈。点击录制后操作页面，或选择录制并重新加载页面自动记录。时间轴包括主线程（显示JavaScript执行、布局、绘制等事件）、网络（显示资源加载瀑布图）、帧（显示帧率，红色块表示掉帧）。关键指标有FCP（首次内容绘制）、TTI（交互时间）等。可点击火焰图查看函数调用栈，定位耗时操作，在性能设置中添加正则表达式可忽略无关脚本。
- 内存面板（Memory）：检测内存泄漏，分析内存使用情况。可点击拍摄快照，查看当前内存中的对象分布，通过两次快照的差异找出内存增长的原因。在Summary视图中查找未释放的DOM节点，在Containment视图中查看全局变量引用的对象。还可手动触发GC，点击收集垃圾强制执行垃圾回收，观察内存变化，勾选内存录制，查看内存随时间的增长趋势。
- 应用程序面板（Application）：管理网页的存储、缓存和服务工作线程。可直接编辑LocalStorage/SessionStorage的键值对，支持新增、删除和批量清除。可查看IndexedDB/Web SQL的数据库结构，执行查询和删除操作。查看注册的Service Worker，支持更新、停止和删除，管理离线缓存资源，模拟断网环境测试。还可一键删除缓存、Cookie等数据，模拟离线测试PWA的离线功能。
- 安全面板（Security）：检查网页的安全性，如HTTPS、证书、混合内容。有效HTTPS会显示绿色锁标志，表明连接加密，页面包含HTTP资源会有红色警告提示存在安全风险。点击连接→证书，可查看证书颁发机构、有效期等信息。可在地址栏输入chrome://flags/allow-insecure-localhost启用不安全连接测试。
- 灯塔面板（Lighthouse）：自动化生成性能、SEO、PWA等方面的审计报告。可选择设备类型（桌面/移动），勾选性能、可访问性等类别，点击生成报告。报告分数越高表现越好，会针对每个失败项提供优化方案，如压缩图片、启用缓存等。可无痕模式运行避免插件干扰，确保测试结果准确，还可点击导出为HTML离线查看或分享报告。
