通过连接客户端和服务器端执行来理解Ajax应用程序.docx

《通过连接客户端和服务器端执行来理解Ajax应用程序.docx》由会员分享，可在线阅读，更多相关《通过连接客户端和服务器端执行来理解Ajax应用程序.docx（38页珍藏版）》请在课桌文档上搜索。

1、通过连接客户端和服务器端执行来理解Ajax应用程序可以追溯到AndyZaidmanNickMatthijssen-Margaret-AnneStoreyArievanDeursen在线发布:2012年3月4日作者2012。本文发表于编辑:GiUliOAntOniol和KeithBrianGallagher摘要基于ajax的Web应用程序是一种新型的高度交互、高度动态的Web应用程序。尽管AjaX允许开发人员创建富Web应用程序，但AjaX应用程序可能难以理解，因此难以维护。出于这个原因，我们创建了FireDetective,这是一个在客户端（浏览器）和服务器端使用动态分析的工具，以促进对Aja

2、x应用程序的理解。我们使用测试前-测试后用户研究和现场用户研究来评估FireDetective0初步证据表明，FireDetective工具是努力理解Ajax应用程序的Web开发人员的有效辅助工具。关键词Ajax:Web应用：程序理解：逆向工程；动态分析；执行轨迹在过去的十年中，Web开发已经从创建静态Web站点发展到创建丰富且高度交互的Web应用程序。用于创建这些交互式Web应用程序的启用技术之一是Ajax(异步Javascript和XML)是现11技术的总称，如JaVaSCript、文档对象模型(DOM)的动态操作和JaVaSCriPt的XMLHttpRequest对象。自从AjaX这个术

3、语在2005年被创造出来以来(Garrett2005),大量支持Ajax的Web站点出现了，大量Ajax框架被创建，“大量的文章出现在开发者网站和专业杂志上(Mesbah和vanDeursen2008)0一个著名的Ajax应用程序示例是Gmail,它使用Ajax技术在您打开电子邮件对话时仅更新页面的一部分，并在您输入时提示最近通讯员的电子邮件地址。不幸的是，AjaX也使Web开发更加复杂。经典的Web应用程序基于多页面界面模型，其中交互基于页面序列范式(MeSbah和VanDeUrSen2008)。AjaX改变了这一点，它允许在页面加载后发出异步请求，并允许JaVaSCriPt代码在浏览器中更

4、新页面的部分内容，有效地进行增量更新，而无需重新加载整个页面。在Ajax出现之前，Hassan和Holt已经指出“Web应用程序是未来的遗留软件和维护这样的系统是有问题的”(HaSSan和Holt2002)o我们期望Ajax增加的交互性和复杂性肯定不会改善这种情况。软件维护从建立理解开始，然后进行必要的修改。众所周知，这个理解步骤的成本非常高，Corbi报告称，维护任务中有多达50%的时间花在理解上。然而，正如Cornelissen等人(2009a)所观察到的那样，专注于专门针对Ajax应用程序的程序理解的论文很少。这些观察结果，加上支持AjaX的Web应用程序的数量迅速增长，促使我们研究支持

5、Web开发人员维护这种新型Web应用程序的方法。在本文中，我们特别研究了Web开发人员在理解Ajax应用程序时遇到的问题，以及如何利用动态分析(BalII999)来更好地支持Web开发人员理解Ajax应用程序。我们之所以选择动态分析，是因为Ajax应用程序在整个应用程序中跟踪控制流的潜在困难。这源于这样一个事实，即Ajax应用程序由一组异构资源组成，例如Web模板、客户端脚本和服务器端脚本，这些资源相互依赖，所有这些资源都对应用程序有贡献。这些工件之间的链接通常在运行时建立。接下来，HTML页面可以动态生成和更新，客户端脚本可以动态生成和执行。最后，所使用的语言本身是高度动态的，如JaVaSC

6、riPt和服务器端脚本语言(如PHP)。Antoniol等人(2004)己经指出，仅靠静态分析对Web应用程序是不够的。我们认为AjaX应用程序中更高程度的动态性使得静态分析对于Ajax应用程序来说也不够。为了便于更好地理解基于ajax的Web应用程序,我们构建了FireDeteClive,这是一个记录客户端(浏览器)和服务器上的执行跟踪的工具，然后以一种组合的方式将它们可视化。本文基于我们之前的工作(MatthijSSenetal2010;MatthijSSen和Zaidman2011)中，我们提出了FireDeteCtive,并使用探索性的前测-后测用户研究实验对其进行评估。在本文中，我们

