Щоб отримати доступ до сайту на стороні ПК, ми можемо натиснути F12, щоб відкрити інструмент налагодження через браузер і переглянути журнали виводу, мережеві запити, елементи веб-сторінки, файли cookie та іншу інформацію.
Однак, коли ми розробляємо мобільні або міні-програми та додатки, виникає аномальна проблема, і ми не можемо безпосередньо переглядати цю ненормальну інформацію. У цій статті рекомендують дві фронтенд-панелі налагодження для розробників.
Спочатку завантажте вихідний код:
vConsole
Легка, масштабована фронтенд-панель налагодження для мобільних веб-сторінок.
- Перевірте журнали консолі
- Перегляд мережевих запитів
- Подивіться на структуру елементів сторінки
- Перегляньте Cookies, localStorage та SessionStorage
- Ручне виконання командного рядка JS
- Власні плагіни
Адреса:Вхід за гіперпосиланням видно.
Еруда
Eruda — це панель налагодження, розроблена для фронтенду мобільних веб-сторінок, подібна до міні-версії DevTools, з ключовими функціями, такими як: запис журналів консолі, перевірка статусу елементів, захоплення запитів XHR, відображення локальної інформації про зберігання та файлів cookie тощо.
Перетягування кнопок, налаштування розміру прозорості панелі.
- Консольна панель: захоплює консольні журнали, підтримуючий журнал, помилку, інформацію, попередження, зміню, час/часКінець, очищення, підлік, підтвердження, таблицю; Підтримка заповнювачів, зокрема %c custom style output; Підтримка фільтрації за типом логарифма та регулярним виразом; Підтримується виконання JavaScript-скриптів.
- Панель Elements: Перегляд вмісту та властивостей тегів; Подивіться, як ваш додаток виглядає на DOM; Підтримка виділення елементів сторінки; Підтримка прямого вибору кліків на екрані; Перегляньте типи подій, пов'язаних у DOM.
- Мережева панель: Захоплення запитів і перегляд інформації, такої як надіслані дані, повернені заголовки та повернений контент.
- Панель ресурсів: Перегляд і очищення localStorage, sessionStorage та cookie. Перегляд скриптів завантаження сторінок і файлів стилів; Перегляд зображень завантаження сторінки.
- Панель джерел: Переглянути вихідний код сторінки; Форматуйте код HTML, CSS, JS та JSON-дані.
- Інформаційна панель: вихідна URL та User Agent; Підтримуйте власний вихідний контент.
- Панель фрагментів: додайте рамки до елементів сторінки; Додайте часову мітку для оновлення сторінки; Підтримуються кастомні фрагменти коду.
Адреса:Вхід за гіперпосиланням видно. |
Опубліковано 29.06.2020 15:36:20
|
|
|
|
Орендодавець|
Опубліковано 08.02.2025 13:44:17
|
