Чтобы получить доступ к сайту на стороне ПК, мы можем нажать F12, чтобы открыть инструмент отладки через браузер и просмотреть логи вывода, сетевые запросы, элементы веб-страницы, файлы cookie и другую информацию.
Однако, когда мы разрабатываем мобильные или мини-программы и приложения, возникает аномальная проблема, и мы не можем напрямую просматривать ненормальную информацию. В этой статье рекомендуются две фронтенд-панели отладки для разработчиков.
Сначала загрузите исходный код:
vConsole
Лёгкая, масштабируемая фронтенд-панель отладки для мобильных веб-страниц.
- Проверьте журналы консолей
- Просмотр сетевых запросов
- Посмотрите структуру элементов страницы
- Посмотрите Cookies, localStorage и SessionStorage
- Ручное выполнение командной строки JS
- Пользовательские плагины
Адрес:Вход по гиперссылке виден.
Эруда
Eruda — это панель отладки, предназначенная для фронтенда мобильных веб-страниц, похожая на мини-версию DevTools, с ключевыми функциями, такими как: запись консольных логов, проверка статуса элементов, захват запросов XHR, отображение локального хранилища и информации о файлах cookie и многое другое.
Перетаскивание кнопок, настройка размера прозрачности панели.
- Консольная панель: фиксирует консольные логи, поддерживающий лог, ошибку, информацию, предупреждение, dir, время/времяEnd, очистку, подсчёт, утверждение, таблицу; Поддержка заполнятелей, включая %c пользовательский стиль вывода; Поддержка фильтрации по типу логарифма и регулярному выражению; Поддерживается выполнение скриптов JavaScript.
- Панель элементов: Просмотр содержимого и свойств тегов; Посмотрите, как ваше приложение выглядит в DOM; Поддержка выделения элементов страницы; Поддержка прямого выбора клика на экране; Посмотрите типы событий, привязанных к DOM.
- Сетевая панель: Захват запросов и просмотр информации, такой как отправленные данные, возвратные заголовки и возвращённый контент.
- Панель ресурсов: просмотр и очистка localStorage, sessionStorage и cookies. Просмотр скриптов загрузки страниц и файлов стилей; Просмотр изображений загрузки страницы.
- Панель источников: Просмотр исходного кода страницы; Форматировать код HTML, CSS, JS и данные JSON.
- Информационная панель: выходной URL и User Agent; Поддерживайте пользовательский выходной контент.
- Панель фрагментов: добавлять границы элементам страницы; Добавьте временную метку для обновления страницы; Поддерживаются кастомные фрагменты кода.
Адрес:Вход по гиперссылке виден. |
Опубликовано 29.06.2020 15:36:20
|
|
|
|
Хозяин