为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 Chrome 开发工具来查明页面上元素移动的原因?

如何使用 Chrome 开发工具来查明页面上元素移动的原因?

呼如林 2023-08-24 10:17:18
我页面顶部的某些内容导致内容布局发生重大变化。内容渲染,然后向上跳跃 300px,然后向下跳回到正常位置。我尝试过单步执行代码,但是只有当您知道希望代码在哪里停止时,这才显得有用。如何使用开发工具有效地找到导致此问题的 javascript 和/或元素?这是网站
查看完整描述

1 回答

?
慕婉清6462132

TA贡献1804条经验 获得超2个赞

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

这可能表明页面加载事件中存在一些 javascript 加载,从而改变了您的样式?

https://img1.sycdn.imooc.com//64e6be320001478e08450561.jpg

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

https://img1.sycdn.imooc.com//64e6be4000014e2612120772.jpg

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

继续尝试,直到找到可能的问题所在

https://img1.sycdn.imooc.com//64e6be4d0001bce304950089.jpg

查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 111 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信