El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Depuració de JavaScript

Següent ►
►

La depuració és una part essencial del desenvolupament de programari. Ens ajuda a identificar i corregir errors en el nostre codi. En aquest tema, explorarem diverses tècniques i eines per depurar codi JavaScript de manera efectiva.

Continguts

  1. Introducció a la Depuració
  2. Ús de console.log
  3. Depurador del Navegador
  4. Punts de Ruptura (Breakpoints)
  5. Depuració de Codi Asíncron
  6. Consells i Trucs
  7. Exercicis Pràctics

Introducció a la Depuració

La depuració és el procés de trobar i resoldre errors o problemes en el codi. Els errors poden ser de diversos tipus, com ara errors de sintaxi, errors lògics o problemes de rendiment. La depuració ens permet entendre millor el comportament del nostre codi i assegurar-nos que funciona com esperem.

Ús de console.log

Una de les tècniques més senzilles i comunes per depurar codi JavaScript és utilitzar console.log. Aquesta funció ens permet imprimir missatges a la consola del navegador, la qual cosa ens ajuda a veure el valor de les variables i el flux del programa.

Exemple:

function suma(a, b) {
    console.log('Valor de a:', a);
    console.log('Valor de b:', b);
    return a + b;
}

const resultat = suma(5, 3);
console.log('Resultat:', resultat);

Explicació:

En aquest exemple, utilitzem console.log per imprimir els valors de les variables a i b abans de retornar la seva suma. Això ens ajuda a verificar que els valors són correctes.

Depurador del Navegador

Els navegadors moderns com Chrome, Firefox i Edge tenen eines de desenvolupador integrades que inclouen un depurador. Aquestes eines ens permeten inspeccionar el codi, establir punts de ruptura (breakpoints) i veure l'estat de les variables en temps real.

Accés a les Eines de Desenvolupador:

  1. Chrome: F12 o Ctrl+Shift+I (Cmd+Opt+I en Mac)
  2. Firefox: F12 o Ctrl+Shift+I (Cmd+Opt+I en Mac)
  3. Edge: F12 o Ctrl+Shift+I (Cmd+Opt+I en Mac)

Exemple:

function resta(a, b) {
    debugger; // Pausa l'execució aquí
    return a - b;
}

const resultat = resta(10, 4);
console.log('Resultat:', resultat);

Explicació:

La paraula clau debugger pausa l'execució del codi en aquest punt i obre el depurador del navegador. Això ens permet inspeccionar l'estat del programa en aquest moment.

Punts de Ruptura (Breakpoints)

Els punts de ruptura ens permeten pausar l'execució del codi en una línia específica. Això és útil per inspeccionar l'estat del programa i veure com canvien les variables al llarg del temps.

Establir un Punt de Ruptura:

  1. Obre les eines de desenvolupador del navegador.
  2. Navega a la pestanya "Sources" (Fonts).
  3. Troba el fitxer JavaScript que vols depurar.
  4. Fes clic a la línia on vols establir el punt de ruptura.

Exemple:

function multiplicacio(a, b) {
    return a * b;
}

const resultat = multiplicacio(6, 7);
console.log('Resultat:', resultat);

Explicació:

Podem establir un punt de ruptura a la línia return a * b; per pausar l'execució i inspeccionar els valors de a i b.

Depuració de Codi Asíncron

La depuració de codi asíncron pot ser més complexa, ja que les operacions no es completen immediatament. Les eines de desenvolupador dels navegadors també suporten la depuració de codi asíncron, com ara callbacks, promeses i async/await.

Exemple amb async/await:

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log('Dades:', data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();

Explicació:

Podem establir punts de ruptura dins de les funcions asíncrones per pausar l'execució i inspeccionar l'estat del programa.

Consells i Trucs

  1. Utilitza console.error per a Errors: Utilitza console.error per imprimir missatges d'error a la consola. Això ajuda a distingir els errors dels missatges informatius.
  2. Utilitza console.table per a Dades Tabulars: console.table és útil per imprimir arrays o objectes en format tabular.
  3. Utilitza console.group per Agrupar Missatges: console.group i console.groupEnd permeten agrupar missatges a la consola, facilitant la lectura.

Exemple:

console.group('Detalls de l'Usuari');
console.log('Nom:', 'Joan');
console.log('Edat:', 30);
console.groupEnd();

Exercicis Pràctics

Exercici 1: Depuració amb console.log

  1. Escriu una funció que calculi la suma de tots els elements d'un array.
  2. Utilitza console.log per imprimir els valors intermedis i verificar que la funció funciona correctament.

Solució:

function sumaArray(arr) {
    let suma = 0;
    for (let i = 0; i < arr.length; i++) {
        console.log('Element:', arr[i]);
        suma += arr[i];
    }
    return suma;
}

const resultat = sumaArray([1, 2, 3, 4, 5]);
console.log('Suma Total:', resultat);

Exercici 2: Depuració amb Punts de Ruptura

  1. Escriu una funció que multipliqui dos nombres.
  2. Estableix un punt de ruptura a la línia de retorn i inspecciona els valors de les variables.

Solució:

function multiplicacio(a, b) {
    return a * b;
}

const resultat = multiplicacio(6, 7);
console.log('Resultat:', resultat);

Estableix un punt de ruptura a la línia return a * b; i inspecciona els valors de a i b.

Conclusió

La depuració és una habilitat essencial per a qualsevol desenvolupador. Utilitzant tècniques com console.log, el depurador del navegador i els punts de ruptura, podem identificar i corregir errors de manera més eficient. Practica aquestes tècniques amb els exercicis proporcionats per millorar les teves habilitats de depuració.

◄ Anterior
◄
Següent ►
►

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats