Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Rivet: Browser-agnostic Remote Debugging for Web Applications James Mickens."— Presentation transcript:

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

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

3 Motivation: What Happens When Things Go Wrong? Built-in IE debugger Built-in FF 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 make a WAN debugging protocol efficient? How do we implement breakpoints?

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

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

13 Pausing a Multi-frame Web Page

14 PAUSE REQ ll ACK ll PAUSE REQ ACK

15 FROZ EN

16 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 AppIDE Debug server I’m paused! Session ready! Get globals. Values of globals. Expand X. Properties for X. No session... Attached to remote page! NameValue Xobject Y42 Z“red” NameValue Xobject foofalse Y42 Z“red”

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; } function f(x){ var dbgCmd,result; while(dbgCmd = Rivet.getDbgCmd(result)){ result = eval(dbgCmd); } return x + 42; } Put breakpoint here

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

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

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

32 Traversing the Entire JavaScript Heap


Download ppt "Rivet: Browser-agnostic Remote Debugging for Web Applications James Mickens."

Similar presentations


Ads by Google