FireCrystal: Understanding interactive behaviors in dynamic web pages

Authors:
Stephen Oney;Brad Myers
Affiliations:
Human-Computer Interaction Institute - Carnegie Mellon University;Human-Computer Interaction Institute - Carnegie Mellon University
Venue:
VLHCC '09 Proceedings of the 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)
Year:
2009

Citing 0
Cited 17

A code reuse interface for non-programmer middle school students

Proceedings of the 15th international conference on Intelligent user interfaces
End user software engineering: CHI 2010 special interest group meeting

CHI '10 Extended Abstracts on Human Factors in Computing Systems
Dynamic and graphical web page breakpoints

Proceedings of the 19th international conference on World wide web
Extracting client-side web user interface controls

ICWE'10 Proceedings of the 10th international conference on Web engineering
Toward transforming freely available source code into usable learning materials for end-users

Evaluation and Usability of Programming Languages and Tools
Dinah: an interface to assist non-programmers with selecting program code causing graphical output

Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
Creating mashups by direct manipulation of existing web applications

IS-EUD'11 Proceedings of the Third international conference on End-user development
Reusing web application user-interface controls

ICWE'11 Proceedings of the 11th international conference on Web engineering
Extracting client-side web application code

Proceedings of the 21st international conference on World Wide Web
Client-side web application slicing

ASE '11 Proceedings of the 2011 26th IEEE/ACM International Conference on Automated Software Engineering
WebCrystal: understanding and reusing examples in web authoring

Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
Integrating heterogeneous web services from an end user perspective

Proceedings of the 9th Middleware Doctoral Symposium of the 13th ACM/IFIP/USENIX International Middleware Conference
Understanding Ajax applications by connecting client and server-side execution traces

Empirical Software Engineering
Quantifying and reducing the cost of web edits

CHI '13 Extended Abstracts on Human Factors in Computing Systems
Mockup driven web development

Proceedings of the 22nd international conference on World Wide Web companion
Cascading tree sheets and recombinant HTML: better encapsulation and retargeting of web content

Proceedings of the 22nd international conference on World Wide Web
Interactive record/replay for web application debugging

Proceedings of the 26th annual ACM symposium on User interface software and technology

Quantified Score

Hi-index	0.00

Visualization

Abstract

For developers debugging their own code, augmenting the code of others, or trying to learn the implementation details of interactive behaviors, understanding how web pages work is a fundamental problem. 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.