Веб-разработчикам: 5 инструментов, которые помогут найти ошибки на сайте

Традиционно ошибки, обратная связь от клиентов и запросы на нововведения и правки обсуждаются в длинных переписках или встречах, на которых инициируется следующая фаза разработки, в которой реализуются поднятые вопросы.

Но последовательность «намылить, сполоснуть, повторить» работает медленно: отчёты об ошибке надо обработать, задокументировать, сделать скриншоты, принять решение, что делать, и затем поставить задачу.

Гораздо более эффективно - как можно раньше получить обратную связь и обработать её параллельно с процессом разработки. Prostoweb.com.ua предлагает вам рассмотреть варианты.

Современный путь отчёта об ошибках

Сейчас доступны отличные решения, такие как встроенные интерфейсы, позволяющие заказчикам, тестировщикам и пользователям отправлять отчёты об ошибках, давать обратную связь касательно дизайна и предлагать нововведения прямо из браузера. Нет необходимости вручную делать снимки экрана, сохранять какие-либо данные и т.д.

Такой подход к отчётам об ошибках в высшей мере уничтожает ручное документирование, отслеживание, обработку данных, создание скриншотов, спецификаций и долгие совещания, отбирающие ценное время разработчиков.

К тому же этими инструментами могут пользоваться все участники проекта: заказчики, менеджеры, дизайнеры и разработчики, причём одновременно. Правами доступа легко можно управлять, отчёты генерируются автоматически, зачастую реализована интеграция с такими сервисами, как Basecamp, Trello, GitHub.

Рассмотрим некоторые из таких инструментов подробнее.

Usersnap

Согласно сайту Usersnap, этот сервис является «отчётом об ошибках для всех, работающих над веб-проектами». Настроить Usersnap на работу с вашим проектом просто: необходимо скопировать и вставить готовый сниппет на JavaScript’е или установить расширение для Chrome или Firefox.

После установки, Usersnap добавляет кнопку «Feedback» на вашу веб-страницу. Далее клик на кнопке покажет панель с различными инструментами комментирования, помогающими оставлять обратную связь в виде текста и рисунков.

Одним из полезных инструментов сервиса Usersnap является Console Recorder, сохраняющий ошибки и другие потенциально ценные данные, полученные с помощью консоли разработчика.

Usersnap работает с Asana, Basecamp, GitHub.

Стоимость использования начинается от $19 в месяц. Самый дорогой пакет — $99 в месяц. Интеграция Usersnap с другими сервисами требует как минимум $49 в месяц.

BugHerd

Когда вы начнёте пользоваться BugHerd’ом вы быстро поймёте, что авторы сервиса потратили много времени, упрощая процесс отправки сообщения об ошибках и обратной связи. Как и Usersnap, данный сервис может быть установлен как сниппет на JavaScript или расширение для браузера.

При установке BugHerd’а запускается мастер установки, направляющий вас в этом процессе.

После установки, интерфейс сервиса появляется в боковой панели браузера. Самым важным инструментом является кнопка «+», позволяющая выбирать любой элемент HTML на странице и добавлять к нему комментарии.

Также BugHerd добавляет цветные маркеры на веб-странице для быстрой и лёгкой визуализации статуса каждой задачи.

Ответственный за устранение ошибки назначается по ходу просмотра проекта.

После отправки отчёта об ошибке создаётся новая «карточка», к которой можно получить доступ из интерфейса администратора BugHerd’а.

Сервис интегрируется с Basecamp, GitHub, Campfire и другими сервисами управления проектами кроме Trello.

В самом BugHerd’е неплохо реализованы функции управления проектами, так что интеграция с другими сервисами не критична.

Стоимость использования начинается с $29 в месяц для 5 пользователей и доходит до $180 для 50 пользователей.

BugMuncher

BugMuncher — это минималистский инструмент для ведения отчётов об ошибках. Устанавливается с помощью готового сниппета на JavaScript’е, расширений для браузеров не существует. Весь процесс установки подробно описан.

