Telescope: Fine-Tuned Discovery of Interactive Web UI Feature Implementation

Telescope: Fine-Tuned Discovery of Interactive Web UI Feature Implementation
复制标题

Telescope:交互式 Web UI 功能实现的微调发现

DOI:
10.1145/2984511.2984570
复制
发表时间:
2016
期刊:
Proceedings of the 29th Annual Symposium on User Interface Software and Technology
影响因子:
--
通讯作者:
Haoqi Zhang
Haoqi Zhang
中科院分区:
--
文献类型:
--
作者:
Joshua Hibschman;Haoqi Zhang

文献摘要

被引文献

相似文献

专业网站包含开发人员可以学习的丰富互动功能,但是由于陌生代码的性质,了解他们的实施仍然是一个挑战。现有工具提供了分析源代码的能力,但是功能丰富的网站揭示了成千上万行的代码,并且可以轻松地压倒用户。因此,我们介绍了望远镜,该平台用于发现JavaScript和HTML如何支持网站交互。望远镜通过调整JavaScript细节,范围范围时间表并触发JS,HTML和网站组件之间的关系链接来帮助用户通过控制的复合视图来了解陌生的网站代码。为了在Open Web上支持这些负担能力,望远镜仪器在网站中使用JavaScript,而无需使用新颖的手工技术拦截,然后观看网站上发出的痕迹。在跨七个流行网站的案例研究中,望远镜帮助确定了数以万计的数以万计的前端代码,这些代码准确地描述了六个站点中所需的相互作用。在一项探索性用户研究中,我们观察到用户通过制定策略来通过望远镜分析相对少量的不熟悉的网站源代码来确定困难的编程概念。
Professional websites contain rich interactive features that developers can learn from, yet understanding their implementation remains a challenge due to the nature of unfamiliar code. Existing tools provide affordances to analyze source code, but feature-rich websites reveal tens of thousands of lines of code and can easily overwhelm the user. We thus present Telescope, a platform for discovering how JavaScript and HTML support a website interaction. Telescope helps users understand unfamiliar website code through a composite view they control by adjusting JavaScript detail, scoping the runtime timeline, and triggering relational links between JS, HTML, and website components. To support these affordances on the open web, Telescope instruments the JavaScript in a website without request intercepts using a novel sleight-of-hand technique, then watches for traces emitted from the website. In a case study across seven popular websites, Telescope helped identify less than 150 lines of front-end code out of tens of thousands that accurately describe the desired interaction in six of the sites. In an exploratory user study, we observed users identifying difficult programming concepts by developing strategies to analyze relatively small amounts of unfamiliar website source code with Telescope.