7、扩展了在两位AjaX开发专家的帮助下，我们添加了一个现场用户研究。这种评估方法使我们能够解决以下研究问题：问题一当前Web开发人员在尝试理解Ajax应用程序时使用哪些策略？问题二我们是否可以使用动态分析，就像FireDeteCtiVe工具所展示的那样,来提高对Ajax应用程序的理解？本文的其余部分组织如下。第二节介绍了FireDeteCtiVe的设计与实现。第3节记录了用户研究的设计，而第4节描述和讨论了该用户研究的结果。第5节和第6节分别描述了我们进行的实验设计和现场用户研究的结果。有效性威胁将在第7节中讨论。第8节讨论了相关工作。最后，第9节提出了我们的结论并确定了未来的机会。2工具设计F

8、ireDetectivel是一个记录在浏览器中执行的JavaScript代码和服务器端代码的执行跟踪的工具。所使用的详细级别是调用级别:该工具记录所有被调用的函数和方法的名称，以及它们被调用的顺序，允许该工具重新构造每个跟踪的调用树表示。从我们自己作为AjaX开发人员的经验来看，我们意识到将这些单独的跟踪彼此关联起来对于通过Ajax应用程序很好地理解控制流非常重要。因此,该工具还记录了特定于Ajax/Web域的抽象信息，例如（AjaX）请求、DOM事件、超时等。这是该工具的一个关键元素:它使我们能够以有意义的方式链接前面提到的执行跟踪。此外，抽象可以作为熟悉的程序理解起点。该工具在一组交互视图

9、中将跟踪和抽象网络呈现给用户。2.1体系结构FireDetective的架构如图1所示。该工具包括一个Firefox插件，用来记录JavaScript跟踪和关于Ajax抽象的信息，以及一个服务器跟踪器，可以连接到JavaEE2Web服务器。这两个组件都将它们记录的数据（通过套接字）转发给可视化工具（FireDeteCtiVe的第三个也是最后一个组件）。然后，可视化器实时处理和可视化数据。这种体系结构的一个好处是它允许用户使用Firefox与Ajax应用程序交互，就像他们通常会做的那样，然后使用FireDeteCtiVe可视化工具来检查“引子下发生了什么。该体系结构还允许组件在不同的机器上运行。

10、目前，该工具是为具有Java+JSP后端的Ajax应用程序构建的，这一决定受到我们为研究选择的目标应用程序的影响（请参阅第3节）。但是，同样的技术也可以应用于具有其他后端（如PHP或RUby）的Ajax应用程序。图2.1FireDetective架构2.2使用抽象链接跟踪我们使用了许多来自Ajax/Web域的抽象，我们将跟踪或跟踪中的调用链接到这些抽象。它们列在下面。一整页请求发生在加载整页时。我们使用一个完整的页面请求来将发生在下一个完整页面请求之前的所有请求和JavaScript跟踪分组到一个按时间顺序排列的列表中。因此，全页请求是加载一个全新HTML（或动态生成的HTML）页面的请求。非

11、ajax请求包含在一个完整的页面请求中。它们还与为特定请求记录的服务器端跟踪相关联。非ajax请求的例子包括在前一类的整个页面之上加载额外的资源：级联样式表（CSS）、JavaScript（js）文件等。顶级脚本加载调用发生在浏览器加载并执行脚本时。这些脚本加载链接到生成的JavaScript跟踪。DOM事件是诸如“元素被点击”或“页面被加载之类的事件。它们与一个或多个JavaScript跟踪相关联，这些跟踪被记录为事件处理程序为相关DoM事件触发的结果。AjaX请求，与其他请求一样，AjaX请求与单个服务器端跟踪相关联。它们还链接到发送请求的JavaScript调用和处理响应时记录的JaVa

12、SCriPt跟踪。超时（在JavaScript中）可以设置为在特定时间段过后触发一个超时处理程序。我们将超时链接到作为超时处理程序被调用的结果而记录的JaVaSCriPt跟踪，以及开始和停止特定超时的JavaScript调用。Web模板调用不是AjaX特有的，在许多Web应用程序中都有使用。在本例中，我们使用的是JSP模板。由于这些模板是在使用之前编译的，因此它们不会以原始形式出现在跟踪中。因此，我们从原始跟踪重构JSP调用，并将它们链接到它们发生的跟踪中的点。跟踪/调用和抽象之间的一些链接表示因果关系，例如，一些JaVaSCriPt调用导致AjaX请求,然后导致服务器端和（当收到响应时）Ja

