当我使用浏览器的开发工具查看页面上的某些元素时会发生啥？

Posted 2023-02-25

【中文标题】当我使用浏览器的开发工具查看页面上的某些元素时会发生啥？

【英文标题】：What happens when I view some element on page with browsers's development tools?当我使用浏览器的开发工具查看页面上的某些元素时会发生什么？

【发布时间】：2013-02-07 11:31:52

【问题描述】：

有几次我遇到了我们网页的奇怪行为：如果我只是以一种方式打开页面，并且如果我使用浏览器提供的开发人员工具查看该页面的某些元素 - 外观的元素变化。如果我单击某个 div 并在开发工具中查看它，看起来确实会引发一些刷新事件。

有人知道发生了什么吗？

例如，在我目前的情况下，我有一些具有半透明背景的 div，它应该在某些事件发生后移动。它在除歌剧之外的所有浏览器中移动。在 Opera 中根本没有显示。但是，如果我使用 Opera 开发工具检查该 div，则该 div 变得可见！当我切换到标准模式时 - 它再次隐藏。

当我使用开发工具跟踪某些 div 的数据时会发生什么？

【问题讨论】：

你的意思不是说开发工具正在高亮你使用开发工具html或css选择器选择的元素吗？所以他们只是突出一个元素来向你展示你在看什么？

是的，我知道他们正在突出显示该元素。但实际上有时我会看到另一种效果：它们改变了元素的外观。例如，显示之前隐藏的元素。

【参考方案1】：

这是所有可视化开发编辑器和调试器的常见行为。为了允许对项目进行编辑/调试，它们将组件的可见性属性覆盖为 TRUE。

以正常模式返回，当然会将所有属性设置为其真实值。

【讨论】：

这真的是评论，不是答案。

问题是如果我检查另一个元素，该元素将变为可见事件。似乎发生了一些页面更新或刷新事件。