目录
- 打开开发者工具
- Elements 面板：调试 HTML 和 CSS
- Console 面板：调试 JavaScript
- Sources 面板：调试源代码
- Network 面板：分析网络请求
- Application 面板：管理存储
- Performance 面板：性能分析
- Lighthouse 面板：性能优化
1. 打开开发者工具
在浏览器中，按下 F12 或 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac）即可打开开发者工具。你也可以右键页面，选择“检查”来打开。
2. Elements 面板：调试 HTML 和 CSS
Elements 面板 是调试 HTML 和 CSS 的主要工具。你可以在这里查看和修改页面的 DOM 结构及样式。
2.1 查看和修改 DOM
- 在 Elements 面板中，点击左上角的“选择元素”按钮（或按
Ctrl + Shift + C），然后点击页面上的元素，即可定位到对应的 DOM 节点。 - 右键 DOM 节点，可以删除、复制或编辑 HTML。
2.2 调试 CSS
- 在右侧的 Styles 面板中，可以查看和修改元素的 CSS 样式。
- 勾选或取消勾选样式属性，实时查看效果。
- 点击样式属性值可以直接修改。
3. Console 面板：调试 JavaScript
Console 面板 是调试 JavaScript 的主要工具。你可以在这里查看日志、执行代码和调试错误。
3.1 查看日志
- 使用
console.log()、console.error()等方法输出日志。 - 日志会显示在 Console 面板中，点击日志可以定位到源代码。
3.2 执行代码
- 在 Console 面板中直接输入 JavaScript 代码并执行。
- 例如，输入
document.title可以查看当前页面的标题。
4. Sources 面板：调试源代码
Sources 面板 是调试 JavaScript 源代码的主要工具。你可以在这里设置断点、单步调试和查看调用栈。
4.1 设置断点
- 在 Sources 面板中，找到需要调试的 JavaScript 文件。
- 点击行号左侧，设置断点。
- 刷新页面，代码执行到断点时会暂停。
4.2 单步调试
-
使用调试工具栏中的按钮进行单步调试：
- 继续执行：继续运行代码。
- 单步跳过：执行当前行，不进入函数内部。
- 单步进入：进入函数内部调试。
- 单步跳出：跳出当前函数。
5. Network 面板：分析网络请求
Network 面板 用于分析页面的网络请求，包括请求的耗时、状态码和响应内容。
5.1 查看请求详情
- 在 Network 面板中，可以看到所有网络请求的列表。
- 点击某个请求，可以查看请求的详细信息，包括请求头、响应头和响应内容。
5.2 过滤请求
- 使用过滤器快速查找特定类型的请求，例如 XHR、JS、CSS 等。
- 在搜索框中输入关键字，可以过滤出包含该关键字的请求。
6. Application 面板：管理存储
Application 面板 用于管理浏览器的本地存储，包括 LocalStorage、SessionStorage、Cookies 等。
6.1 查看和编辑存储
- 在 Application 面板中，可以查看和编辑 LocalStorage、SessionStorage 和 Cookies 的内容。
- 右键存储项，可以删除或编辑。
7. Performance 面板：性能分析
Performance 面板 用于分析页面的性能，包括 CPU 使用率、内存占用和渲染性能。
7.1 录制性能数据
- 点击“录制”按钮，开始录制页面的性能数据。
- 操作页面，然后停止录制，查看性能分析报告。
7.2 分析性能瓶颈
- 在性能报告中，可以查看每个任务的耗时，找到性能瓶颈。
- 重点关注长任务和频繁的重绘、重排。
8. Lighthouse 面板：性能优化
Lighthouse 面板 是一个自动化工具，用于分析页面的性能、可访问性和 SEO。
8.1 生成报告
- 在 Lighthouse 面板中，选择需要分析的类别（如性能、可访问性）。
- 点击“生成报告”，等待分析完成。
8.2 查看优化建议
- 报告会列出页面的得分和优化建议。
- 按照建议优化代码，提升页面性能。
