3

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

4

4 回答 4

4

所有元素是在页面加载时添加的，还是部分在对用户输入的响应中添加的？（点击等）

  • 对于添加对您的操作的响应的内容，您可以使用“脚本”选项卡中的 Firebug 的“下一个中断”按钮。要激活 BON，您必须单击它，或者在刚刚发布的 Firebug 1.10.0a8中，使用键盘快捷键 ALT-CTRL-B（当您将事件侦听器绑定到鼠标移动时很有用）。然后，当任何一段 JS 将被执行以响应您的点击等时，您将遇到一个断点。
  • 对于在页面加载时添加的内容，您可以使用扩展本机函数的技巧（这听起来可能很疯狂 - 是的，不要在生产中这样做！）如appendChild、insertBefore、replaceChild。只需在主 HTML 文件的最顶部插入适当的代码，这样下面的所有代码都将“看到”更改。不幸的是，由于一个错误，这在 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>

歌剧输出：

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>

然后，通过创建自动响应器（WMV 教程，9.9 MB）来使用Fiddler 代理，您可以在其中手动替换所有调用.appendChild._appendChild（您可以使用 Notepad++ 来“在所有打开的文件中查找替换”）。创建自动响应和手动篡改请求可能很普通，但它非常强大。要快速创建自动回复规则，请在 Fiddler 处于活动状态时加载页面，然后如下图所示拖放文件。对于每个文件，右键单击并从菜单中选择“生成文件”（这会将文件放在桌面上）或自己在不同的位置创建文件。（最好打开 Fiddler 生成的文件并从中删除响应标头；顺便说一句，“生成文件”仅在响应标头为 200 时才放入真实内容，因此请确保使用 CTRL-F5 加载页面以跳过缓存）。

提琴手

于 2012-05-12T00:08:40.157 回答
2

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

于 2012-05-11T21:05:52.213 回答
1

假设您可以访问原始（希望未缩小/混淆）JS 文件，也许只是在它们中搜索与 DOM 操作和/或您要创建的节点的属性相关的文本字符串？我会尝试诸如“appendChild”“createElement”和节点的ID/类名之类的东西。

您还可以在整个脚本文件中设置断点，并在页面加载时单步执行它们以帮助您缩小查看范围。从一开始就“暂停” JS 执行并逐步执行可能会有所帮助。

如果您可以共享代码（指向实时站点的链接就可以了），我很乐意看一看。

于 2012-05-11T21:53:42.347 回答
0

如果您在 javascript 中使用 jQuery 框架来进行 DOM 更改，那么您可能会在 firefox 浏览器中找到用于 FireBug 的 fireQuery 插件可能会为您提供所需的信息。

例子： 在此处输入图像描述

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

我希望这可以帮助你。

于 2012-05-11T21:16:55.377 回答