Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
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.

www.toddhgardner.comtoddhgardnerPosts

Request Metrics real user monitoring
Request Metrics real user monitoring

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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    pointer Media Query

    As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.

  • By
    Animated AJAX Record Deletion Using Dojo

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

  1. jonathan

    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!