За да достъпим уебсайта от страна на компютъра, можем да натиснем F12, за да отворим инструмента за отстраняване на грешки през браузъра, за да видим изходни логове, мрежови заявки, елементи на уеб страница, бисквитки и друга информация.
Въпреки това, когато разработваме мобилни или мини програми и приложения, има ненормален проблем и не можем директно да видим необичайната информация. Тази статия препоръчва два фронтенд панела за дебъг за разработчици.
Първо качете изходния код:
vConsole
Лек, мащабируем фронт-енд панел за дебъгване на мобилни уеб страници.
- Провери логовете на конзолата
- Преглед на заявки в мрежата
- Погледнете структурата на елементите на страницата
- Разгледайте Cookies, localStorage и SessionStorage
- Ръчно изпълнете командния ред на JS
- Персонализирани плъгини
Адрес:Входът към хиперлинк е видим.
Еруда
Eruda е панел за дебъгване, предназначен за фронт-енд на мобилни уеб страници, подобен на мини версия на DevTools, с ключови функции като: записване на конзолни логове, проверка на статуса на елементите, улавяне на XHR заявки, показване на локална памет и информация за бисквитки и други.
Бутон за плъзгане и пускане, настройка за размер на прозрачността на панела.
- Панел на конзолата: записва конзолни логове, поддържащ лог, грешка, информация, предупреждение, dir, време/времеКрай, изчистване, броене, assert, таблица; Поддръжка на заместители, включително %c персонализиран стил изход; Поддържа филтриране по тип логарифм и регулярно изразяване; Поддържа се изпълнение на JavaScript скриптове.
- Панел Elements: Преглед на съдържанието и свойствата на тагове; Виж как се стилизира приложението ти в DOM; Поддръжка за маркиране на елементи на страницата; Поддържайте директен избор на клик на екрана; Вижте типовете събития, свързани в DOM.
- Мрежов панел: Улавяне на заявки и преглед на информация като изпратени данни, връщащи заглавия и върнато съдържание.
- Панел с ресурси: Преглед и изчистване на localStorage, sessionStorage и бисквитки. Преглед на скриптове за зареждане на страници и стилови файлове; Вижте изображения за зареждане на страница.
- Панел с източници: Вижте изходния код на страницата; Форматирайте HTML, CSS, JS код и JSON данни.
- Информационен панел: изходен URL и потребителски агент; Поддържайте персонализирано изходно съдържание.
- Панел със откъси: добавяне на рамки към елементи на страницата; Добавете времеви печат за обновяване на страницата; Поддържат се персонализирани кодови фрагменти.
Адрес:Входът към хиперлинк е видим. |
Публикувано в 29.06.2020 г. 15:36:20 ч.
|
|
|
|
Хазяин