13、vaScript跟踪被创建。通过沿着一个方向跟踪这些链接，工具用户能够回答什么？”和怎么做？”关于程序的问题，例如“这个DOM事件是如何处理的？”此外，链接还可以反向跟踪，使工具用户能够回答为什么？”的问题，例如“为什么会出现这个AjaX请求？这些抽象是通过我们自己作为AjaX开发人员的经验确定的。在第4节中，我们提供了这个列表的可能补充。我们使用不同的机制来记录和重建这些抽象,并将它们链接到相关的跟踪。这些机制将在2.6节中简要介绍。2.3交互可视化可视化工具将跟踪和抽象的集合显示给用户。其界面如图2所示。可视化的设计松散地基于指导方针Shneiderman(1996)概述:信息可视化工具应

14、该允许创建概览、缩放、过滤和按需提供细节。这种设计与自上而下的理解策略相关联(VonMayrhauser和Vans1995)。图2.2可视化工具使用了三个主要视图，每个视图显示不同级别的细节。第一个视图是高级视图，它显示了前面提到的抽象的树形表示(模板调用除外)。可展开的树节点可以揭示更多细节，例如，展开Ajax请求节点可以显示其与特定跟踪和调用的关系，即请求的生命周期。第二个视图是跟踪视图，每次显示一个执行跟踪，作为一个调用树(这也意味着对相同函数的不同调用是分开表示的)。每个树节点代表一个单独的调用，带有可扩展的子调用。第三个视图是标准源代码视图。这三个视图是链接的：在第一个视图中选择高级

15、实体将在跟踪视图中显示相关跟踪，在跟踪视图中选择调用将显示相关代码。还有一个侧视图，其中包含AjaX应用程序资源（例如，代码文件）的树形表示。单击资源将在代码视图中显示该文件。可以对视图进行筛选，以只显示用于当前页面的文件，这大大减少了显示的文件数量，并允许工具用户快速查看当前页面中涉及哪些资源。用户还可以选择一个代码块（例如，一个JaVaSCriPt函数），以突出显示并在高级视图和跟踪视图中循环调用该代码块。执行跟踪的一个缺点是它们可以迅速增长到巨大的规模。为了减少痕迹的大小，我们使用了两种简单的、众所周知的痕迹减少机制（COrneIiSSenetal2008a）o第一种方法是过滤掉所有库调

16、用，只保留特定于正在分析的AjaX应用程序的调用。客户端库（如DojO4）和服务器端库（如JavaEE服务器内部）都被过滤掉。第二个机制涉及允许用户启动和停止跟踪记录。这允许用户对AjaX应用程序进行时间切片，例如，了解如何处理与AjaX应用程序的特定交互。2.4与FireBug的关系FireBUg5是一个流行的FirefoX插件，允许编辑，调试和监控CSS,HTML,DOM和JaVaSCript。本质上，它经常被用作AjaXWeb应用程序的“调试器”，在这种情况下，它也经常用作程序理解工具（Lerner2007）0虽然FireBug目前是典型Web开发人员标准工具库的一部分，但FireBug

17、和FireDeteCtiVe的目标并不十分相似。FireBUg只显示一个（AjaX）请求列表，与之相反，FireDetective还能够将这些请求与相关的代码片段联系起来，包括浏览器端（JaVaSCriPt）和服务器端（在我们的例子中,是JaVa代码）。FireBUg允许检查变量、参数和XMLHttpRequest对象的当前值。因此，它允许您查看哪些参数被发送到服务器后端，但是不允许您立即将该请求与服务器上正在发生的事情联系起来。此外，它主要针对小范围的程序理解，用于理解已经有一个良好起点的情况，可以用断点进行标记。另一方面，FireDetective不提供这些低级检查特性，而是通过提供将浏览

18、器中JavaScript代码中的操作与服务器上正在执行的代码关联起来的能力，从大的方面关注程序理解。作为一个工具，FireBug非常重要，因为它目前被Web开发人员广泛使用。FireBug也是我们第3节实验的一部分。为了完整起见，我们还提到了DragonFly,这是一个OPera插件,功能类似于FireFox的FireBug插件6和谷歌ChromeWebDeveloperTools.7.2.5理解障碍关于JavaScript跟踪的一个注意事项是，该语言允许开发人员定义匿名函数，这是Web开发人员常用的一种机制。由于许多跟踪可视化（包括我们的）显示被调用函数的名称，这就成为了一个问题:例如，显示

