aaralyn
Uploaded by
31 SLIDES
447 VIEWS
310LIKES

Rivet: A Browser-Agnostic Remote Debugging Solution for Web Applications

DESCRIPTION

Rivet presents an innovative approach to remote debugging in web applications, allowing developers to debug across various browsers without being confined to a single environment. Traditional debuggers have limitations in examining real-world bugs and are often tied to specific browsers. Rivet overcomes these challenges, enabling seamless interaction with web pages, real-time diagnostics, and efficient debugging protocols. With negligible performance overhead and the ability to pause applications efficiently, Rivet enriches the web development process, providing enhanced tools for developers tackling the complexities of JavaScript and web applications.

1 / 31

Download Presentation

Rivet: A Browser-Agnostic Remote Debugging Solution for Web Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related