javascript - 在 DevTools 中检测作用于元素的代码

标签 javascript html google-chrome google-chrome-devtools chrome-debugging

我有一个网页,其中包含打开的 Dev/F12 工具(在 Chrome 中)。

当页面调整大小时,观察到的 div 的样式属性之一肯定被一些 JavaScript 代码修改(chrome 以紫色显示修改后的属性):
enter image description here

有没有办法知道 JS 代码到底做了什么,跟踪 DOM 元素修改的 JS 源?

最佳答案

是的,您可以使用 Chrome 的开发工具 DOM 断点来做到这一点:

  1. 在“元素” Pane 中找到该元素(您已完成)
  2. 右键单击元素并选择Break on > attribute modifications(因为更改内联样式涉及修改style 属性的值)

当修改发生时,断点将在该点停止 JavaScript 执行,并在 Sources 选项卡中显示相关脚本。

如果您有时需要查看我们的 DOM 断点列表,它们位于“元素”面板右侧面板中的“DOM 断点”选项卡中。

关于javascript - 在 DevTools 中检测作用于元素的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49149472/

相关文章:

javascript - 如果在 css 中设置为 0px,如何根据内容计算像素高度?

javascript - 如何撤销 Identity API token (Chrome 扩展)

html - CSS 列样式仅适用于 Chrome 中的一列

javascript - 我正在尝试制作一个 chrome 查找和替换扩展,但它不起作用

javascript - Grunt 我的代码在 concat.js 中重复

javascript - 如何将 Twilio 的 2 因素短信身份验证与 Firebase 和 Ionic (Javascript) 集成?

javascript - Bootstrap 轮播页面指示器错误对齐

html - 如何删除 <input> 边框?

html - 让我的 h2 边框底部只是强调文本而不是 div

javascript - 网站在 Chrome 中显示部分 ssl 问题