一、打开开发者工具
1. 使用快捷键：按下Ctrl + Shift + I（Windows/Linux）或Cmd + Option + I（Mac），可以快速打开谷歌浏览器的开发者工具。也可以右键点击页面元素，选择“检查”来打开开发者工具。
2. 通过菜单进入：点击浏览器右上角的三个点，选择“更多工具”，然后点击“开发者工具”，同样可以打开开发者工具。
二、元素检查与编辑
1. 检查元素：在开发者工具中，按下Ctrl + Shift + C（Windows/Linux）或Cmd + Shift + C（Mac），可以将鼠标指针变为选择工具，此时点击页面上的元素，开发者工具会自动定位到该元素在代码中的位置，并在“Elements”面板中高亮显示。
2. 编辑元素：在“Elements”面板中，选中要编辑的元素后，可以直接修改其HTML和CSS代码。修改后，页面上的相应元素会实时发生变化，方便进行样式调整和布局优化。
3. 切换元素：按下Ctrl + [（Windows/Linux）或Cmd + [（Mac），可以选中当前元素的父元素；按下Ctrl + ]（Windows/Linux）或Cmd + ](Mac)，可以选中当前元素的子元素，方便在元素层级中快速切换。
三、网络分析
1. 查看网络请求：在开发者工具中，切换到“Network”面板，按下F5键或点击“刷新”按钮，可以开始记录页面的网络请求。在记录过程中，可以看到每个请求的详细信息，如请求方法、状态码、耗时等。
2. 过滤请求：按下Ctrl + F（Windows/Linux）或Cmd + F（Mac），可以打开搜索框，输入关键词来过滤网络请求，方便查找特定的请求。例如，输入“.js”可以只显示JavaScript文件的请求。
3. 停止记录：在记录网络请求过程中，如果需要停止记录，可以点击“Network”面板中的“停止”按钮，或者按下Esc键。
四、控制台操作
1. 查看日志：在“Console”面板中，可以查看浏览器的控制台日志，包括JavaScript错误、警告、信息等。按下Enter键可以执行当前输入的命令，按下Ctrl + Enter（Windows/Linux）或Cmd + Enter（Mac）可以执行多行命令。
2. 清除日志：在“Console”面板中，点击“清除”按钮，或者按下Ctrl + L（Windows/Linux）或Cmd + L（Mac），可以清除控制台日志，方便查看新的日志信息。
3. 调试代码：在“Console”面板中，可以输入JavaScript代码进行调试。例如，输入`console.log('Hello World')`，可以在控制台中输出“Hello World”。也可以在代码中设置断点，通过调试工具逐步执行代码，查看变量的值和程序的执行流程。
五、性能分析
1. 录制性能：在“Performance”面板中，点击“录制”按钮，然后进行页面操作，如加载页面、执行脚本等。操作完成后，点击“停止”按钮，可以生成性能报告。
2. 分析性能：在性能报告中，可以看到页面的各种性能指标，如帧率、内存使用、网络请求等。通过分析这些指标，可以找到性能瓶颈并进行优化。例如，如果发现某个操作导致帧率下降，可以检查相关的脚本或样式是否存在问题。
3. 保存报告：在“Performance”面板中，点击“保存”按钮，可以将性能报告保存为JSON格式的文件，方便后续分析或分享。
六、其他常用快捷键
1. 切换面板：按下Ctrl + 1至Ctrl + 6（Windows/Linux）或Cmd + 1至Cmd + 6（Mac），可以快速切换到对应的面板，如“Elements”“Network”“Console”等。
2. 放大/缩小：在开发者工具中，按下Ctrl + +（Windows/Linux）或Cmd + +（Mac）可以放大代码或元素视图；按下Ctrl + -（Windows/Linux）或Cmd + -（Mac）可以缩小视图。
3. 全屏模式：按下F11键或点击开发者工具右下角的全屏按钮，可以将开发者工具切换到全屏模式，方便查看和操作。
