Chrome中查找页面加载前后修改元素的JavaScript代码来源

作为天天跟页面加载时的DOM操作、样式修改打交道的前端开发者，我来分享Chrome DevTools里的实用技巧，帮你快速搞定这两个问题：

问题1：查找页面完全加载前修改元素的JavaScript代码来源 #

要追踪页面加载初期的元素修改，关键是提前拦截脚本执行，或者给目标元素设置DOM断点，具体步骤如下：

• 打开Chrome DevTools（按F12，或者右键页面选「检查」），切换到Sources面板。
• 如果你知道元素大概在页面加载早期被修改，可以直接在主文档（Page标签下的顶部html文件）的<head>标签附近打个断点：点击行号旁边的空白处，出现蓝色箭头就代表断点设置好了。刷新页面后，脚本会在断点处暂停，你可以点击「逐步执行」按钮（F10）一步步走，观察元素什么时候被修改，同时看调用栈找到对应的代码。
• 更精准的方式：切换到Elements面板，选中你要追踪的元素，右键选择「Break on」→「Subtree modifications」（子树修改，比如元素被添加/删除子节点）或者「Attribute modifications」（属性修改，比如id、class变化）。刷新页面后，只要有脚本修改这个元素，DevTools会立刻暂停，并在Sources面板高亮显示执行修改的代码位置。
• 如果元素是动态创建的，还可以试试事件监听器断点：在Sources面板的「Event Listener Breakpoints」里，勾选「DOM」→「DOMContentLoaded」，这样页面触发这个事件时会暂停，你可以顺着执行流程找到元素创建和修改的代码。

问题2：定位修改body display样式的JavaScript代码 #

对于body从display:none被改成display:block的情况，重点追踪style属性的修改，方法如下：

• 先在Elements面板选中<body>元素，看右侧Styles面板：找到display:block这一行，鼠标悬停旁边的灰色箭头（或者标注），如果是JS动态设置的，会显示element.style，但这只是表面，需要进一步追踪。
• 最靠谱的方法：在Elements面板选中body后，右键选「Break on」→「Attribute modifications」，然后刷新页面。当脚本修改body的style属性（包括display）时，DevTools会自动暂停在执行修改的代码行，此时看右侧的Call Stack面板，能一步步回溯到触发修改的根源代码（比如某个函数调用链）。
• 另一个辅助技巧：用Performance面板录制加载过程。点击录制按钮（圆形红点）后刷新页面，录制完成后，在时间线里找到「Layout」或「Style Recalculation」的事件块，点击它就能关联到对应的JS调用，帮你定位修改样式的代码位置。

内容的提问来源于stack exchange，提问作者Patoshi パトシ