如何判断js函数是用Firefox DevTools创建一个元素

Question

我有一个页面有这么多元素我不需要但我不能删除它们因为我没有在html模板中看到它们因此我假设javascript正在创建它们。

我想使用Firefox开发人员工具来检测哪些功能正在执行此操作，以阻止页面创建这些元素。我该怎么办？我使用Firefox 53.0.3

谢谢。

Answer 1

首先，您应该验证HTML是否真的是通过JavaScript添加的，或者它已经是页面源的一部分。

要执行此操作，请右键单击页面并从上下文菜单中选择查看页面源，或按 Ctrl + U 。在源视图中搜索元素，例如通过其ID或其内容。

如果你发现它，它显然是在服务器端脚本中添加的，所以你需要检查它添加的位置。如果找不到，则通过JavaScript添加。

如果通过您在页面上执行的特定操作添加元素，则可以使用名为Break on Child Addition or Removal的Firebug功能，该功能允许在发生更改的行停止JavaScript执行。为此，请右键单击元素的父，然后从上下文菜单中选择上述选项。

找出HTML添加位置的第二种方法是为load事件设置事件断点。为此，请切换到Events side panel，右键单击加载事件处理程序，然后从上下文菜单中选择设置断点：

然后重新加载页面。脚本执行将在相关行停止。从那里开始，您需要逐步执行代码，直到到达添加元素的行。

话虽如此，Firebug正式停止使用Firefox开发者工具，而Firebug的 Script 面板在当前版本的Firefox中不再有效。 （还缺少设置断点的选项。）不幸的是，Firefox DevTools目前（从Firefox 54.0开始）仍然缺少打破DOM更改的功能。但是有already a bug report for it。

话虽如此，那里也有第二个停止页面加载的选项。为此，请切换到 Debugger 面板。在那里单击按钮以展开侧面板（），然后切换到Events side panel。你需要检查加载事件监听器：

然后按照上述步骤操作，逐步执行代码，直到到达添加元素的行。