在使用Chrome浏览器浏览网页的过程中，有时候我们可能需要查看页面中外部文件资源的加载情况，以便更好地了解网页的运行机制、排查问题或者进行性能优化。下面将详细介绍在Chrome浏览器中查看外部文件资源加载情况的方法。
使用开发者工具查看
1. 打开开发者工具：在Chrome浏览器中，按下键盘上的“F12”键，或者右键点击页面空白处，选择“检查”，即可打开开发者工具。这是查看网页各种信息的强大工具。
2. 进入“网络”面板：在开发者工具窗口中，可以看到有多个不同的面板，如“元素”“控制台”“源代码”等。点击“网络”面板，这里展示了当前页面加载过程中的所有网络活动信息。
3. 刷新页面：为了获取最新的网络资源加载数据，需要刷新当前页面。可以在开发者工具中点击左上角的刷新按钮，或者直接按下“Ctrl + R”（Windows/Linux）或“Command + R”（Mac）组合键来刷新页面。刷新后，开发者工具会开始记录页面加载过程中的各种网络请求。
4. 分析资源加载情况：在“网络”面板中，会列出所有加载的资源，包括HTML文件、CSS文件、JavaScript文件、图片、字体等。每条记录都包含了该资源的相关信息，如文件名称、文件大小、加载时间、状态码等。可以通过查看这些信息来了解每个外部文件资源的加载情况。例如，如果某个资源的状态码显示为“404”，则表示该资源未找到；如果加载时间过长，可能会影响页面的整体性能。
5. 筛选特定类型的资源：如果想要专注于查看某一类外部文件资源的加载情况，可以使用筛选功能。在“网络”面板的顶部，有一个筛选框，可以输入关键词来筛选特定的资源类型。比如，输入“css”可以筛选出所有的CSS文件；输入“js”可以筛选出所有的JavaScript文件。
查看具体资源的详细信息
1. 点击资源记录：在“网络”面板中找到想要查看详细信息的外部文件资源记录，然后点击该记录。
2. 查看详细信息：点击资源记录后，会在右侧的详细信息区域显示出该资源的更多信息。其中包括请求头、响应头、预览等内容。请求头包含了浏览器向服务器发送的请求信息，如请求方法（GET、POST等）、请求地址等；响应头则包含了服务器返回给浏览器的响应信息，如状态码、内容类型等。通过查看这些详细信息，可以更深入地了解资源的加载过程和可能出现的问题。
利用瀑布图查看加载顺序和时间
1. 切换到瀑布图视图：在“网络”面板的右上角，有一个下拉菜单，可以选择不同的视图模式。选择“瀑布图”视图，这样可以更直观地看到各个外部文件资源的加载顺序和时间关系。
2. 分析加载顺序和时间：在瀑布图中，每个矩形代表一个资源的加载过程，矩形的长度表示加载时间，矩形的位置表示加载顺序。通过观察瀑布图，可以清楚地看到哪些资源是并行加载的，哪些资源是串行加载的，以及哪些资源可能因为等待其他资源加载而造成延迟。这有助于发现性能瓶颈并进行优化。
通过以上步骤，就可以在Chrome浏览器中方便地查看外部文件资源的加载情况了。这对于网页开发者来说是一个非常有用的功能，可以帮助他们更好地优化网页性能，提高用户体验。同时，对于普通用户来说，也可以通过查看资源加载情况来了解自己访问的网页是否存在问题。希望本文能帮助你掌握在Chrome浏览器中查看外部文件资源加载情况的方法。