Telescope

Telescope

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 the magnitude of code on feature-rich websites can easily overwhelm the user. We thus present Telescope, a plat- form for discovering how JavaScript and HTML support a website interaction. Telescope aims to help users understand unfamiliar website code in ways they can control: adjusting JavaScript detail, scoping an execution timeline, and drawing relational links between JS and HTML that trigger observable connections between Telescope and the website. 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. Through complete source instrumentation, Telescope is able to interpret a much broader view of JavaScript execution than prior work. In a small user study, we observed users learning from relatively small amounts of unfamiliar website source code with Telescope. In a case study across seven popular websites, Telescope helped identify less than 150 lines of front-end code out of tens of thou- sands that accurately describe the desired interaction in each site.

Telescope image 1

Figure 1: he Telescope platform presents a uniquely constructed view of UI interaction source code by scoping JavaScript execution time and detail, drawing links between JavaScript and its HTML queries, and hiding less relevant library and boilerplate code.

Telescope image 2

Figure 2: The Sleight-of-Hand technique pictured above is a 7-step process for instrumenting a website’s source code via browser extension (black squares) and external instrumentation server (blue, middle right). After website load (1), the extension deploys an agent (2). The agent sends the sources for instrumentation via extension (3), which are returned (4), passed to the agent (5), and swapped for the originals, deleting references (6). The browser makes requests for the newly instrumented sources (7).

Team

Faculty

  • Haoqi Zhang

Ph.D. Students

  • 🎓 Josh Hibschman

Masters and Undergraduate Students

  • None