Question

我有一些疯狂的应用程序几乎100％通过操纵DOM完成，我发现自己处于改变其中某些东西的不幸位置。由于可能有大约100个不同的脚本，上帝知道什么，我不知道我应该在哪个文件中进行更改。所以，我想问一下，有没有办法（使用Firebug或类似的东西）知道某个特定的HTML生成的位置？我是一名C开发人员，所以我对此并不擅长，这让我很疯狂。

Answer 1

是否在页面上添加了所有元素，或者部分在用户输入的响应中？（点击等）

对于添加了对您的操作的响应的内容，您可以在“脚本”选项卡中使用Firebug的“Break On Next”按钮。要激活BON，您必须单击它，或者在just-shipped Firebug 1.10.0a8中使用键盘快捷键ALT-CTRL-B（当您将事件侦听器绑定到鼠标移动时非常有用）。然后，当任何一块JS被执行以响应你的点击等时，你会遇到一个断点。
对于在页面加载时添加的东西，你可以使用扩展原生函数的技巧（这可能听起来很疯狂 - 是的，不要在生产中这样做！），如appendChild, insertBefore, replaceChild。只需在主HTML文件的最顶部插入适当的代码，以便下面的所有代码都“看到”更改。不幸的是，由于a bug，这在Firefox中不起作用。但是在Opera中工作，我猜也在Chrome中。扩展本机函数时，可以在将节点添加到页面之前注入任何代码。例如，调用console.log或创建断点，以检查当前页面状态。您可以尝试使用断点来查看这些函数中的可用变量属性，以调整您推送到console.log的内容。

对于此代码：

<!doctype html>
<html>
   <head>
      <script type="text/javascript">

      // this should work in Firefox but it does not -- https://bugzilla.mozilla.org/show_bug.cgi?id=618379
      // works at least in Opera, probably Chrome too
      Node.prototype._appendChild = Node.prototype.appendChild;
      Node.prototype.appendChild = function(child) {
         console.log("appending " + child + " to " + this);
         return this._appendChild(child); // call the original function with the original parameters
      }

      // this works in Firefox
      document._createElement = document.createElement;
      document.createElement = function(tagName){
         console.log("creating " + tagName);
         return this._createElement(tagName);
      }

      </script>
   </head>

   <body>
      <script type="text/javascript">
         var p = document.createElement("p");
         p.appendChild( document.createTextNode("abc"));
         document.body.appendChild(p);
      </script>
   </body>
</html>

Opera输出：

creating p                                                           appendChild.html:14
appending [object Text] to [object HTMLParagraphElement]             appendChild.html:7
appending [object HTMLParagraphElement] to [object HTMLBodyElement]  appendChild.html:7

为了克服Firefox的弱点（你无法覆盖appendChild），你可以使用这个技巧：将代码置于HTML的顶部

<script>
      Node.prototype._appendChild = function(child) {
         console.log("appending " + child + " to " + this);
         return this.appendChild(child)
      };
</script>

然后，通过创建Fiddler proxy来使用auto-responders (WMV tutorial, 9.9 MB)，您可以使用.appendChild手动替换所有对._appendChild的调用（您可以使用Notepad ++“在所有打开的文件中查找替换“）。创建自动响应程序和手动篡改请求可能是平凡的，但它非常强大。要快速创建自动应答器规则，请在Fiddler处于活动状态时加载页面，然后拖放文件，如下图所示。对于每个文件，右键单击并从菜单中选择“生成文件”（这将在桌面上放置文件）或在自己的不同位置创建文件。（最好打开Fiddler生成的文件并从中删除响应头; BTW“生成文件”仅在响应头为200时才放置真实内容，因此请确保使用CTRL-F5加载页面以跳过缓存）。 / p>

Fiddler

Answer 2

在Chrome中，您可以检查元素并右键单击它。此菜单为您提供了一些选项，可以在元素下方的某些内容发生更改或其自身属性发生更改时中断。也许其中一个断点会找到你想要的东西？

Answer 3

假设您可以访问原始（希望是非缩小/混淆）的JS文件，可能只是搜索与DOM操作相关的文本字符串和/或您尝试查找创建的节点的属性？我会尝试“appendChild”“createElement”和节点的ID /类名称。

您还可以在脚本文件中设置断点，并在页面加载时逐步执行这些断点，以帮助您缩小查看位置。可能有助于首先“暂停”JS执行并从一开始就逐步完成。

如果你可以分享代码（现场网站的链接会很好）我很乐意看看。

Answer 4

如果您在javascript中使用jQuery框架来更改DOM，那么您可能会发现firefox浏览器中的fireQuery plugin for FireBug可能会为您提供所需的信息。

实施例： enter image description here

它通过将额外的jquery元素信息叠加到显示中来向标准HTML视图添加其他信息，以便更深入地了解javascript如何修改页面内容。

我希望能帮到你。

你怎么看到哪个Javascript脚本生成了某个html行？

4 个答案: