Tools from HCI Research:

2. Isopleth

“Isopleth embeds sensemaking scaffolds informed by the learning sciences to (1) expose hidden functional and event-driven relationships, (2) surface functionally related slices of code, and (3) support learners manipulating

the provided code representations. To expose event-driven relationships, Isopleth implements a novel technique called Serialized Deanonymization to determine and visualize asynchronous functional relationships.”

http://users.eecs.northwestern.edu/~hq/papers/isopleth.pdf

3. Telescope

Telescope is “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.”

4. Unravel

Unravel is “an extension of the Chrome Developer Tools for quickly tracking and visualizing HTML changes, JavaScript method calls, and JavaScript libraries. Unravel injects an observation agent into websites to monitor DOM interactions in real-time without functional interference or external dependencies. To manage potentially large observations of events, the Unravel UI provides affordances to reduce, sort, and scope observations”.

5. FireCrystal

“FireCrystal is a new Firefox extension that allows developers to indicate interactive behaviors of interest, and shows the specific code (Javascript, CSS, and HTML) that is responsible for those behaviors. FireCrystal provides an execution timeline that users can scrub back and forth, and the ability to select items of interest in the actual web page UI to see the associated code. FireCrystal may be especially useful for developers who are trying to learn the implementation details of interactive behaviors, so they can reuse these behaviors in their own web site.”

6. Scry

“The Scry tool embodies a new approach to locating the code that implements interactive behaviors. A developer selects a page element; whenever the element changes, Scry captures the rendering engine’s inputs (DOM, CSS) and outputs (screenshot) for the element. For any two captured element states, Scry can compute how the states differ and which lines of JavaScript code were responsible. Using Scry, a developer can locate an interactive behavior’s implementation by picking two output states; Scry indicates the JavaScript code directly responsible for their differences.”

7. Ply

Ply is “a CSS inspection tool that helps novices use their visual intuition to make sense of professional webpages. We introduce a new visual relevance testing technique to identify properties that have visual effects on the page, which Ply uses to hide visually irrelevant code and surface unintuitive relationships between properties”

8. Tutorons

“We propose language-specific routines called Tutorons that automatically generate context-relevant, on-demand microexplanations of code. A Tutoron detects explainable code in a web page, parses it, and generates in-situ natural language explanations and demonstrations of code. We build Tutorons for CSS selectors, regular expressions, and the Unix command “wget”. We demonstrate techniques for generating natural language explanations through template instantiation, synthesizing code demonstrations by parse tree traversal, and building compound explanations of co-occurring options.”

9. Whyline

“Interrogative Debugging is a new debugging paradigm in which programmers can ask why did and even why didn’t questions directly about their program’s runtime failures. The Whyline is a prototype Interrogative Debugging interface for the Alice programming environment that visualizes answers in terms of runtime events directly relevant to a programmer’s question.”

10. WebCrystal

“WebCrystal, a web development tool that helps users understand how a web page is built. WebCrystal contributes novel interaction techniques that let the user quickly access HTML and CSS information by selecting questions regarding how a selected element is designed. It provides answers using a textual description and a customized code snippet that can be copied-and-pasted to recreate the desired properties. WebCrystal also supports combining the styles and structures from multiple elements into the generated code snippet, and provides visualizations on the web page itself to explain layout relationships.”

11. Dinah

“Dinah [is] an interface to support non-programmers with selecting code causing graphical output. Dinah assists non-programmers by providing concurrency support and in-context affordances for statement replay and temporally based navigation.”

12. Blueprint

Blueprint is “a Web search interface integrated into the Adobe Flex Builder development environment that helps users locate example code. Blueprint automatically augments queries with code context, presents a code-centric view of search results, embeds the search experience into the editor, and retains a link between copied code and its source.”

13. “Extracting Client-side Web Application” paper

“In this paper we present a semi-automatic method for extracting client-side web application code implementing a certain behavior. We show how by analyzing the execution of a usage scenario, code responsible for a certain behavior can be identified, how dependencies between different parts of the application can be tracked, and how in the end only the code responsible for a certain behavior can be extracted.”