Using Chrome DevTools to Debug JavaScript in Any Browser with Ghostlab 2

Avatar of Chris Coyier
Chris Coyier on

The following a guest post by Andi Dysart and Matthias Christen of Ghostlab. I was pretty impressed when I heard that the newly-released Ghostlab 2 could do this. I think a lot of us developers use Chrome because the DevTools are so good, and it sure would be able to use them in other browsers, even on mobile devices. And why not? Chrome DevTools are a part of Blink, which is open source, right? We just needed a tool to make it happen.

Modern desktop browsers offer powerful integrated developer tools that let you get to the bottom of CSS or JavaScript problems quickly. Whether it’s Chrome, Firefox, Internet Explorer, or Safari, you will be able to inspect the DOM, apply CSS modifications in real-time, browse through loaded script files, set breakpoints to manually control the flow of execution and trace any exception or unexpected behaviour to its cause.

Now while that’s true for desktop browsers, it’s a little more difficult when you try to identify a problem in a browser on a mobile device.

Options for Mobile Web Debugging

Let’s have a look at what your options are for mobile debugging tools. We’re first going to outline how you can inspect and debug websites on Android and iOS using Google’s and Apple’s respective toolset (we’ve chosen to limit ourselves to these platforms for the sake of briefness). Then, we’ll introduce Ghostlab’s approach to remote inspection and debugging with the help of a simple example.

Debugging Using Vendor Toolsets

Goggle’s developer tools allow you to inspect any web page running in Chrome on Android by connecting the Android device (only 4.0 and newer) to your computer via USB. On your computer, you’ll also need Chrome. To set this up, enable USB debugging on the device, and in your computer’s Chrome, browse to `chrome://inspect` to discover the device. After you’ve allowed the desktop access on the device, you can inspect and debug any web page that is viewed in Chrome on the device.

This is possible for iOS as well, Safari to Safari. You also need to connect your device to the computer with USB. In the advanced Safari settings on the device, enable the option “Web Inspector”. Then open Safari on your computer, and in the “Developer” menu, you’ll see a list of iOS devices currently connected to your computer by cable. For each device, you’ll be able to inspect and debug any web page that is being displayed in Safari.

So let’s say that for two popular platforms, there are ways to inspect your website on the device – albeit with limitations. On Android, it won’t work below version 4.0. Also, you can only inspect pages that run in Chrome – if you experience problems in another mobile browser, that won’t be enough. This is similar on iOS, where you are only able to inspect mobile Safari. And of course, you’ll need a Mac to do so.

In addition to these limitations, you basically need a separate toolset for each target platform – one for Safari on iOS, and one for Chrome on Android. Even if you can find a toolset for each of your platforms, you’ll need to set all of them up, figure out how to work with them – and that’s still not taking into consideration that you’ll have to connect each device to your computer with a cable.

Other Options

The addition of development tools for mobile devices to browsers has been quite recent. Before that you could (and still can) use weinre (“WEb INspector REmote”), a project that enjoyed great popularity for mobile debugging. To use weinre, you need to add a script the page you want to debug and start the weinre server on the command line. Unfortunately, weinre doesn’t support some CSS features like pseudo elements, media queries or import rules, and it doesn’t support JavaScript debugging.

Ghostlab

Ghostlab (which runs on both Mac and Windows) proxies the site you want to test (either from your local filesystem or a remote URL) and lets any number of clients (browsers or devices) connect to the site at the same time. Then, it will keep all of them in sync – meaning that if you use your desktop browser to do a test run, everything you do (scrolling, link clicking, form filling, etc.) will be replicated on all connected clients.

Apart from the synchronized testing, Ghostlab ships with Google Chrome’s DevTools. But instead of just including them as they are, we’ve added considerable tweaks: apart from the regular CSS inspection, you can inspect multiple clients synchronously: when you modify the DOM or CSS styles in any way, your change will be replicated on all connected clients. And you can even debug JavaScript remotely on any connected client.

Ghostlab: Remote DOM Inspection

Once you have Ghostlab running and have started the server by clicking the play button, you can connect your default browser by clicking the rocket button and mobile devices by entering the Ghostlab server URL or using the convenient popup QR barcode.

Now that you’ve got several clients connected, let’s inspect them. On any listed client, you can start inspection by clicking the inspector icon (</>).

When the inspector is started, you’ll see the familiar Chrome DevTools. There are two options that are different, though: you can enable or disable synchronized inspection, and enable or disable JavaScript debugging.

Let’s start with DOM inspection. In the elements section, select any DOM element that you’d like to make changes to, and do so; e.g., edit its CSS styles or modify node attributes or texts. If you’ve got synchronized inspection enabled, the modifications you make will be transmitted to all connected clients – if synchronized inspection is disabled, it will only be applied on the client you are currently inspecting.

Here’s a movie showing off how that works:

Ghostlab: Remote JavaScript Debugging

To debug JavaScript on any connected client, tick the “Debug JavaScript” checkbox. This will cause the clients to reload the JavaScript of the page they’re currently viewing. The script code is transcoded by Ghostlab to allow remote debugging. Since this induces a performance penalty, we don’t enable it by default, but only when you explicitly require it.

Once the transcoded JavaScript has been loaded, debugging works just like you’d expect it to, including JavaScript code evaluation in the console, inspecting and watching variables, etc. Go to the scripts tab, choose the script file of your choice, and set a breakpoint at the location that you’re interested in. (Ghostlab doesn’t transcode every file; for the performance penalty reason, it keeps a blacklist of scripts, which by default includes major JavaScript libraries. If Ghostlab doesn’t let you set a breakpoint, the file is probably black-listed, and you’ll need to white-list the file you’re interested in in Ghostlab’s preferences.)

In the simple example, we’ve got two buttons, one of which will trigger four table cells to be re-coloured, and one of which will cause an error trying to achieve the same task.

See the Pen yymJWG by Vanamco (@vanamco) on CodePen.

Conclusion

Although some of the pain of mobile debugging has gone away with browser-specific tools, there still are limitations, and it requires setup. With Ghostlab, no special setup is required, and it’s easy to get started.