Pentru a accesa site-ul pe partea de PC, putem apăsa F12 pentru a deschide instrumentul de depanare prin browser și a vizualiza jurnalele de ieșire, cererile de rețea, elementele paginii web, cookie-urile și alte informații.
Totuși, atunci când dezvoltăm programe și aplicații mobile sau mini, există o problemă anormală și nu putem vizualiza direct informațiile anormale. Acest articol recomandă două panouri de depanare pentru dezvoltatori front-end.
Mai întâi încarcă codul sursă:
vConsole
Un panou de depanare pentru dezvoltatori front-end, ușor și scalabil pentru pagini web mobile.
- Verifică jurnalele consolei
- Vizualizați cererile rețelei
- Uită-te la structura elementelor paginii
- Verifică Cookies, localStorage și SessionStorage
- Execută manual linia de comandă JS
- Pluginuri personalizate
Adresă:Autentificarea cu hyperlink este vizibilă.
eruda
Eruda este un panou de depanare conceput pentru front-end-ul paginilor web mobile, similar cu o versiune mini a DevTools, cu funcții cheie precum: capturarea logurilor consolei, verificarea stării elementelor, capturarea cererilor XHR, afișarea informațiilor locale despre stocare și cookie-uri și altele.
Tragere și plasare de butoane, setare a dimensiunii transparenței panoului.
- Panou de consolă: capturează jurnalele consolei, suportă log, eroare, informații, avertizare, dir, timp/timpSfârșit, ștergere, numărare, aseverare, tabel; Suport pentru placeholder-uri, inclusiv ieșirea în stil personalizat %c; Suportă filtrarea după tipul logaritmic și expresia regulată; Execuția scripturilor JavaScript este suportată.
- Panoul Elements: Vizualizează conținutul și proprietățile etichetei; Vezi cum se stilizează aplicația ta pe DOM; Suport pentru evidențierea elementelor paginii; Susține selecția directă cu click pe ecran; Vizualizați tipurile de evenimente legate de DOM.
- Panou de rețea: Capturează cererile și vizualizează informații precum datele trimise, antetele de returnare și conținutul returnat.
- Panoul de resurse: Vizualizați și curățați localStorage, sessionStorage și cookie-uri. Vizualizează scripturile de încărcare a paginilor și fișierele de stil; Vizualizează imaginile de încărcare a paginii.
- Panoul Surse: Vizualizați codul sursă al paginii; Formatează date HTML, CSS, JS și JSON.
- Panou de informații: URL de ieșire și User Agent; Suportă conținut personalizat de ieșire.
- Panoul fragmentelor: adaugă margini elementelor paginii; Adaugă o marcă temporală pentru a reîmprospăta pagina; Sunt suportate fragmente de cod personalizate.
Adresă:Autentificarea cu hyperlink este vizibilă. |
Postat pe 29.06.2020 15:36:20
|
|
|
|
Proprietarul|
Postat pe 08.02.2025 13:44:17
|
