【问题标题】:How can I use chrome dev tools to pinpoint the cause of elements on my page shifting?如何使用 chrome 开发工具来查明页面移动元素的原因?
【发布时间】:2021-03-04 07:53:59
【问题描述】:

我页面顶部的某些内容导致内容布局发生重大变化。 内容呈现,然后像 300px 一样向上跳,然后又跳回到正常位置。

我已尝试单步执行代码,但这似乎只有在您知道要停止代码的位置时才有用。

如何使用开发工具有效定位导致此问题的 javascript 和/或元素?

Here is the site

【问题讨论】:

  • 不只是链接麻烦的网站,你能发布一些代码吗?

标签: javascript google-chrome-devtools


【解决方案1】:

使用 Chrome 中的性能工具,您可以记录您的会话。 您可以将鼠标悬停在屏幕截图上,直到您看到页面发生变化。在这种情况下,就像发生跳转一样,您会看到一个“onLoad”事件

这可能表明页面加载事件中有一些 javascript 加载会改变您的样式?

单击匿名函数或任何这些事件将允许您在摘要中查看源代码中发生这种情况的位置。

然后您可以在发生这种情况的代码中设置断点。 (点击行左侧的行号)

继续尝试,直到找到可能是您的问题

【讨论】:

  • 感谢您的详细解答。我正在考虑这些建议。
猜你喜欢
  • 2018-07-18
  • 2018-03-09
  • 1970-01-01
  • 2016-09-05
  • 1970-01-01
  • 1970-01-01
  • 2015-01-22
  • 2019-01-08
  • 2017-03-11
相关资源
最近更新 更多