Ghostlab: Using Chrome Development Tools to Debug in Any Browser

Almost all modern browsers have tools for web developers to edit the DOM, CSS and debug JavaScript.

But for me personally, probably forever, it will remain a big pain as a toothache , the developer tools look in every browser, and most importantly, they work in their own way.

The second, no less terrible problem is that debugging for non-built-in mobile browsers is simply impossible.

The solution that I found for myself, which allows debugging in several browsers and on multiple devices, I want to describe under the cat.

Instead of introducing

To get started, let's go through the obvious debugging methods, which are probably known to all front-end developers, and their, in my opinion, the pros and cons.

All major browsers (Safari, Chrome, Firefox, IE), as already mentioned, have built-in development tools. I don’t want to speculate in which browser the developer tools are worse or better. They are, and you can work with them. But my personal opinion is that they are all diverse, and in some browsers, relatively often and quite radically, change their appearance. For me personally, the tools of the Google Chrome developer are the most convenient, and this is a very important factor in work.

Debugging in browsers on mobile devices looks a little less convenient. You will have to connect the device to the computer and the browser developer tools, on the portable device, will be accessible from the computer. Of all the pairs, mobile devices and browsers, only Android-Chrome and IPhone / iPad-Safari solutions exist. At the same time, debugging Android-Chrome has become available only with Android 4. And debugging a pair of IPhone / iPad-Safari is only possible when connecting the device to a laptop or computer manufactured by the same company.

Of course, you can install Android, for example, on VirtualBox, which saves you from buying a fleet of devices, and if you have a device running OS X, then you can use the emulator of any of Apple's portable devices.

Debugging browsers such as Firefox and Opera on portable devices is simply impossible, not to mention the fact that many people still have Android devices up to version 4.

Decision

Ghostlab - in fact, it is a proxy server adding scripts to the page that synchronize the page on clients with developer tools similar to Chrome DevTools built into Ghostlab.

Instead of totals

More in the form of a list (I did not dare to divide them into advantages and disadvantages):

1. The program is released only under Windows and OS X, but it works great in VirtualBox.
2. You can share via Ghostlab both Internet links and local files.
3. Without the Internet, Ghostlab will not start.
4. You can connect as many browsers as you like from any number of devices at the same time.
5. When performing any action in any of the connected browsers, whether scrolling, typing, submitting a form or clicking, all these actions will be repeated on all clients. Which, in my opinion, will significantly save time during testing.
6. When editing the DOM or CSS in the Ghostlab development tools, all connected clients will be instantly synchronized.
7. JavaScript remote debugging is possible.
8. Built-in file watcher.
9. Support for a considerable number of preprocessors: Less, Sass, Stilus, HAML, Jade, CoffeScript, TypeScript.
10. Generation of QR codes for quick transfer of links to the device.
11. The program is paid. Today the price is 2,254.40 Russian rubles. But no one forbids to extend the seven-day trial based on the MAC address.

Finally, a demo video from one of the authors.


UPD: User nazarpc rightly noted the free counterpart built into Firefox , which I did not know about.