19、“匿名”函数相互调用的调用树并不是特别有用。在实践中，一个函数通常只分配给一个变量，例如，Varf=function（）因此,在这种情况下,我们使用变量名来标识函数。我们解析所有JaVaSCriPt文件，对于我们遇到的每个匿名函数定义，我们尝试找到它前面的变量或实例变量。注意，这种方法并不总是正确的:在这个例子中，f可以被重新分配给另一个函数。然而，这种方法在实践中似乎工作得很好：例如，FirefoxFireBug插件目前使用类似的技术（尽管更简单，基于正则表达式）来命名匿名函数。另一个潜在的问题是JaVaSCriPt文件的延迟加载，这是Dojo库中使用的一种技术。延迟加载”指的是通过AjaX

20、请求检索脚本文件，然后对其进行eval，从而减少初始页面加载时间。然而，由于eval调用，原始文件名和代码之间的链接丢失了。这可能会导致一种不受欢迎的情况，即拥有一段代码片段，但不知道它来自何处，只知道它是在某个时刻动态生成的。该工具通过计算每个Ajax请求的响应文本和每个eval-ed字符串的哈希代码来解决这个问题。当该工具显示eval编码片段并找到匹配的AjaX响应文本散列时，该工具可以重新构造eval”编码的文件名。2.6实现细节JavaScript函数调用和Java调用分别使用Firefox的调试器接口和JavaVM工具接口记录。这样做的优点是不需要对代码进行检测，而且这种方法也适用于

21、动态生成和动态“eval的JavaScript代码。浏览器和服务器之间的连接是通过向Firefox中的每个传出HTTP请求附加一个包含id的自定义报头X-Request-Id来实现的。在服务器端接收到请求后,服务器跟踪程序可以检测到id。通过为窗口和文档对象添加所有可能的DOM事件的事件侦听器，在Firefox中注册DOM事件。Ajax请求和JavaScript超时（和间隔）是通过包装所有相关属性和函数（例如XMLHttpRequest）来注册的。responseXML,meout）和回调。JSP调用是通过识别JSP引擎中发生的某些调用来重构的，这对于我们的目标应用程序来说工作得很好。但是，它

22、不能扩展到具有多个名称相同但位于不同目录的JSP文件的更大的应用程序。一种可能的解决方窠是在分析之前检测JSP文件，这样做的另一个好处是不依赖于JSP引擎的实现细节。3用户研究的设计我们使用探索性的预实验用户研究来解决我们的研究问题Neb开发人员目前使用哪些策略，以及动态分析能否提高对Ajax应用程序的理解?这种实验类型被称为预实验，以表明它不符合实验设计的科学标准(Babbie2007),但它允许我们报告真实用户行为的事实，甚至是那些在受控、有限样本体验中观察到的事实。特别是，我们使用的是一组前测后测设计，这意味着只有一个实验组，没有对照组。这种类型的实验被称为预实验，因为它不允许识别与干预

23、前测和后测之间的因变量相关的事件，其中影响可能与自变量的影响相混淆(Babbie2007)0在用户研究中，我们观察到8个参与者正在完成一些程序理解任务。其中两人是全职软件开发人员；其余六名为计算机或软件工程专业学生，其中五名兼职从事软件开发工作(详情请参阅第3.6节)。每个参与者的会议A部分：观察当前的理解策略。参与者使用了一套标准的Web开发工具:ECIiPSe和Firefox以及流行的FireBug插件。本部分的目的是深入了解Web开发人员在试图理解AjaX应用程序时使用的策略，以及这些策略是否足够(RQI)OB部分：通过动态分析提供支持。参与者使用Eclipse和Firefox和Fire

24、Detectiveo本部分的目的是深入了解通过FireDetective提供的动态分析技术是否可以改善理解，如果可以，如何改善(RQ2)。我们的方法是探索性的，因为我们仍然处于这个研究项目的早期阶段。我们专注于观察参与者在使用或不使用FireDetective工具的情况下完成分配的任务。我们要求参与者在研究过程中大声思考，由于研究是在实验室环境中进行的，我们能够制作音频和屏幕录音以供以后分析。我们还向参与者发放了问卷，以确定他们在使用FireDetective之前和之后对使用动态分析的好处的看法。在每个环节结束后，参与者都要接受一个简短的采访。在下面的部分中，将更详细地描述这些方面。3.1A部

