Rivet: Browser-agnostic Remote Debugging for Web Applications

James Mickens

JAVASCRIPT IS HORRENDOUS

SO MANY BROWSERS

“MOBILE” IS A HATEFUL

ADJECTIVE

THE NETWORK SCOFFS AT MORTAL DREAMS

Web development is a miasma of pain and confusion.

Motivation: What Happens When Things Go Wrong?

Built-in IE debugger

Built-in FF debugger

What’s the problem with current browser debuggers?

Can’t examine real bugs in the wild, only local ones! Tied to one browser!

What You’d Like

A browser-agnostic remote debugger for web applications.

Worst dayever

Rivet: Remote Debugging for Web Apps

Awesome! Rivet lets you remotely debug

web pages!

What’s the technical challenge?

How do we pause a web page?

How do we interactively traverse

object graphs?

How do we make a WAN debugging

protocol efficient?

How do we implement breakpoints?

Pausing A Single Frame

Queued Events Event Loop

KeyPress

KeyPressCallback()

AjaxData

AjaxCallback()

MouseClick

ClickCallback()

Pausing A Single Frame

Event Loop

Queued Events

Key Press

RivetCallback()

MouseClick

ClickCallback()

MouseClick

ClickCallback()

Synchronous AJAX connection

Pausing a Multi-frame Web Page

PAUSE REQ

llll

ACKll

llll

1 2

3 4

PAUSE REQ PAUSE REQ

ACK

FROZEN

Inspecting Object Graphs• JavaScript has a powerful

reflection interface– An object is just a dictionary!– Globals are properties of special window object!

– Get f()’s source via f.toString()!

ll

Paused App IDEDebug serverI’m paused! Session ready!

Get globals.

Values of globals.

Expand X.Properties for X.

No session . . .Attached to remote page!

Name Value-------- --------+X object Y 42 Z “red”

Name Value-------- ---------X object foo false Y 42 Z “red”

• All network traffic uses JSON• To make debugging protocol efficient:– Compress messages– Fetch object data on-demand

• Can use WER-style automated test scripts

Breakpoints

function f(x){ return x + 42;}

function f(x){ var dbgCmd,result; while(dbgCmd = Rivet.getDbgCmd(result)){ result = eval(dbgCmd); }

return x + 42;}

Put breakpoint here

Breakpoints

Create source code for f’()

eval() that source code to get a JavaScript function objectTraverse the heap, replace refs to f() with refs to f’()

Unpause the application

12

3

4

Live Patching

• Breakpoints are just an example!• Can use live patching to . . .– Dynamically install a bug fix– Create chat windows between user and developer– Implement stack traces

• See paper for details

IT’S JUDGMENT DAY.

STATISTICAL SIGNIFICANCE EXPECTED.

Rivet Overheads: Normal Operation

Time to Pause an Application

Time to Pause an Application

Size of Interactive Debugging Messages

Serializing the DOM Tree

Related Work

Related Work: Built-in Debuggers

• The ones that do only support:– A single web engine that’s . . .– Configured by a guru and which . . .– Isn’t constrained by the same-origin

policy!

• Most don’t have native support for remote debugging– Could add support using a plugin . . .

BUT THAT IS GROSS

Related Work: Mugshot• A JavaScript logging+replay

framework• Rivet uses some Mugshot-style

trickeration . . .• . . . but has three advantages:– Rivet doesn’t need a proxy server– Rivet’s in situ exploration is less fragile– Rivet performs less runtime shimming

James mickens

Wrote the

mugshot paper

Conclusion

The way web pages used to be HOLLYWOOD HAS

RUINED EVERYTHING

Conclusion• Rivet: a browser-agnostic remote debugger– Runs on unmodified browsers (no plugins!)– Doesn’t require context proxy– Supports interactive debugging, automatic diagnostics

• Rivet had good performance!– Negligible slowdown during normal operation– Pausing applications is fast– Debugging messages are small

• Rivet can perform non-trivial diagnostics