Home-theater-designers
La console del browser Web è uno degli strumenti più utilizzati per il debug delle applicazioni front-end. L'API della console offre agli sviluppatori la possibilità di affrontare gli errori e registrare i messaggi.
console.log() è probabilmente il metodo più comunemente utilizzato nell'API della console, ma esistono anche altri metodi che puoi utilizzare nel tuo flusso di lavoro. Questa guida mostra i diversi metodi della console del browser Web che è possibile utilizzare per migliorare il flusso di lavoro di debug.
Perché la registrazione è importante?
L'accesso alla console del browser Web è uno dei metodi migliori per eseguire il debug di applicazioni front-end o basate su JavaScript.
Correlati: 6 framework JavaScript che vale la pena imparare
La maggior parte dei browser Web moderni supporta l'API Console, rendendola prontamente disponibile per gli sviluppatori. L'oggetto console è responsabile di fornire l'accesso alla console di debug del browser. L'implementazione può essere diversa nei browser, ma la maggior parte dei metodi funzionerà in tutti i browser moderni.
Consiglio : La console del tuo browser può eseguire tutto il codice discusso in questa guida. premere F12 sulla tastiera per aprire gli strumenti degli sviluppatori del browser in Chrome o Firefox.
Messaggi di stringa di registrazione
Uno dei metodi di console più comuni è console.log() . Emette semplicemente un messaggio di stringa o un valore alla console web. Per valori semplici o messaggi di stringa, il console.log() Il metodo è probabilmente l'opzione migliore da usare.
come cancellare gli appunti su Android
Per emettere a Ciao mondo messaggio, è possibile utilizzare quanto segue.
console.log(`Hello World`); Un'altra caratteristica speciale del console.log() Il metodo è la capacità di stampare l'output degli elementi DOM o la struttura di una parte di un sito Web, ad esempio, per produrre la struttura dell'elemento body e tutto ciò che è al suo interno utilizzare quanto segue.
console.log(document.body) L'output è una raccolta di elementi DOM come albero HTML.
Registrazione di oggetti JavaScript interattivi
Il console.dir() viene utilizzato per registrare le proprietà interattive degli oggetti JavaScript. Ad esempio, puoi usarlo per visualizzare gli elementi DOM in una pagina web.
L'output tipico del console.dir() Il metodo è composto da tutte le proprietà dell'oggetto JavaScript specificato in formato JSON. Utilizzare il metodo seguente per stampare le proprietà di tutti gli elementi nel corpo di una pagina HTML:
console.dir(document.body) Valutare le espressioni
Potresti avere familiarità con i metodi di asserzione dei test di unità, beh il console.assert() metodo funziona in modo simile. Utilizzare il console.assert() metodo per valutare un'espressione o una condizione.
Quando il metodo assert fallisce, la console stampa un messaggio di errore; in caso contrario, non stampa nulla. Utilizza il codice seguente per valutare se l'età di una persona è maggiore di 18 anni:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); L'asserzione precedente ha esito negativo e di conseguenza viene stampato un messaggio di errore.
Registrazione dei dati nelle tabelle
Utilizzare il console.table() metodo per visualizzare i dati in formato tabellare. I buoni candidati da visualizzare sotto forma di tabella includono array o dati oggetto.
Nota : Alcuni browser, come Firefox, hanno un limite massimo di 1.000 righe che possono essere visualizzate con il console.table() metodo.
Supponendo che tu abbia il seguente array di oggetti auto:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Puoi visualizzare l'array sopra in una tabella usando il metodo seguente:
console.table(cars); Registrazione dei messaggi per categoria
I messaggi della console del browser Web sono principalmente classificati in tre gruppi: errore, avviso e informazioni.
Errori
Per stampare in modo specifico i messaggi di errore sulla console utilizzando il console.errore() metodo, i messaggi relativi agli errori vengono visualizzati in caratteri rossi.
console.error('error message'); Avvertenze
Per stampare gli avvisi, utilizzare quanto segue. Come nella maggior parte degli scenari, i messaggi di avviso vengono visualizzati in arancione:
console.warn('warning message');Informazioni
Per stampare informazioni generali sulla console, utilizzare il pulsante console.info () metodo:
console.info('general info message') È facile filtrare o trovare i messaggi nella console del browser quando sono classificati correttamente.
Tracciamento del flusso del programma
Utilizzare il console.trace() metodo per stampare una traccia dello stack del flusso o dell'esecuzione del programma. Questa è una funzionalità molto utile per il debug perché stampa l'ordine in cui le funzioni vengono eseguite nel programma.
Per vedere il console.trace() metodo in azione, è possibile creare tre funzioni (come di seguito) e posizionare una traccia dello stack in una delle funzioni.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Nella console del tuo browser, chiama o attiva funzioneUno() e otterrai una traccia dello stack delle chiamate di funzione stampate in Last In First Out Order (LIFO) perché è uno stack.
Esecuzione del programma di cronometraggio
Per calcolare il tempo necessario per l'esecuzione di un'operazione nel programma, è possibile utilizzare il console.time() metodo. console.time() è tipicamente usato insieme a console.timeEnd() metodo in cui quest'ultimo viene utilizzato per terminare il timer.
Puoi avere fino a 10.000 timer in esecuzione per pagina web, evidenziando l'importanza di etichettare correttamente i tuoi timer.
Per calcolare quanto tempo impiega un ciclo for per passare attraverso i numeri da 1 a 50.000, puoi usare il timer come segue.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Conteggio
Il console.count() Il metodo viene utilizzato per tenere traccia del numero di volte in cui una funzione o una parte di codice è stata chiamata in un programma. Ad esempio, possiamo tenere traccia del numero di volte in cui un ciclo for è stato eseguito come segue:
for(i=0; i<4; i++ ){
console.count();
}Raggruppamento dei messaggi di registro
Proprio come il metodo del timer, il console.group() , e console.groupEnd() i metodi sono solitamente usati in coppia.
Il metodo di gruppo ti aiuta a organizzare meglio i tuoi messaggi di registro. Ad esempio, possiamo creare un gruppo di messaggi di avviso con l'etichetta avvisi come segue.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()I due messaggi all'interno del gruppo di avviso sono classificati visivamente come mostrato nell'output di seguito.
Cancellazione della console
Ultimo ma non meno importante, ecco diversi modi in cui puoi cancellare i messaggi di registro nella console del tuo browser.
Utilizzare il console.clear() metodo come segue.
console.clear() Puoi anche cancellare la console del browser utilizzando le scorciatoie da tastiera del browser.
Google Chrome : Ctrl + L
Firefox : Ctrl + Maiusc + L
Utilizzo della console del browser al massimo
Questa guida ti ha mostrato alcuni dei diversi metodi disponibili per la console del browser Web per aiutarti a eseguire il debug delle applicazioni front-end. L'API della console è molto leggera, facile da imparare e ampiamente supportata nella maggior parte dei browser moderni.
messaggio aperto dall'account Facebook violato
Crea un modulo di convalida CAPTCHA per il tuo prossimo progetto e metti alla prova le tue nuove capacità di debug!
Condividere Condividere Tweet E-mail Crea un modulo di convalida CAPTCHA utilizzando HTML, CSS e JavaScriptProteggi i tuoi siti web con la convalida CAPTCHA.
Leggi Avanti Argomenti correlati- Programmazione
- Sviluppo web
- JavaScript
Mwiza sviluppa software di professione e scrive ampiamente su Linux e programmazione front-end. Alcuni dei suoi interessi includono storia, economia, politica e architettura d'impresa.
Altro da Mwiza KumwendaIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti