Home-theater-designers
La consola del navegador web és una de les eines més utilitzades per depurar aplicacions front-end. L’API de la consola proporciona als desenvolupadors la possibilitat d’afrontar errors i registrar missatges.
console.log () és probablement el mètode més utilitzat a l'API de la consola, però també hi ha altres mètodes que podeu utilitzar al vostre flux de treball. Aquesta guia us mostra els diferents mètodes de consola del navegador web que podeu utilitzar per millorar el flux de treball de depuració.
Per què és important el registre?
Iniciar sessió a la consola del navegador web és un dels millors mètodes de depuració d’aplicacions front-end o basades en JavaScript.
Relacionat: 6 marcs JavaScript que val la pena aprendre
La majoria dels navegadors web moderns admeten l'API de la consola, de manera que està fàcilment disponible per als desenvolupadors. L'objecte de la consola és responsable de proporcionar accés a la consola de depuració del navegador. La implementació pot ser diferent entre els navegadors, però la majoria dels mètodes funcionaran en tots els navegadors moderns.
Consell : La consola del navegador pot executar tot el codi que es descriu en aquesta guia. Premeu F12 al teclat per obrir les eines dels desenvolupadors del navegador a Chrome o Firefox.
Registre de missatges de cadena
Un dels mètodes de consola més comuns és console.log () . Simplement emet un missatge de cadena o algun valor a la consola web. Per a valors simples o missatges de cadena, el fitxer console.log () el mètode és probablement la millor opció a utilitzar.
com trobar cadells en venda
Per a la sortida a Hola món missatge, podeu utilitzar el següent.
console.log(`Hello World`); Una altra característica especial del console.log () El mètode és la possibilitat d'imprimir la sortida d'elements DOM o l'estructura d'una part d'un lloc web, per exemple, per generar l'estructura de l'element cos i tot el que hi ha al seu interior utilitza el següent.
console.log(document.body) La sortida és una col·lecció d’elements DOM com a arbre HTML.
Registre d'objectes interactius de JavaScript
El console.dir () s'utilitza per registrar propietats interactives d'objectes JavaScript. Per exemple, podeu utilitzar-lo per veure els elements DOM d'una pàgina web.
La sortida típica del fitxer console.dir () El mètode comprèn totes les propietats de l'objecte JavaScript especificat en format JSON. Utilitzeu el mètode següent per imprimir les propietats de tots els elements del cos d'una pàgina HTML:
console.dir(document.body) Avaluar expressions
És possible que estigueu familiaritzat amb els mètodes d’afirmació de les proves d’unitats, bé console.assert () el mètode funciona de manera similar. Utilitzar el console.assert () mètode per avaluar una expressió o condició.
Quan el mètode assert falla, la consola imprimeix un missatge d'error; en cas contrari, no imprimeix res. Utilitzeu el codi següent per avaluar si l'edat d'una persona és superior als 18 anys:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); L'afirmació anterior falla i s'imprimeix un missatge d'error en conseqüència.
Registre de dades a les taules
Utilitzar el console.table () mètode per mostrar dades en format tabular. Els bons candidats per mostrar en forma de taula inclouen matrius o dades d'objectes.
Nota : Alguns navegadors, com el Firefox, tenen un límit màxim de 1.000 files que es poden mostrar amb el fitxer console.table () mètode.
Suposant que teniu la següent matriu d'objectes de cotxe:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Podeu mostrar la matriu anterior en una taula mitjançant el mètode següent:
console.table(cars); Registre de missatges per categoria
Els missatges de la consola del navegador web es classifiquen principalment en tres grups: error, advertència i informació.
Errors
Per imprimir específicament missatges d'error a la consola mitjançant el fitxer console.error () mètode, els missatges relacionats amb els errors es mostren amb lletra vermella.
console.error('error message'); Advertiments
Per imprimir avisos, utilitzeu el següent. Com passa amb la majoria d’escenaris, els missatges d’advertència es mostren en taronja:
console.warn('warning message');Informació
Per imprimir informació general a la consola, utilitzeu el fitxer console.info () mètode:
console.info('general info message') És fàcil filtrar o trobar missatges a la consola del navegador quan es classifiquin correctament.
Seguiment del flux del programa
Utilitzar el console.trace () mètode per imprimir un traç de pila del flux o execució del programa. Aquesta és una característica molt útil per a la depuració perquè imprimeix l'ordre en què s'executen les funcions al vostre programa.
Per veure el console.trace () mètode en acció, podeu crear tres funcions (tal com es mostra a continuació) i col·locar una traça de pila en una de les funcions.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}A la consola del navegador, truqueu o activeu functionOne () i obtindreu un rastre de pila de les trucades de funcions impreses a l’últim ordre de sortida (LIFO) perquè és una pila.
Execució del programa de temps
Per calcular el temps que triga a executar-se una operació al vostre programa, podeu utilitzar el fitxer console.time () mètode. console.time () s'utilitza normalment juntament amb el fitxer console.timeEnd () mètode on s’utilitza aquest darrer per acabar el temporitzador.
Podeu tenir fins a 10.000 temporitzadors funcionant per pàgina web, destacant la importància d’etiquetar correctament els temporitzadors.
Per calcular el temps que triga un bucle for a passar pels números de l'1 al 50.000, podeu utilitzar el temporitzador de la següent manera.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Comptant
El console.count () El mètode s'utilitza per fer un seguiment del nombre de vegades que s'ha cridat una funció o algun fragment de codi en un programa. Per exemple, podem fer un seguiment del nombre de vegades que s'ha executat un bucle de la manera següent:
for(i=0; i<4; i++ ){
console.count();
}Agrupació de missatges de registre
Igual que el mètode del temporitzador, el fitxer console.group () , i console.groupEnd () els mètodes se solen utilitzar per parelles.
El mètode de grup us ajuda a organitzar millor els vostres missatges de registre. Per exemple, podem crear un grup de missatges d'advertència amb l'etiqueta advertiments de la següent manera.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Els dos missatges del grup d’avís es classifiquen visualment tal com es veu a la sortida següent.
Esborra la consola
Per últim, però no menys important, aquí teniu diverses maneres d’esborrar els missatges de registre a la consola del navegador.
Utilitzar el console.clear () mètode de la següent manera.
console.clear() També podeu esborrar la consola del navegador mitjançant dreceres de teclat del navegador.
Google Chrome : Ctrl + L
Firefox : Ctrl + Maj + L
Utilitzar al màxim la consola del navegador
Aquesta guia us mostra alguns dels diferents mètodes disponibles de la consola del navegador web per ajudar-vos a depurar aplicacions front-end. L'API de la consola és molt lleugera, fàcil d'aprendre i és àmpliament compatible amb la majoria dels navegadors moderns.
com es juga a jocs de Windows XP a Windows 10
Feu un formulari de validació CAPTCHA per al vostre proper projecte i poseu a prova les vostres noves habilitats de depuració.
Compartir Compartir Tweet Correu electrònic Creeu un formulari de validació CAPTCHA mitjançant HTML, CSS i JavaScriptProtegiu els vostres llocs web amb la validació CAPTCHA.
Llegiu a continuació Temes relacionats- Programació
- Desenvolupament web
- JavaScript
Mwiza desenvolupa programari de professió i escriu extensament sobre Linux i programació frontal. Alguns dels seus interessos inclouen història, economia, política i arquitectura empresarial.
Més de Mwiza KumwendaSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us