Подобно другим сервисам ведения отчётов об ошибках, BugMuncher добавляет кнопку «Feedback!» на страницу вашего проекта. Клик по кнопке отображает в модальном окне два инструмента: «Подсветить (Highlight)» и «Затемнить (Black Out)».

Во время отправки сообщения обратной связи, пользователю также необходимо ввести электронный адрес. После этого скриншот передаётся сервису BugMuncher вместе с такой сопутствующей информацией, такой как название, версия и размер открытого окна браузера, последовательность кликов и т.д.

BugMuncher не совсем корректно работает с браузером Chrome: подсвеченные и затемнённые области отображаются со смещением.

Сервис интегрируется с Trello, GitHub и Zendesk’ом, но для этого нужна подписка на средний план стоимостью $49.

Стоимость использования начинается от $19 в месяц — до 150 отчётов об ошибках. Максимальный пакет стоит $99 в месяц, и вы можете использовать логотип своей компании вместо логотипа BugMuncher’а.

Redline

Redline устанавливается в ваш проект с помощью сниппета на JavaScript’е.

Сервис предлагает два инструмента: размещение меток и комментирование.

После отправки сообщения об ошибке пользователь получит ссылку на страницу с описанием и скриншотом. Хотя этот способ сотрудничества удобен, то, что сообщения находятся в свободном доступе, оттолкнёт от использования Redline’а и заказчиков, и исполнителей. Но если вам нужен простой способ передачи некритичных сообщений об ошибках, Redline справится с этим.

Сервис интегрируется с Basecamp, Trello, Jira, GitHub и другими сторонними сервисами.

Стоимость подписки начинается от $19 в месяц и, даже начиная с самого простого плана, пользователи получают доступ к поддержке по SSL и бексонечному количеству проектов. API, настройки безопасности и подсветка элементов доступны для подписчиков плана Enterprise (стоимость на сайте не указана).

InVisionLiveCapture

InVision заработала свою репутацию за то, что этот сервис является самым тщательно продуманным, включающим в себя инструменты прототипирования и управления проектами. Интеграция с сервисами третьих сторон возможна благодаря так называемому Live Embed-коду.

Несколько месяцев назад InVision ввела в действие функцию LiveCapture — расширение для Chrome, собирающее информацию и скриншоты для отправки сообщений об ошибках и обратной связи.

Сам процесс установки Live Capture простой и быстрый. Сервис сохраняет весь экран, и после авторизации в InVision’е возможно комментирование и приглашение других пользователей к сотрудничеству.

InVision интегрируется с большинством популярных сервисов, таких как Basecamp, Trello, Slack. Кроме функций отправки сообщений об ошибках и обратной связи, InVision может сохранять различные версии дизайна, создавать прототипы и т.д.

Стоимость начинается от $15 в месяц, максимальный план стоит $100 и разрешает работу пяти сотрудников.

Заключение

Возможность отправлять сообщения об ошибках и иметь обратную связь прямо из браузера — отличное и простое решение: нет необходимости описывать каждую ошибку, каждое пожелание, достаточно указать на неё прямо на веб-странице и добавить небольшой комментарий.

Usersnap интуитивно понятен, может быть интегрирован с 20 другими сервисами, что хорошо для гибкости. Возможность получать дополнительную информацию о сессии работы тоже весьма полезна, так что Usersnap можно назвать победителем.

Стиль организации сообщений об ошибках BugHerd’а, называемый «Канбан», аккуратен. Также неплох сервис управления сообщениями об ошибках.

Redline и BugMuncher обладают набором простых функций, подходящих для процесса однопользовальского управления и разработки, например, для фрилансеров. В случае необходимости командной работы, потребуется переключиться на сервис с большим количеством функций или подключиться к какому-либо сервису, предоставляющему такие возможности.

InVision не подходит на 100% для работы с отчётами об ошибках. Хотя InVision LiveCapture и позволяет сохранять снимки экранов, он не позволяет пользователям оставлять комментарии без авторизации. Но InVision сам по себе полноценная платформа для работы с веб-проектами.

Материал с сайта sixrevisions.com