Ghostlab: Using Chrome development tools for debugging in any browser

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

But for me personally, probably forever, toothache will remain a big nuisance, the fact that in each browser the developer’s tools look, and most importantly, they work in their own way.

The second, equally scary problem is that debugging under non-embedded mobile browsers is simply impossible.
')
The solution that I found for myself, which allows debugging in several browsers and on several devices at once, I want to describe under the cat.

Instead of introducing

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

All major browsers (Safari, Chrome, Firefox, IE), as already mentioned, have built-in development tools. I don’t want to talk about in which browser the developer’s tools are better or worse. 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 rather radically, they change their appearance. For me personally, the Google Chrome developer tools are the most convenient, and this is a very important factor in the 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’s developer tools, on a portable device, will be accessible from the computer. Of all the pairs, mobile devices and browsers, there are solutions only Android-Chrome and IPhone / iPad-Safari. At the same time, debugging of Android-Chrome became available only from Android 4. And debugging of the IPhone / iPad-Safari pair is possible only when the device is connected to a laptop or computer manufactured by the same company.

You can of course put Android, for example, on VirtualBox, which will save you from buying a fleet of devices, and if you have a device running OS X, you can use the emulator of any of the portable devices from Apple.

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

Decision

Ghostlab - in fact, is a proxy server that adds to the village its own scripts that synchronize the page on clients with developer tools similar to Chrome DevTools, embedded in 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 available only under Windows and OS X, but it works great in VirtualBox.
2. Share through Ghostlab as you can links from the Internet or 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.
5. When performing any action in any of the connected browsers, be it scrolling, typing, sending a form or a click, all these actions will be repeated on all clients. What, in my opinion, will allow to save time in testing.
6. When editing DOM or CSS in the Ghostlab development tools, all connected clients will be instantly synchronized.
7. Remote debugging of JavaScript 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 renew the seven-day trial based on the MAC address.

Finally, a demo video from one of the authors.


UPD: The user nazarpc rightly noted the free analog built into Firefox , which I did not know.