25、分设计:观察当前的理解策略A部分从背景访谈和问卷调查开始，以评估参与者的开发经验。接下来用10分钟介绍本部分研究中使用的工具:ECliPSe和FireBug0由于参与者可能有使用这些工具的经验(情况确实如此，请参阅第4节)，介绍主要用于刷新参与者的记忆。在介绍之后，参与者花35分钟完成一组程序理解任务。我们强调他们可以使用任何他们想要的功能，以尽量减少对使用我们展示给他们的功能的偏见。参与者被告知，如果他们在当前任务上没有取得进展,他们可以转移到下一个任务,并且他们可以随时询问有关工具的问题（关于目标应用程序本身的问题没有得到回答，原因很明显）。此外，如果实验负责人注意到参与者正在努力使用某个

26、特定的工具功能，则会给参与者一个关于该功能的简短解释。由于我们的目标是尽可能多地发现参与者使用的策略，我们不希望他们因为工具问题而停滞太久。A部分的结尾是一个简短的采访，询问参与者遇到的问题。3.2B部分设计:基于动态分析的支撑短暂休息后，参与者继续进行B部分，在此期间他们使用Eclipse和FireDeteCtiVe。理想情况下，我们应该包括FireBUg,但不幸的是，FireDetective和FireBug在用户研究时是不兼容的。这种不兼容性源于Firefox的调试器服务，它只允许每个通知类型有一个侦听器，这是一个问题，因为FireBug和FireDetective都侦听同一类型的事件。

27、此外，FireDetective将额外的JaVaSCriPt代码注入正在查看的每个Web页面。这段代码再次在FireDetective的可视化工具中剥离出来。然而，注入的代码仍然显示在FireBUg中，这可能导致混乱。这些因素使得FireBug和FireDetective的兼容性变得非常重要。与研究的A部分一样，重点在于观察参与者完成任务的过程。然而，在B部分中，我们还收集了用户对使用FireDeteCtiVe工具的好处的看法的数据。我们采用前测-后测设计（CamPbeUetaI1963）,其中前测问卷用于测量参与者在使用FireDetective之前的期望，而后测问卷测量参与者使用工具后的体

28、验（见Matthijssen2010,第85页）。特别地,我们评估了四个属性:（1）更好的理解。该工具是否允许Web开发人员更有效地理解AjaX应用程序？（2）更快的理解。这个工具能让用户更有效地理解AjaX应用程序吗？（3）对理解更有信心。使用该工具是否会使Web开发人员对他们对AjaX应用程序的理解更有信心？（4）最小值。此属性与上述属性成反比。这个工具能提供价值吗？在预测试中，参与者被要求对FireDetective等工具进行简短的抽象描述。为了避免让参与者接触到研究的A部分而影响他们的预期，前测在A部分开始时（在背景问卷之后）进行。后期测试是在与FireDeteCtiVe合作后进行的。

29、在前测和后测中，四个属性中的每一个都通过选择题进行了测试，我们使用了5点李克特量表，范围从非常不同意到非常同意（前测和后测见表1和表2,更多信息也可参阅MatthijSSen2010.第85页）。在10分钟的介绍之后，我们展示了FireDeteCtiVe的所有功能，参与者用25分钟完成一组不同的程序理解任务。减少这部分的时间是为了将整个学习时间控制在两小时以内。在完成任务后进行问卷调查。我们还要求参与者评价他们在FireDetective中的前3个功能。最后，进行了另一个简短的采访，询问遇到的问题，FireDeteCtiVe工具最不喜欢和最喜欢的部分以及改进建议。3.3目标应用为了获得真实世界

30、的见解,我们要求目标应用程序能够代表真实世界的AjaX应用程序，并且使用参与者熟悉的语言和技术编写。Java宠物商店满足了这些需求。它是一个参考应用程序，“旨在说明如何使用Java企业版5平台开发支持ajax的Web2.0应用程序”该应用程序由12KLoC组成，它们是用各种语言编写的，例如客户端是HTML、CSS和JaVaSCripI,服务器端是JaVa和JSP。所有这些文件都可以在Eclipse工作区中使用。JaVa蓝图库在PetStore中被广泛使用，我们发现不包括它的客户端代码限制了我们在任务设计中的工作。此外，这段代码无论如何都会出现在FireBUg和FireDetective中。因此

