Ghostlab: использование инструментов разработчка Chrome для отладки в любом браузере

Практически все современные браузеры обладают инструментами для веб разработчика позволяющими редактировать DOM, CSS и отлаживать JavaScript.

Но лично для меня, наверное навсегда, останется зубной болью большой неприятностью, то что в каждом браузере инструменты разработчика выглядят, а самое главное, что они работают, по своему.

Второй, не менее страшной проблемой является то, что отладка под не встроенные мобильные браузеры просто невозможна.

Решение которое я нашел для себя, позволяющее проводить отладку сразу в нескольких браузерах и на нескольких устройствах, я хочу описать под катом.

Вместо введения

Для начала пройдемся по очевидным методам отладки, которые пожалуй известны всем front-end разработчикам, и их, по моему мнению, плюсам и минусам.

Все основные браузеры (Safari, Chrome, Firefox, IE), как уже говорилось, имеют встроенные инструменты разработки. Я не хочу рассуждать о том в каком браузере инструменты разработчика хуже или лучше. Они есть, и работать с ними можно. Но моё личное мнение, что они все разнообразны, и в некоторых браузерах, относительно часто и довольно радикально, меняют свой внешний вид. Лично для меня наибольшим удобством обладают инструменты разработчика Google Chrome, и в работе это очень важный фактор.

Отладка в браузерах на мобильных устройствах выглядит чуть менее удобно. Вам придется подключить устройство к компьютеру и инструменты разработчика браузера, на портативном устройстве, будут доступны с компьютера. Из всех пар, мобильных устройств и браузеров, существуют решения только Android-Chrome и IPhone/IPad-Safari. При этом отладка Android-Chrome стала доступна только с версии Android 4. А отладка пары IPhone/IPad-Safari осуществима только при подключении устройства к ноутбуку или компьютеру производства той же фирмы.

Можно конечно поставить Android, например, на VirtualBox, что избавит вас от покупки парка устройств, а если у вас есть устройство под управлением OS X, то можно пользоваться эмулятором любого из портативных устройств компании Apple.

Отладка таких браузеров как Firefox и Opera на портативных устройствах становиться просто невозможна, не говоря уже о том, что у многих людей еще остались устройства с ОС Android до версии 4.

Решение

Ghostlab ^[1] — по факту является прокси-сервером добавляющим в станицу свои скрипты которые синхронизируют страницу на клиентах с инструментами разработчика, аналогичными Chrome DevTools, встроенными в Ghostlab.

Вместо итогов

Подробнее в виде списка (разделять их на достоинства и недостатки я не решился):

1. Программа выпускается только под Windows и OS X, но замечательно работает в VirtualBox.
2. Расшаривать через Ghostlab можно как ссылки из интернета так и локальные файлы.
3. Без интернета Ghostlab не запуститься.
4. Подключить одновременно можно сколько угодно браузеров с любого количества устройств.
5. При выполнении какого либо действия в любом из подключившихся браузеров, будь то прокрутка, набор текста, отправка формы или клик, все эти действия повторятся на всех клиентах. Что, по моему мнению, позволит изрядно сэкономить время при тестировании.
6. При редактировании DOM или CSS в инструментах разработки Ghostlab, все подключенные клиенты будут моментально синхронизированы.
7. Возможна удаленная отладка JavaScript.
8. Встроенный file watcher.
9. Поддержка немалого количества препроцессоров: Less, Sass, Stilus, HAML, Jade, CoffeScript, TypeScript.
10. Генерация QR кодов для быстрой передачи ссылки на устройство.
11. Программа платная. На сегодняшний день цена составляет 2 254,40 российских рубля. Но никто не запрещает продлевать семидневный триал основанный на MAC адресе.

Напоследок демо видео от одного из авторов.

Автор: edejin

Источник ^[2]