问题

元素属性可以被样式表或JavaScript动态更改。测试高度动态的Web应用需要使用更加强大、灵活的方法来跟踪元素属性。无论多深入的静态信息，通常都不足以用于测试由JavaScript事件驱动的Web应用。

解决方案

一旦找到你希望长时间跟踪的元素，请在DOM面板中找出它的id或其他标识属性（如果它没有id，你可以为它创建一个，请参考3.9节，然后，打开Firebug中的控制台面板）。

在下面的例子中，我们将演示如何跟踪现有元素中一切新添加的内容。向现有元素添加内容正是许多AJAX驱动应用实时更新的工作原理。

首先，找到并记住你希望跟踪的元素：

var test_element = document.getEleniumById('your_id')

接着，创建一个函数来显示你希望探测的元素属性：

function display_attribute(){       alert("New Element! \n ID:" + test_element.lastChid.id +       "\n HTML:" + test_element.lastChild.innerHTML);}

为所有可能更改这个属性的事件添加一个事件监听程序：

test_element.addEventListener('DOMModeInserted',display_attribute,'false')

初始化这个事件（通过应用逻辑或手动方式）：

new_element = document.getElementById('some_other_element')test_element.appendChid(new_element)

在的某页面上运行这些步骤，我们获得了图3-16所示的结果。

讨论

本秘诀只有在你拥有JavaScript驱动的应用时才真正有用，并且需要对JavaScript非常熟悉。它可能不适合你的应用。不过，对于许多启用AJAX的网站来说，JavaScript事件的结果是由服务器而不是客户端来决定。这种方法仍然是测试这种事件驱动的站点的主要工具之一。而且，如果它能够帮助你调试AJAX代码，那么也能够帮助基于AJAX的攻击。

这是一种相当灵活的方法。无论是事件类型还是测试输出，都有许多的选项。例如，在运行许多这样的事件监听程序时，你可能更愿意创建一个调试输出区，并将文本附加到该结点。例如：

Function debug_attribute() { debug_node.innerHTML += "<br />      new Elenium ID:  " +test_element.lastChild.id }

在非常复杂的应用中，可能有许多动作绑定到许多节点上。JavaScript支持每个结点对应不限数量的事件监听程序。同样也有许多类型的事件。所有的Firefox事件都可以在以下网址找到：。

如果对于你的Web应用来说，没用必要编写自己的事件监听程序，那么Firebug也包含了一个非常好的JavaScript调试器，它能够查看并记录特定的函数调用，还能够设置断电。

当心哪些启动其他AJAX请求和（通过eval（）函数）运行评估代码的动态JavaScript函数。如果你的Web应用评估是从服务器接收到的内容，那么它可能特别容易受到JavaScript注入攻击。这一点甚至也适用于仅仅载入数据的情况，比如由客户端进行评估的JavaScript对象符号（JSON）数据。

搜索微信公众号：TestingStudio霍格沃兹的干货都很硬核