Инструмент разработчика F12 для мобильных устройств eruda

внешний интерфейс JavaScript jQuery Underscore.js
Отлаживать веб-страницы на мобильном телефоне, особенно в системе iOS, действительно проблематично: у вас должен быть компьютер Apple, а также установлена ​​система Apple, что действительно сложно.

К счастью, теперь есть инструменты разработчика F12, имитируемые js.Хотя это не сравнимо с Chrome, этого достаточно для общей отладки.

представлять

Eruda — это панель отладки, предназначенная для мобильного веб-интерфейса, похожая на мини-версию DevTools, ее основные функции включают в себя: сбор журналов консоли, проверку состояния элемента, отображение показателей производительности, сбор запросов XHR, отображение информации о локальном хранилище и файлах cookie, браузер. обнаружение признаков и т. д.

Список функций

手机网页F12开发者工具eruda
  1. Перетаскивание кнопки, настройка размера прозрачности панели.

  2. Панель консоли: запись журналов консоли, журнал поддержки, ошибка, информация, предупреждение, каталог, время/время, конец, очистка, количество, утверждение, таблица, поддержка заполнителей, включая вывод пользовательского стиля %c, поддержка по типу журнала и фильтрации по типу регулярного выражения; поддержка команд быстрого доступа для загрузки подчеркивания, библиотека jQuery, поддержка выполнения сценариев JavaScript.

  3. Панель «Элементы»: просмотр содержимого тегов и атрибутов; просмотр стилей, примененных к Dom; поддержка выделения элементов страницы; поддержка выбора прямого щелчка на экране; просмотр различных событий, связанных с Dom.

  4. Панель сети: на графике показана скорость загрузки страницы, просмотр времени запроса каждого ресурса на странице (Android), захват запроса XHR, просмотр отправленных данных, возвращаемый заголовок, возвращаемый контент и другая информация.

  5. Панель ресурсов: просмотр и очистка localStorage, sessionStorage и файлов cookie, просмотр скриптов загрузки страниц и файлов стилей, просмотр изображений загрузки страниц.

  6. Панель «Источники»: просмотр исходного кода страницы, форматирование кода html, css, js и данных json.

  7. Информационная панель: выходной URL и пользовательский агент; поддержка пользовательского содержимого вывода.

  8. Панель фрагментов кода: элемент страницы для добавления границы, отметка времени обновления страницы, поддержка пользовательских фрагментов кода.

  9. Панель «Функции»: определение общих функций браузеров, предоставление быстрого доступа «Могу ли я использовать», «Html5Test».

пример кода

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>点右下角的图标可以出来工具</h1>
 
    <script>
        console.log('捕获不到这句话');
    </script>
 
    <script src="//cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
 
    <script>
        console.log('你可以看到这句话');
    </script>
</body>
</html>
手机网页F12开发者工具eruda