如何查看Chrome浏览器的开发者工具日志
来源：克罗米小站官网2024-12-03
本文将给大家介绍的是Chrome浏览器开发者工具日志查看教程，通过下面的步骤，你应该能够轻松地查看和分析Chrome浏览器中的开发者工具日志。这些技能对于调试复杂的网页应用和优化性能非常有帮助。
一、打开开发者工具
Chrome提供了多种方式打开开发者工具，你可以根据自己的习惯选择适合的方式：
1.快捷键:按`F12`或`Ctrl+Shift+I(Windows)`/`Cmd+Option+I(Mac)`。
2.右键菜单:在页面上点击右键，选择“检查”或者“Inspect”。
3.菜单选项:点击右上角的三个垂直点，选择“更多工具”-“开发者工具”。
二、切换到Network面板
打开开发者工具后，默认显示的是“Elements”面板。要查看网络请求日志，你需要切换到“Network”面板。你可以在顶部菜单中看到以下选项，点击“Network”即可进入网络面板。
三、Preserve log选项
在进行页面跳转或重新加载时，默认情况下之前的网络请求记录会丢失。如果你希望保留这些记录，可以勾选“Preserve log”选项：
1.在Network面板的左上角有一个持久化记录按钮（两个箭头）。
2.勾选这个按钮，这样即使页面跳转，之前的请求记录也会保留下来。
四、查看和分析日志
现在你可以看到所有网络请求的列表，每个请求都会显示以下信息：
1.Name:请求的名称，通常是URL。
2.Status:HTTP状态码，例如200 OK,404 Not Found。
3.Type:请求的类型，比如Document,Script,CSS,XHR等。
4.Initiator:发起请求的网页元素或脚本。
5.Time/Size:请求的响应时间和数据大小。
6.Timeline:请求的详细时间轴，包括DNS查询、连接建立、数据传输等。
你可以点击任何一个请求查看更多详细信息，比如请求头、响应头、请求体、响应体等。这对于调试网络问题非常有用。
五、过滤和搜索
为了更高效地查找特定的请求，你可以使用过滤和搜索功能：
1.过滤器:在Network面板的左上角有一个过滤框，你可以输入关键词来过滤请求，比如URL片段、状态码等。
2.状态码过滤器:你可以选择仅显示特定状态码的请求，比如只显示404错误。
3.类型过滤器:你可以选择仅显示某种类型的请求，比如XHR或JS。
4.域名过滤器:你可以选择仅显示来自某个域名的请求。
六、保存和导出日志
如果你需要保存或者进一步分析这些网络请求日志，你可以将它们导出：
1.在Network面板的右上角有三个竖点，点击它并选择“Save as HAR with content”或“Save as HAR without content”。
2.这将把当前的网络请求日志保存为一个`.har`文件，你可以用文本编辑器或者专门的工具查看这个文件。
