如何在 Chrome 开发工具或 Firefox 开发工具中查看 JS 正在改变我的元素的样式？答案

【问题标题】：How do I see what JS is changing style to my elements in Chrome dev tools or Firefox dev tools?如何在 Chrome 开发工具或 Firefox 开发工具中查看 JS 正在改变我的元素的样式？
【发布时间】：2019-11-05 08:19:17
【问题描述】：

我是一个菜鸟问题，因为我刚刚学习 JS，所以我还不擅长。

我目前正在构建一个网站广告，添加了一些 JS sn-ps 来执行一些操作。现在我的页脚有opacity: 0，它不是来自CSS，因此必须来自一些JS，但我找不到它。如何在 Chrome 或 Firefox DevTools 中找到 JS 正在修改特定 HTML 元素的样式？

这是显示代码的屏幕截图：

我检查了我所有的 JS 文件，但找不到任何可以提供页脚 opacity:0 的内容。

【问题讨论】：

标签： javascript google-chrome-devtools firefox-developer-tools

【解决方案1】：

据我所知，您看不到代码的哪一部分正在改变样式。

尝试设置断点以找出它设置它的位置。

也许它不在您的 js 文件中？它可以是文档中的脚本元素

【讨论】：

我使用括号并搜索 opacity: 0 in in Find in Files 但没有找到任何将其提供给页脚的内容。所以必须来自一些外部脚本。我将研究如何设置断点。谢谢。

【解决方案2】：

为防止这种情况发生，您可以在 .html 文件的末尾添加一个小的 <script> 标签。

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <footer class="footer" style="opacity: 0;">My footer </footer>
</body>

</html>
<script>
  /* Place this script tag at the end of your document */
  document.getElementsByClassName("footer")[0].style.opacity = 1; //sets opacity of footer element to 1
</script>

如果你真的想检查是什么改变了你的style 属性，你可以查看chrome 和firefox 的这些指南，了解如何在 devtools 中设置断点。

希望这会有所帮助！

【讨论】：

我在关闭 HTML 之后添加了脚本，但仍然无法正常工作。我会检查指南，希望我能找到这些问题。谢谢

【解决方案3】：

Chrome DevTools 允许您在 DOM 结构中的特定更改处停止。

为此，右键单击元素并从上下文菜单中选择 Break on > 属性修改。

然后，一旦添加了style 属性（可能需要重新加载页面），脚本执行将在发生更改的 JavaScript 行处停止。

【讨论】：