Практически все современные браузеры обладают инструментами для веб разработчика позволяющими редактировать 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 — по факту является прокси-сервером добавляющим в станицу свои скрипты которые синхронизируют страницу на клиентах с инструментами разработчика, аналогичными Chrome DevTools, встроенными в Ghostlab.
Вместо итогов
Подробнее в виде списка (разделять их на достоинства и недостатки я не решился):
- Программа выпускается только под Windows и OS X, но замечательно работает в VirtualBox.
- Расшаривать через Ghostlab можно как ссылки из интернета так и локальные файлы.
- Без интернета Ghostlab не запуститься.
- Подключить одновременно можно сколько угодно браузеров с любого количества устройств.
- При выполнении какого либо действия в любом из подключившихся браузеров, будь то прокрутка, набор текста, отправка формы или клик, все эти действия повторятся на всех клиентах. Что, по моему мнению, позволит изрядно сэкономить время при тестировании.
- При редактировании DOM или CSS в инструментах разработки Ghostlab, все подключенные клиенты будут моментально синхронизированы.
- Возможна удаленная отладка JavaScript.
- Встроенный file watcher.
- Поддержка немалого количества препроцессоров: Less, Sass, Stilus, HAML, Jade, CoffeScript, TypeScript.
- Генерация QR кодов для быстрой передачи ссылки на устройство.
- Программа платная. На сегодняшний день цена составляет 2 254,40 российских рубля. Но никто не запрещает продлевать семидневный триал основанный на MAC адресе.
Напоследок демо видео от одного из авторов.
Автор: edejin
