A weboldal PC-s oldalán való eléréséhez megnyomhatjuk az F12 gombot, hogy megnyitsuk a hibakereső eszközt, ahol megtekinthetjük a kimeneti naplókat, hálózati kéréseket, weboldal elemeit, sütiket és egyéb információkat.
Azonban amikor mobil- vagy mini programokat és alkalmazásokat fejlesztünk, akkor abnormális probléma adódik fel, és nem tudjuk közvetlenül megtekinteni az abnormális információkat. Ez a cikk két front-end fejlesztői hibakereső panelt ajánl.
Először töltse fel a forráskódot:
vConsole
Egy könnyű, skálázható, front-end fejlesztői hibakereső panel mobil weboldalakhoz.
- Nézd meg a konzol naplókat
- Hálózati kérések megtekintése
- Nézd meg az oldalelem szerkezetét
- Nézd meg a Cookies, localStorage és SessionStorage oldalakat
- A JS parancssorának kézi végrehajtása
- Egyedi pluginok
Cím:A hiperlink bejelentkezés látható.
eruda
Az Eruda egy hibakereső panel, amelyet mobil weboldalak elejére terveztek, hasonlóan a DevTools mini verziójához, kulcsfontosságú funkciókkal bellen, mint a konzolnaplók rögzítése, elemállapot ellenőrzése, XHR kérések rögzítése, helyi tároló- és sütiinformációk megjelenítése és még sok más.
Gomb húzása és ejtése, panel átlátszóságméret beállítása.
- Konzol panel: konzolnaplókat rögzít, támogató naplót, hibát, infot, warn, dir, time/timeEnd, clear, count, assert, table; Támogatás a helykitöltőkhöz, beleértve a %c egyedi stílusú kimenetet; Támogatás a log-típus és a reguláris kifejezés szerinti szűrés; A JavaScript szkript végrehajtása támogatott.
- Elemek panel: Tekintse meg a címkék tartalmát és tulajdonságait; Nézd meg, hogyan alakul ki az alkalmazásod a DOM-on; Támogatás az oldalelemek kiemelésére; Támogassa a képernyőn történő közvetlen kattintás választását; Tekintse meg a DOM-on kötött események típusait.
- Hálózati panel: Kérelmeket rögzíteni és olyan információkat, mint az elküldött adatok, visszaküldési fejlécek és visszaküldött tartalom.
- Források panel: Tekintse meg és törölje a localStorage, sessionStorage és sütiket. Oldalbetöltő szkriptek és stílusfájlok megtekintése; Oldal betöltési képek megtekintése.
- Források panel: Tekintse meg az oldal forráskódját; Formázd a HTML, CSS, JS kódot és a JSON adatokat.
- Információs panel: kimeneti URL és felhasználói ügynök; Támogatni az egyedi kimeneti tartalmat.
- Snippets panel: szegélyek hozzáadása az oldalelemekhez; Adj hozzá időbélyeget, hogy frissítse az oldalt; Támogatott egyedi kódrészletek.
Cím:A hiperlink bejelentkezés látható. |
Közzétéve 2020. 06. 29. 15:36:20
|
|
|
|
Háziúr