Логгер консоли перехватывает весь вывод консоли (console.log, console.warn, console.error, console.info) и отображает его во всплывающей панели прямо на странице. Видите ошибки JavaScript, отладочные сообщения и предупреждения в реальном времени, не открывая браузерные DevTools. Сообщения выделены цветом по типу и содержат временны́е метки и трассировки стека для ошибок.
Открывать браузерные DevTools только для того, чтобы проверить вывод консоли, — значит занимать ценное место на экране, особенно на небольших мониторах или когда нужно видеть полную страницу и одновременно следить за логами. Логгер консоли предлагает лёгкую альтернативу: всплывающую панель, которая отображает весь вывод консоли по мере его появления, поверх страницы. Панель перехватывает console.log, console.warn, console.error, console.info и необработанные исключения с полными трассировками стека. Сообщения выделены цветом (ошибки — красным, предупреждения — жёлтым, информация — синим, логи — белым/серым) и содержат временны́е метки для отслеживания момента возникновения событий. Кнопки фильтров позволяют показывать только определённые типы сообщений — только ошибки при отладке сбоя или только предупреждения при поиске уведомлений об устаревших функциях. Панель перетаскивается, изменяется в размере и полупрозрачна, чтобы не перекрывать слишком много содержимого страницы.
Сообщения консоли появляются в реальном времени по мере их записи. Наблюдайте за логами инициализации страницы, обработкой ответов API, событиями взаимодействия пользователя и сообщениями об ошибках — всё это стримится в реальном времени во всплывающей панели.
Ошибки — красным, предупреждения — янтарным/жёлтым, информация — синим, стандартные логи — белым/серым. Мгновенно различайте критическую ошибку и рядовое сообщение лога только по цвету.
Ошибки JavaScript содержат полную трассировку стека с именами файлов, функций и номерами строк. Нажмите на ссылку на файл, чтобы точно определить источник ошибки, не открывая DevTools.
Кнопки фильтров вверху позволяют показывать/скрывать определённые типы сообщений: все, только ошибки, только предупреждения, только информацию, только логи. Счётчик на каждом фильтре показывает количество сообщений данного типа.
Каждое сообщение показывает время записи (формат ЧЧ:ММ:СС). Отслеживайте последовательность событий, выявляйте проблемы с производительностью (время между вызовом API и ответом) и соотносите сообщения с действиями пользователя.
Очистите все сообщения, чтобы начать заново, или накапливайте их по мере работы со страницей. Панель показывает общее количество сообщений и может быть свёрнута, когда не нужна.
Нужно видеть вывод консоли, сохраняя полный обзор страницы? Логгер консоли позволяет следить за логами, не занимая место экрана панелью DevTools. Идеально для небольших экранов или во время презентаций.
Если ваш JavaScript записывает ответы API, логгер консоли отображает их в реальном времени. Смотрите данные запросов и ответов, не переключаясь между страницей и DevTools.
Некоторые ошибки JavaScript происходят незаметно — никаких видимых изменений в интерфейсе, но ошибка есть в консоли. Логгер консоли делает их видимыми прямо на странице, так что вы замечаете их при обычном просмотре.
Во время живого демо держите панель логгера консоли в углу. Если что-то пойдёт не так, вы сразу увидите сообщение об ошибке, не прерывая демо, чтобы открыть DevTools.
Сторонние скрипты (аналитика, виджеты чата, рекламные сети) нередко генерируют ошибки и предупреждения. Логгер консоли перехватывает их, позволяя следить за состоянием внешних зависимостей.
Откройте всплывающую панель DevSuite Pro и нажмите на значок «Логгер консоли». Появится всплывающая панель, которая немедленно начнёт перехватывать вывод консоли.
Пользуйтесь страницей в обычном режиме — нажимайте кнопки, переходите по ссылкам, отправляйте формы. Сообщения консоли появляются в панели по мере их записи JavaScript страницы.
Используйте кнопки фильтров, чтобы показывать только ошибки, предупреждения или логи. Счётчики показывают количество сообщений каждого типа.
Для сообщений об ошибках раскройте трассировку стека, чтобы увидеть файл и номер строки, где возникла ошибка. Используйте это для определения источника бага.
Нажмите «Очистить», чтобы сбросить панель, или деактивируйте инструмент, чтобы закрыть её. На странице не остаётся никаких следов.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
