Rivet: Browser-agnostic Remote Debugging for Web Applications

1. Rivet: Browser-agnostic Remote Debugging for Web Applications James Mickens

2. SO MANY BROWSERS JAVASCRIPT IS HORRENDOUS “MOBILE” IS A HATEFUL ADJECTIVE Web development is a miasma of pain and confusion. THE NETWORK SCOFFS AT MORTAL DREAMS

3. Motivation: What Happens When Things Go Wrong? Built-in FF debugger Built-in IE debugger

4. What’s the problem with current browser debuggers? Can’t examine real bugs in the wild, only local ones! Tied to one browser!

5. What You’d Like A browser-agnostic remote debugger for web applications.

6. Worst day ever

7. Rivet: Remote Debugging for Web Apps

8. Awesome! Rivet lets you remotely debug web pages!

9. What’s the technical challenge?

10. How do we pause a web page? How do we interactively traverse object graphs? How do we implement breakpoints? How do we make a WAN debugging protocol efficient?

11. Pausing A Single Frame KeyPressCallback() AjaxCallback() ClickCallback() Mouse Click Ajax Data Key Press Queued Events Event Loop

12. Pausing A Single Frame Synchronous AJAX connection ClickCallback() ClickCallback() RivetCallback() Mouse Click Key Press Mouse Click Queued Events Event Loop

13. Pausing a Multi-frame Web Page

14. 1 PAUSE REQ 2 PAUSE REQ PAUSE REQ 3 4 ACK ACK ll ll ll ll ll

15. FROZEN

16. Inspecting Object Graphs • JavaScript has a powerful reflection interface • An object is just a dictionary! • Globals are properties of special windowobject! • Get f()’s source via f.toString()! Paused App Debug server IDE I’m paused! Name Value -------- -------- -X object foo false Y 42 Z “red” Name Value -------- -------- +X object Y 42 Z “red” Attached to remote page! No session . . . Session ready! ll Get globals. Values of globals. Expand X. Properties for X.

17. All network traffic uses JSON • To make debugging protocol efficient: • Compress messages • Fetch object data on-demand • Can use WER-style automated test scripts

18. Breakpoints function f(x){ return x + 42; } Put breakpoint here function f(x){ vardbgCmd,result; while(dbgCmd = Rivet.getDbgCmd(result)){ result = eval(dbgCmd); } return x + 42; }

19. Breakpoints Create source code for f’() 1 eval() that source code to get a JavaScript function object 2 Traverse the heap, replace refs to f() with refs to f’() 3 Unpause the application 4

20. 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

21. IT’S JUDGMENT DAY. STATISTICAL SIGNIFICANCE EXPECTED.

22. Rivet Overheads: Normal Operation

23. Time to Pause an Application

24. Time to Pause an Application

25. Size of Interactive Debugging Messages

26. Serializing the DOM Tree

27. Related Work

28. 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

29. 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

30. Conclusion The way web pages used to be HOLLYWOOD HAS RUINED EVERYTHING

31. 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