使用Chrome开发工具找出造成FOUC的原因

Question

我一直在修复一个网站JS，将它移到最底层，缩小等等。除了在博客（电子商务网站）之外它都没关系，因为页面加载它导致标题是没有风格的大约一秒钟，但它不会发生在网站的任何其他部分，即使他们共享相同的CSS / JS。博客图像很重，但是图像被禁用（我也试过禁用脚本），它仍然会发生。这是因为我做了改变，我无法简单地回复，但改变都是积极的，如果有的话应该有所帮助。我看不到任何JS导致它（因为我删除了脚本以查看它是否在那里）并且它不会发生在FF中。

我会分享一个链接，但它位于一个封闭的登台服务器后面。我可以提供代码，但我不确定是什么，而且有很多。

所以，我曾希望我可以使用开发工具来弄清楚发生了什么，可能是时间线视图等等。我只是不知道我该怎么做。

有什么建议吗？

Ed：我在登台和现场网站上都使用了网络标签，正如你从图片中看到的那样，它们是相同的，css是在实际页面之后加载的第一件事，在现场网站上它是实际上是ga.js.所以现在它更像是一个谜题......

Answer 1

别担心，想通了......这是Stylebot Chrome扩展程序..不知道为什么它在进行这些更改之后现在导致它，以及它为什么不影响实时网站。我没有为这个域定义样式。我猜错了。

干杯：）

Answer 2

开发工具中的时间轴选项卡用于基准测试/站点性能测试。如果您想了解正在加载的内容，时间和地点，您可以使用网络标签。

通过一些相关消息填充console.log（）也是一种常见的做法，这样您就可以知道代码的某些部分正在运行。