Per accedere al sito web dal lato PC, possiamo premere F12 per aprire lo strumento di debug tramite il browser e visualizzare i log di output, le richieste di rete, gli elementi della pagina web, i cookie e altre informazioni.
Tuttavia, quando sviluppiamo programmi e app mobili o mini, c'è un problema anomalo e non possiamo visualizzare direttamente le informazioni anomale. Questo articolo raccomanda due pannelli di debug per sviluppatori front-end.
Prima carica il codice sorgente:
vConsole
Un pannello di debug per sviluppatori front-end, leggero, scalabile e leggero per pagine web mobili.
- Controlla i log della console
- Visualizza le richieste di rete
- Guarda la struttura degli elementi della pagina
- Dai un'occhiata a Cookies, localStorage e SessionStorage
- Esegui manualmente la riga di comando JS
- Plugin personalizzati
Indirizzo:Il login del link ipertestuale è visibile.
eruda
Eruda è un pannello di debug progettato per il front-end delle pagine web mobili, simile a una versione mini di DevTools, con funzioni chiave come: cattura dei log della console, controllo dello stato degli elementi, cattura delle richieste XHR, visualizzazione delle informazioni locali di archiviazione e cookie, e altro ancora.
Trascina e rilascio dei pulsanti, impostazione della dimensione della trasparenza del pannello.
- Pannello console: cattura i log della console, supporta log, errore, info, avviso, dir, tempo/tempoFine, cancella, count, assert, tabella; Supporto per segnaposto, incluso output in stile personalizzato %c; Supporta il filtraggio per tipo di log ed espressione regolare; È supportata l'esecuzione di script JavaScript.
- Pannello Elements: Visualizza il contenuto e le proprietà dei tag; Guarda come si stilizza la tua app nel DOM; Supporto per evidenziare gli elementi della pagina; Supporta la selezione diretta del clic sullo schermo; Visualizza i tipi di eventi legati nel DOM.
- Pannello di rete: Cattura le richieste e visualizza informazioni come dati inviati, intestazioni di ritorno e contenuti restituiti.
- Pannello risorse: Visualizza e cancella localStorage, sessionStorage e cookie. Visualizza script di caricamento della pagina e file di stile; Visualizza le immagini di caricamento della pagina.
- Pannello Fonti: Visualizza il codice sorgente della pagina; Formattare dati HTML, CSS, JS e JSON.
- Pannello informazioni: URL di uscita e User Agent; Supporta contenuti di output personalizzati.
- Panel Snippet: aggiungere bordi agli elementi della pagina; Aggiungi un timestamp per aggiornare la pagina; Sono supportati snippet di codice personalizzati.
Indirizzo:Il login del link ipertestuale è visibile. |
Pubblicato su 29/06/2020 15:36:20
|
|
|
|
Padrone di casa|
Pubblicato su 08/02/2025 13:44:17
|