31、，我们确保在FireBug和FireDetective中可能可见的所有客户端代码也可以在Eclipse中找到。这相当于蓝图+6KLoc,Dojo+97KLoco3.4任务设计这项研究需要设计两个任务集，分别用于研究的每个部分。我们根据自己在宠物商店的经验，自己构建了这些任务。每个任务集由4个任务组成，每个任务集分为2或3个子任务，每个任务集总共有10个子任务。这两个任务集的概述见表3和表4o对于研究的可泛化性，重要的是要确保任务是现实的，并且它们准确地代表了程序理解任务域的重要部分。因此，我们采用了开放式问题而不是选择题。此外，我们使用Pacione等人的9个主要活动分类（PaCioneeta

32、l2004）来设计任务，并努力覆盖他建议的前6个原则:Ah研究系统（一部分）的功能;A2。增加或改变系统功能;A3。研究工件的内部结构;A4。调查工件之间的依赖关系;A5。调查系统中的运行时交互;A6。调查使用了多少工件。我们没有涉及最后三个原则，（1）限制任务的数量，（2）减少参与者在研究过程中疲劳的风险，（3）因为这三个活动的原子性较低，可以由前六个活动中已经捕获的几个活动组成。为了完整性，Pacione等人的其他三个原则活动是:A7在系统执行中，A8评估系统设计和A9的质量。理解系统的领域。由于我们热衷于观察FireDetective将如何用于不熟悉的代码，我们努力为第二组任务选择涉及在

33、研究的A部分中未检查的代码。尽管如此，由于软件系统保持不变这一事实，学习效应可能是可能的.然而，这不应该影响我们的结果，因为我们并不是在衡量使用FireDetective的开发人员效率的提高（或降低），而是在衡量FireDetective的用户体验。3.5试点环节为了对研究进行微调，进行了三个试点阶段。三个试点参与者中有两个是本文第二作者的同事;第三个试点参与者是通过与我们招募其他参与者相同的途径招募的。所有的试验阶段都以与实际研究类似的方式进行，除了我们特别感兴趣的是所有任务是否清晰，任务是否被认为太难，以及我们可以通过其他方式改进实验设置。第一个试验阶段没有使用“大声思考，结果发现很难重建

34、参与者的思维步骤。因此，我们转而用音频和屏幕录音来大声思考，此外，问卷的规模也有所减少，更多地强调参与者的访谈。为了将研究的总时长控制在2小时以内，第二部分（参与者使用FireDeteCtiVe）的持续时间从35分钟减少到25分钟。在第二试点期间，我们发现任务太难了，所以他们改变了，使他们更容易一些。为了减轻参与者的压力，我们决定一次分配一项任务。此外，在研究开始时，我们明确表示，如果参与者不确定下一步要做什么，他们可以表明这一点，然后继续下一个任务。最后，FireDeteCtiVe的用户界面得到了改进和简化。第三次试运行没有出现大问题，之后只做了一些小的调整。特别是，我们修改了Eclipse

35、的介绍,以排除对ECIiPSe特性的解释（例如调用层次结构”）,因为这样的解释可能会使参与者偏向于使用这些特性。此外，还调整了一些任务描述，使其更加清晰。3.6与会者简介用户研究的所有参与者都被要求具有Web开发经验。由于术语“Web开发经验”可以被广泛地解释，我们特别要求具有基本的JaVa和JaVaSCriPt经验。我们假设当人们有这两种语言的经验时，特别是后者,他们也会有Web开发的经验。我们招募的9个参与者中有8个都是这样。一名参与者没有Web开发经验，结果也反映了这一点:参与者只能完成最基本的任务。由于参与者显然不能代表目标人群，我们排除了这一数据。因此，从现在开始，在分析中只考虑8个

36、参与者。1.evelJavaJavaScriptJSPDojoEclipseFireBug图3.1参与者使用相关技术和工具的经验的方框图我们的8位参与者很好地代表了我们的目标人群。其中5人从事专业的Web开发工作：1人全职,4人兼职。另外两人有一份专业的软件开发工作:一份全职，一份兼职。这两位参与者都表示,他们至少有一部分工作是从事Web开发项目的。除了两名全职开发人员外，其他六名参与者都是计算机科学或软件工程专业的学生:四名本科生和两名博士生。参与者的Web开发经验的中位数为2年（最少1年，最多1年）。5年）；可以说这是一个很低的数字。然而，像AjaX这样的技术出现的时间并不长:在我们研究的

