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
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    MooTools Accordion: Mouseover Style

    Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

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!