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
llllACK
ll
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
Top Related