如何找出哪些JavaScript异步调用需要很长时间才能在我的网页上完成？

Question

我的网站是用Wordpress构建的。它工作得很好，但现在语法高亮插件需要很长时间才能加载（超过一分钟）。我不是客户端/ javascript的人，所以我不知道如何调试和解决这个问题。我所知道的是Chrome（在我的页面加载后）在状态栏中显示了我：

因此浏览器无法通过JavaScript加载内容。但是什么？有没有办法让Chrome告诉我它要连接到哪里？我试过Inspect，但我不知道该怎么做。

有人能解释一下这个问题吗？

Answer 1

使用 Chrome开发者工具，您可以衡量资源加载时间。

网络面板记录有关网页上每个网络操作的信息，包括详细的计时数据，HTTP请求和响应标头，Cookie等。

Chrome开发者工具网络面板的

基本用法示例：

1. 打开开发者工具（MacOS：Alt + Cmd + I Win：F12，Ctrl + Shift + I）
2. 打开“网络”面板
3. 切换停用缓存
4. 重新加载页面（F5或通过Chrome重新加载按钮）

提示：如果Chrome开发者工具已打开，则在长按重新加载按钮后，您可以使用其他重新加载选项。 （例如Hard Reload ）