La depuració és una part essencial del desenvolupament de programari, ja que permet identificar i corregir errors en el codi. En aquest tema, aprendrem com utilitzar les eines de depuració amb Webpack per facilitar aquest procés.

1. Mapes de Fonts (Source Maps): Permeten mapar el codi transformat (per exemple, minificat o transpilat) al codi original, facilitant la depuració.
2. Configuració de Webpack per a la Depuració: Ajustos específics en el fitxer de configuració de Webpack per habilitar la depuració.
3. Eines de Navegador: Utilització de les eines de desenvolupador del navegador per depurar aplicacions Webpack.

Els mapes de fonts són fitxers que permeten mapar el codi transformat al codi original. Això és especialment útil quan es treballa amb codi transpilat (per exemple, TypeScript o Babel) o minificat.

Per habilitar els mapes de fonts en Webpack, cal afegir la propietat devtool al fitxer de configuració de Webpack (webpack.config.js).

Hi ha diversos tipus de mapes de fonts que es poden utilitzar, cadascun amb els seus avantatges i inconvenients:

A més de configurar els mapes de fonts, hi ha altres ajustos que poden ajudar en la depuració.

Les eines de desenvolupador del navegador són essencials per a la depuració. A continuació, es mostren alguns consells per utilitzar-les amb Webpack.

1. Obrir DevTools: Premeu F12 o Ctrl+Shift+I (Windows/Linux) o Cmd+Opt+I (Mac).
2. Pestanya "Sources": Aquí podeu veure el codi font original gràcies als mapes de fonts.
3. Punts de Trencament (Breakpoints): Podeu establir punts de trencament per aturar l'execució del codi en línies específiques.
4. Consola: Utilitzeu la consola per executar codi JavaScript i veure missatges de registre (console.log).

1. Obrir Developer Tools: Premeu F12 o Ctrl+Shift+I (Windows/Linux) o Cmd+Opt+I (Mac).
2. Pestanya "Debugger": Similar a la pestanya "Sources" de Chrome, permet veure el codi font original.
3. Punts de Trencament: Establiu punts de trencament per aturar l'execució del codi.
4. Consola: Executeu codi JavaScript i vegeu missatges de registre.

Configurar un projecte Webpack per habilitar la depuració amb mapes de fonts i utilitzar les eines de desenvolupador del navegador per depurar un error.

1. Configura Webpack:

   • Crea un fitxer webpack.config.js amb la configuració següent:

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
     devtool: 'source-map',
     mode: 'development',
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
           },
         },
       ],
     },
   };
   

2. Crea un fitxer index.js a la carpeta src amb el codi següent:

   function add(a, b) {
     return a + b;
   }
   
   console.log(add(2, 3)); // Correcte
   console.log(add(2, '3')); // Error: resultat inesperat
   

3. Compila el projecte:

   • Executa npx webpack per generar el fitxer bundle.js amb el mapa de fonts.

4. Obre el fitxer index.html al navegador i obre les eines de desenvolupador.

5. Depura l'error:

   • A la pestanya "Sources" (Chrome) o "Debugger" (Firefox), localitza el fitxer index.js.
   • Estableix un punt de trencament a la línia console.log(add(2, '3'));.
   • Recarrega la pàgina i observa com s'atura l'execució en el punt de trencament.
   • Inspecciona les variables a i b per entendre per què es produeix l'error.

L'error es produeix perquè la funció add no valida els tipus dels seus arguments. Una possible solució és assegurar-se que els arguments siguin nombres:

En aquesta secció, hem après com configurar Webpack per habilitar la depuració mitjançant mapes de fonts i com utilitzar les eines de desenvolupador del navegador per depurar el codi. La depuració és una habilitat essencial per a qualsevol desenvolupador, i amb les eines adequades, es pot fer de manera més eficient i efectiva.