Na prístup k webovej stránke na PC môžeme stlačiť F12 a otvoriť ladiaci nástroj cez prehliadač a zobraziť výstupné záznamy, sieťové požiadavky, prvky webovej stránky, cookies a ďalšie informácie.
Avšak pri vývoji mobilných alebo mini programov a aplikácií sa vyskytuje abnormálny problém a nemôžeme priamo zobraziť abnormálne informácie. Tento článok odporúča dva frontendové panely na ladenie vývojárov.
Najprv nahraj zdrojový kód:
vConsole
Ľahký, škálovateľný panel na ladenie pre vývojárov pre mobilné webové stránky.
- Skontrolujte konzolové logy
- Zobraziť sieťové požiadavky
- Pozrite sa na štruktúru prvkov stránky
- Pozrite si Cookies, localStorage a SessionStorage
- Manuálne spustenie príkazového riadku JS
- Vlastné pluginy
Adresa:Prihlásenie na hypertextový odkaz je viditeľné.
Eruda
Eruda je ladiaci panel navrhnutý pre front-end mobilných webových stránok, podobný mini verzii DevTools, s kľúčovými funkciami ako: zachytávanie konzolových logov, kontrola stavu prvkov, zachytávanie XHR požiadaviek, zobrazovanie lokálneho úložiska a informácií o cookies a ďalších.
Ťahanie a púšťanie tlačidiel, nastavenie veľkosti priehľadnosti panela.
- Panel konzoly: zaznamenáva konzolové logy, podporuje log, error, info, warn, dir, time/timeEnd, clear, count, assert, table; Podpora zástupcov, vrátane %c vlastného štýlového výstupu; Podpora filtrovania podľa typu logu a regulárneho výrazu; Je podporované vykonávanie JavaScript skriptov.
- Panel Elements: Zobraziť obsah a vlastnosti značiek; Pozrite sa, ako sa vaša aplikácia štýluje na DOM; Podpora zvýrazňovania prvkov stránky; Podporuje priamy výber kliknutím na obrazovke; Zobraziť typy udalostí viazaných na DOM.
- Sieťový panel: Zachytáva požiadavky a zobrazuje informácie ako odoslané dáta, návratové hlavičky a vrátený obsah.
- Panel zdrojov: Zobraziť a vymažať localStorage, sessionStorage a cookies. Zobraziť skripty na načítanie stránok a štýlové súbory; Zobraziť stránku načítať obrázky.
- Panel zdrojov: Zobraziť zdrojový kód stránky; Formátujte HTML, CSS, JS kód a JSON dáta.
- Informačný panel: výstupná URL a User Agent; Podpora vlastného výstupného obsahu.
- Panel s úryvkami: pridajte okraje k stránkovým prvkom; Pridajte časovú značku na obnovenie stránky; Podporované sú vlastné útržky kódu.
Adresa:Prihlásenie na hypertextový odkaz je viditeľné. |
Zverejnené 29. 6. 2020 15:36:20
|
|
|
|
Prenajímateľ