37、时候，Ajax这个术语出现还不到5年（Garett2005）。此外，软件开发经验的中位数为5.5年（最少2年，最多5年）。10年），这表明参与者确实具备一般的软件开发技能。参与者评价了他们使用与研究相关的特定技术的经验。他们采用李克特5分制;结果如图3.1所示。我们可以清楚地看到,参与者对Java、JavaScript.Eclipse和FireBug有很好的理解,但是,我们也可以看到他们不熟悉JSP和Dojo库。这对研究的可泛化性的影响将在第7节中讨论，其中包括对有效性的威胁。参与者事先没有对PetStOre或蓝图库的了解，这可以从观察参与者在任务中的工作中看出。4用户研究的发现和讨论我们的发

38、现涵盖了目前使用的AjaX理解策略（第A部分，第4.1节），以及动态分析，特别是FireDeteCtiVe支持这种理解的方式（第B部分，第4.2节）。虽然我们在这项研究中的重点不是评估已完成任务的数量，而是用于解决它们的策略，但有趣的是，注意到工作的子任务的中位数是6（最小4,最大4）。8）为A部分，7（最小5,最大9）在研究的两个部分中，大约三分之二的尝试都得到了正确答案（详情见表5和表6）。表4.1用户研究的A部分的正确性评分平均数最小值中位数最大值Attempt6468Correct42.53.756.5Fractioncorrect0.660.50.650.81在研究的两个部分中，大约

39、三分之二的尝试都得到了正确答案。4.1PartA:观察当前的理解策略研究的第一部分的核心是我们的第一个研究问题：“Web开发人员目前在试图理解Ajax应用程序时使用哪些策略？当参与者使用Eclipse和FireBug时，我们能够进行一些观察。首先，参与者几乎完全依赖于自下而上的理解策略，即从最低的水平开始。他们试图将他们发现的代码片段拼凑在一起。参与者主要关注于探索控制流关系（Pennington1987）,即寻找函数、方法和类的定义和/或出现。为了探索这些控制流关系,所有参与者都大量使用了文本搜索。虽然ECIiPSe提供了用于探索控制流的功能，例如OpenDeclaration和CallHi

40、erarchy,函数，但参与者只是偶尔使用这些函数（远少于文本搜索）。一个可能的原因可能是这些函数（在研究时）对于Web应用程序并不总是像预期的那样工作:例如，打开JaVa方法的“调用层次结构”并不显示从JSP文件进行的调用，并且“开放声明”并不总是与JaVaSCriPt的匿名函数一起工作得很好。特定于Web应用程序的文本搜索的另一个用途是将DOM树中元素的id（通常通过FireBug元素检查器找到）映射到代码中使用id的位置。我们还注意到文本搜索的更多特殊用途，例如搜索URL的（部分）或搜索Web页面的某些文本，参与者成功地或不成功地使用这些方法来了解特定元素或URL在服务器上的何处生成。文

41、本搜索会导致许多问题。由于搜索结果窗口混乱或选择了错误的搜索范围,有时会错过重要的结果。最大的问题是，文本搜索一次只允许用户探索一个控制流链接，很容易失去跟踪。在执行任务时表4.2用户研究的B部分的正确性评分平均数最小值中位数最大值Attempt6.75579Correct4.693,.54.756Fractioncorrect0.710.390.710.9参与者被要求遵循一个小而分支的呼叫树，参与者很快就失去了他们己经探索过的分支的踪迹，导致他们出错:只有两名参与者能够提供正确的答案。由此我们得出结论，Web开发人员目前使用的策略是可以改进的。参与者主要依赖于查看代码和文本搜索，这可以通过工

42、具更好地支持。因为遵循控制流构成了参与者操作的相当大一部分，所以支持这个过程似乎是有用的。考虑到静态分析的不完全性和Web应用程序的高度动态性，我们的发现支持了我们的论点,即动态分析将有利于工具支持。4.2B部分:动态分析支撑这部分研究的核心是我们的第二个研究问题：“动态分析能否提高对Ajax应用程序的理解？我们通过考虑FireDetective工具提供的动态分析是否可以用于提高对AjaXWeb应用程序的理解来探讨这个问题。此外，如果情况确实如此，我们也希望更多地了解这是如何工作的，以及我们可以做些什么来进一步提高理解。我们通过四种不同的途径对这些问题进行了深入了解:测试前-测试后问卷、关于功

