JavaScript: Консоль для мобильных браузеров

Eruda – это легковесная JavaScript-библиотека, которая добавляет на веб-страницу консоль для отладки, особенно полезную на мобильных устройствах. Она позволяет разработчикам отслеживать ошибки, анализировать сетевые запросы и работать с DOM прямо на мобильном браузере.

# После подключения на странице появляется иконка, по нажатию на которую открывается панель отладки.
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>
	eruda.init();
</script>

Eruda получает ошибки и логирует события за счёт стандартных API браузера:

• События ошибок: Она использует обработчик window.onerror для перехвата ошибок, возникших в процессе выполнения JavaScript. Это стандартный механизм, который работает во всех современных браузерах.

• Логи и прочее: Помимо ошибок, Eruda перехватывает вызовы консоли, такие как console.log, console.warn и console.error, для вывода их в своей панели. При этом она не анализирует или интерпретирует JS-код страницы сама по себе, а просто отображает данные, предоставленные браузером.

Eruda не занимается самостоятельным анализом кода — она лишь агрегирует данные, которые браузер уже генерирует, и выводит их в удобном интерфейсе.

Запустить Eruda без доступа к файлам сайта

Один из удобных способов — это создать bookmarklet для Eruda.

1. Создать новую закладку в браузере.

2. В качестве URL закладки вставить следующий код (он загружает Eruda с CDN):

# в body
javascript:(function () {var script = document.createElement('script');script.src = '//cdn.jsdelivr.net/npm/eruda';document.body.appendChild(script);script.onload = function () {eruda.init();};})();

# в head
javascript:(function () {var script = document.createElement('script');script.src = '//cdn.jsdelivr.net/npm/eruda';if (document.head) {document.head.appendChild(script);} else {document.documentElement.insertBefore(script, document.documentElement.firstChild);}script.onload = function () {eruda.init();};})();

3. Сохранить закладку.

Теперь на странице, где нужно включить консоль, просто кликните на эту закладку — Eruda загрузится и откроется панель отладки.