How to Debug Remote Browsers

By  on  

It's super frustrating when bugs pop up only in a remote browser. Something about that user, that device, or that environment is different, but I don't know what! And of course, I can't recreate it on my local development machine.

The team at TrackJS came up with a cool way to connect and debug these remote browsers that we call RemoteJS. RemoteJS is a free service where you can attach a simplified JavaScript debugger to a remote browser. The debugger provides a remote console where you can see logs, url, network events, and execute commands. You can even pull a remote screenshot.

To use it, just create a new "debugger channel" for agents to connect to. Connecting the agent is with a JavaScript snippet to attach to the browser and establishes a websocket connection back to the web debugger. You can deploy it conditionally to catch an annoying heisenbug, perhaps activating if the `?debug` querystring is present. You can also execute it directly or as a bookmarklet if you can't do a deploy.

RemoteJS can help make the most frustrating kind of bugs a little less painful. Give it a try!

Todd Gardner

About Todd Gardner

Todd Gardner is a software entrepreneur and developer who has built multiple profitable products. He pushes for simple tools, maintainable software, and balancing complexity with risk. He is the cofounder of TrackJS and Request Metrics, where he helps thousands of developers build faster and more reliable websites. He also produces the PubConf software comedy show.

Recent Features

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Full Width Textareas

    Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily...

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

Discussion

  1. that’s kind of awesome

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!