43、能有用性的问卷、参与者使用工具的观察和最终访谈。4.2.1PreteSt-POStteSt准备前测和后测结果如图4所示。从结果中我们可以看到，前测和后测的结果是相当相似的:参与者在使用工具之前和之后并没有完全改变他们的观点。预测试结果相当积极，这表明用户认为他们可以从工具支持中受益。测试后的结果也是积极的，并表明参与者对FireDetective并不失望。参与者特别指出，该工具可以帮助他们更有效地理解Web应用程序(图4a)和更高效地理解Web应用程序(图4b)。参与者似乎也相信，该工具有助于他们对正在研究的Web应用程序的理解更有信心(图4c),尽管与其他问题相比，他们的答案在某种程度上更分

44、散。从图中可以看出，在后期测试中，有一位参与者回答非常不同意”。有趣的是，当被问及为什么会这样时，参与者回答说，这个工具让一些任务变得太简单了：“似乎我得到答案的速度比我预期的要快得多,这让我怀疑我有多相信我得出的结果。”最后，参与者承认该工具增加了价值(图4d)虽然这些只是初步发现，但我们认为它们令人鼓舞。他们认为利用动态分析技术的FireDetective确实能够提高对Ajax应用程序的理解能力。Pretest Posttest(d)Minimalvalue(e)Legend图4.1参与者使用FireDetective前(浅灰色)的期望分布和使用后(蓝色)的体验分布4.2.2特征我们询问了

45、参与者对FireDetective的6个特征(图5)的看法，这是我们想要深入研究的：高级视图(F1)，经过过滤的文件视图，只显示当前页面上使用的文件(F2),在客户端和服务器跟踪之间跳转的能力(F3),跟踪AjaX请求的生命周期的能力(F4),通过启动和停止跟踪对分析进行时间切片(F5),以及分析是实时的(F6)。通过查看屏幕记录，我们能够重建功能使用；特征有用性是通过要求参与者在最终问卷中指出他们的前3个特征来衡量的。12345678Fl:High-leveloverview11213F2:Filteredfilesview32222F3:Jumpingbetweenclient-serve

46、r33311F4:FollowingAjaxrequests*lifecycles3F5:Timeslicing1112F6:Real-timeanalysis233图4.2参与者的三大特点所有参与者都使用了前三个特征(Fl,F2,F3)o这并不奇怪，因为这些特性是该工具的核心。8个参与者中有6个使用了时间切片特征(F5),4个参与者简要地探索了生命周期特征(F4)。使用F6是隐式的。参与者对特征的主观偏好如图5所示。我们可以看到，没有明确的首选特征。然而，我们可以观察到一些趋势，这可能会让我们对FireDetective如何帮助提高程序理解有一些了解。高级概览(Fl)和高级视图的时间切片(F

47、5)似乎都很受欢迎，每个都有三张#1票，在客户机和服务器之间跳转(F3)也有两张町票。对这种流行的一个可能的解释可能是，这三个特征都在实现更自上而下的理解过程中发挥了作用，正如我们从研究的A部分中看到的那样，参与者以前没有使用过这一过程。参与者现在不需要从低级代码开始，而是可以查看Ajax请求和DOM事件等抽象内容，并将它们作为探索代码的起点。过滤后的文件视图(F2)通常拥有最多的票数，并且可能扮演类似的角色。从研究的A部分，我们看到参与者通常不知道与宠物商店的某个页面相关的所有文件:过滤后的文件视图提供了这些相关文件的初步概述，这样参与者就有了一个更好的调查起点。很难确定FireDetect

48、ive的哪些元素是其有用性的主要贡献者。有些功能是无法通过问卷测试的，例如“代码视图和匿名函数命名”(自动)：这些功能一直在使用，但正因为如此，参与者很难确定这些功能是否真正有用。4.2.3观察与访谈除了预期的学习曲线和可用性问题(参见MatthijSSen2010),参与者在使用FireDetective时还遇到了一些问题。一些与会者遇到的一个有趣的问题与JaVaSerVlet过滤器有关，它是由处理请求的Web应用程序定义的服务器端类。由于该工具记录了对所有方法的调用，它还显示了对筛选类的调用。但是，它不能显示为什么会发生这些调用，因为调用过滤器的内部服务器逻辑隐藏在视图中，而且即使该工具要显示这些内部调用，也会产生失真的图像，因为调用过滤器的真正原因是XML文件中指