Uso de Source Maps en Webpack para Depuración de Código

Resumen

¿Qué es el modo Depth Tool en el desarrollo de software?

El modo Depth Tool es una valiosa herramienta en el mundo del desarrollo de software. Su principal función es habilitar la creación de un "source-map", un mapa de nuestro código, que nos permite leer y analizar detalladamente lo que estamos compilando. Esta función es especialmente beneficiosa para los desarrolladores, ya que ofrece la posibilidad de inspeccionar y depurar más efectivamente el código, asegurando un producto final más pulido y funcional.

¿Cómo configurar el source-map con Webpack?

Configurar el source-map es un proceso relativamente sencillo que comienza con la identificación de tu archivo de desarrollo. Para esto, es necesario trabajar con Webpack, un potente empaquetador de módulos JavaScript, y seguir estos pasos:

Identificar el archivo de desarrollo:
- Ubica el archivo de configuración de Webpack.
Añadir la opción de source-map:
- Dentro del archivo de configuración, actúa debajo de la opción mode para habilitar Depth Tool.
- Utiliza el siguiente código en JavaScript:
```
devtool: 'source-map'
```
Generar el mapa:
- Al habilitar esta opción en modo desarrollo, haz una compilación usando tu terminal.
- Ejecuta el comando:
```
npm run dev
```
- Esto ejecutará la compilación con la configuración de source-map.

¿Cuál es el resultado de la generación de un source-map?

Una vez estén configuradas estas opciones, al compilar tu proyecto obtendrás los siguientes resultados:

Carpeta "dist": Dentro de esta carpeta encontrarás:
- Archivo main compilado: Aunque puede resultar confuso debido a la transformación del código moderno de JavaScript a ECMAScript 5, sigue siendo el código funcional para el uso general en todos los navegadores.
- Source-map en formato JSON: Este archivo identifica las partes del proyecto y permite la depuración precisa.
Visualización en el navegador: Usando un servidor local como Light Server, puedes abrir y ejecutar tu proyecto en el navegador. Al inspeccionarlo podrás detectar el source-map:
- Te permitirá analizar y depurar con precisión cualquier error potencial en el código al hacer clic directo en las líneas problemáticas.
- Utilizar herramientas como el inspector de Chrome te facilitará la tarea de encontrar errores exactos en una línea específica y comprender cómo resolverlos.

¿Cómo aprovechar esta herramienta para mejorar como programador?

La implementación del modo Depth Tool en tus proyectos es crucial para mejorar no solo el código, sino también tus habilidades de programación:

Ventajas para la depuración: El source-map simplifica enormemente la identificación de errores y permite un análisis claro de cada elemento del código, promoviendo soluciones rápidas.
Estándar de calidad: Mantén la aplicación en el estándar JavaScript mientras puedes analizar cualquier parte de la misma.
Mejor comprensión del código: Con cada error depurado, estarás acrecentando tus conocimientos, volviéndote más competente y eficiente.

En resumen, agregar un source-map a tus recursos de desarrollo usando Webpack no solo simplifica el proceso de depuración, sino que es una herramienta poderosa para cualquier desarrollador que desee mejorar sus habilidades en la programación. ¡Te recomiendo incluir el modo Depth Tool en tus proyectos para detectar y solucionar errores con facilidad!

Juan David Gaviria Agudelo

student•

Buenas, Si tienen problemas con este clase y el siguiente error:

El profesor se salto la parte de msotrar cuando agrega el .BundleAnalyzerPlugin al final de la linea de la siguiente forma:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Enzo Ivan Valdez

student•

Tengo el error pero con el plugin copy-webpack, nose como seguir con el proyecto

Alonso Fabricio Samanez Nuñez

student•

Gracias

Fernando Quinteros Gutierrez

student•

🐛 Webpack DevTools

Ideas/conceptos claves

source map es un mapeo que se realiza entre el código original y el código transformado, tanto para archivos JavaScript como para archivos CSS. De esta forma podremos debuggear tranquilamente nuestro código.

Apuntes

Con las devtools de webpack te permite crear un mapa de tu proyecto y con el podemos
- Leer a detalle
- Analizar particularidades de lo que está compilando nuestro proyecto
Para comenzar debemos ir a webpack.config.js y agregar la propiedad devtool: "source-map"
- Esta opción genera un source map el cual posteriormente chrome lo lee y te permite depurar de una mejor forma

Matías Wasiak

student•

Gracias por el aporte!

John Fernando Monroy Baracaldo

student•

Gracias por tus excelentes apuntes! 😎

Carlos Andreimy

student•

Si tienen un error, por favor en su archivo de configuración webpack.config.dev: En la linea 6, agreguen esto así:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

o de esta otra forma:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Miguel Angel Reyes Moreno

student•

Webpack DevTools

Podremos analizar nuestro proyecto con esta herramienta. Creamos un 'mapa', con esto podemos abrir las herramientas de desarrollo, entrar a los archivos de JS y al hacer click en una línea de código, esta nos llevará a otro archivo donde se esté ejecutando el código.

Favian H. Angarita

student•

Si les sale error al ejecutar npm run dev Y el error es porque noencuentra webpack-bundle-analyzer

Ejecuten este comando para que npm lo instale correctamente:

npm install --save-dev webpack-bundle-analyzer

Y luego si funciona normal

npm run dev

y claro que, debe estar en webpack.config.dev.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

fuente

Adalberto Zanabria Castro

student•

Bro, me salvaste cásate conmigo 🤣

Aitor Santana Cabrera

student•

Este curso me está ayudando el porque funcionan algunas cosas en React, bastante útil

José Armando Gutiérrez Araujo

student•

No me funciona del todo, no da error ni nada y al inspeccionar la pestaña de sources en el navegador me dice source map detected, pero al darle a la linea 139 como el profesor en vez de llevarme a la función solo me marca un breakpoint y mas nada, alguien sabe que sera?

Juan David González Rodríguez

student•

ya revisaste que en el archivo webpack.config.dev.js este habilitado las devtools ?

 devtool: 'source-map'

José Armando Gutiérrez Araujo

student•

Si lo active, y parece que lo detecta pero no funciona

José Diaz

student•

Aqui un ejemplo de proyecto con VueJS con webpack, para mostrar el nivel de sourcemap que se puede requerir.

const isDev = process.env.NODE_ENV === 'development'

const DevtoolLevel = {
  NONE: 'none',
  EVAL: 'eval',
  CHEAP_EVAL_SOURCE_MAP: 'cheap-eval-source-map',
  CHEAP_MODULE_EVAL_SOURCE_MAP: 'cheap-module-eval-source-map',
  EVAL_SOURCE_MAP: 'eval-source-map',
  CHEAP_SOURCE_MAP: 'cheap-source-map',
  CHEAP_MODULE_SOURCE_MAP: 'cheap-module-source-map',
  INLINE_CHEAP_SOURCE_MAP: 'inline-cheap-source-map',
  INLINE_CHEAP_MODULE_SOURCE_MAP: 'inline-cheap-module-source-map',
  SOURCE_MAP: 'source-map',
  INLINE_SOURCE_MAP: 'inline-source-map',
  HIDDEN_SOURCE_MAP: 'hidden-source-map',
  NO_SOURCES_SOURCE_MAP: 'nosources-source-map',
}

const config = {
  mode: isDev
    ? 'development'
    : 'production',
  devtool: isDev ? DevtoolLevel.SOURCE_MAP : DevtoolLevel.CHEAP_SOURCE_MAP
}

Para el caso de VueJS podemos escoger el tipo de recurso en función del la estructura del proyecto que tengamos.

const NODE_DIR = path.resolve(__dirname, 'node_modules')
const VUE_DIST_DIR = path.resolve(__dirname, NODE_DIR + '/vue/dist')

const isDev = process.env.NODE_ENV === 'development'
const buildType = process.env.BUILD_TYPE

const vueBuildType = {
  umd: isDev // UMD
    ? VUE_DIST_DIR + '/vue.js'
    : VUE_DIST_DIR + '/vue.min.js',
  commonjs: VUE_DIST_DIR + '/vue.common.js', // CommonJS
  bundlers: VUE_DIST_DIR + '/vue.esm.js', // ESM (for bundlers)
  browsers: isDev // ESM (for browsers)
    ? VUE_DIST_DIR + '/vue.esm.browser.js'
    : VUE_DIST_DIR + '/vue.esm.browser.min.js',
}

const config = {
  resolve: {
    alias: {
      'vue$': vueBuildType[ buildType ]
    }
  }
}

Así podemos aislando la configuración de webpack en variables y poder ingresar nuestro proyecto mas fácilmente en algún entorno de de despliegue

Lucas Aristizábal

student•

la verdad no entendí pero ah bueno

Fernando Sanchez

student•

tengo este error

[webpack-cli] TypeError: BundleAnalizerPlugin is not a constructor

Como lo puedo solucionar?

Nilson Diaz

student•

Hey! Podrias adjuntar tu configuracion de webpack y el error que te tira en consola , sera mas facil viendo el codigo

Pero tal vez puedo intuir que se trata de la forma en que estas utilizando este plugin o en donde lo estes importando

Este plugin tiene una particularidad y esque no te provee un default export , entonces tienes que desestructurarlo de 2 formas

const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

//o tambien puedes hacerlo asi

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')

Espero Te ayude!

Marlon Estiben Varon Gonzalez

student•

Tenia el mismo error y se me soluciono con la información de Nilson Diaz

Sergio Morgan

student•

2 horas peleando con este error, intentando reinstalar webpack, el dev-server, el analyzer...

cuando el problema era un 'typo' al momento de declarar 'souce-map'

Moraleja: lean detenidamente el error, ahi suele estar la respuesta

David Campos

student•

El modo Dev Tools permite crear un mapa del código que nos permite ver a detalle y analizar cada una de las particularidades del proyecto.

Primero hay que agregar una configuración en el archivo de configuración para desarrollo, agregaremos la propiedad devtool con un valor de source-map, esto permitirá generar el mapa del código en formato JSON.

Una vez hecho esto corremos Webpack con la configuración de desarrollo y para ver las ventajas que nos da generar un mapa tenemos que abrir las DevTools del navegador y en el apartado source veremos el archivo de JS de la aplicación, el mapa nos permite dar click en cualquier parte del código y verla de forma clara.

César Augusto Cortés Labrada

student•

La API es visible cuando revisamos los archivos en source dentro de navegador, entonces, la variable de entorno sólo la protege para que no sea vista en los archivos que se suben al repositorio pero ¿Dentro del navegador siempre podrá ser vista?

Felipe Tomás Arancibia Torres

student•

llevo algo menos de un año programando profesionalmente, y no tenía idea de que así podía debuggear... esta herramienta está excelente!! que bueno que tomé el curso!

Marc Recatala

student•

Si no os aparece la carpeta "js-portfolio" en los sources comprobad que teneis las opciones "Enable JavaScript source maps" y "Enable CSS source maps" activadas en las configuraciones de las dev tools

David Eduardo Perez Hernandez

student•

Que practico poder separar el bloque de código que esta potencialmente mal para editarlo y debuguear desde el navegador, genial!

Steve Anthony Luzquiños Agama

student•

Por si a alguien le sale mimificado su archivo index.js a pesar de tenerlo en modo development, puede eliminar el optimization para la configuración en desarrollo.

Eric Gomez

student•

Joel Eduardo Sánchez Herrera

student•

Algo particular para poder revisar nuestro codigo es el modo DEVTOOLS que nos hara un mapa para poder ver a forma mas detallada cualquier cosa o problema que podamos tener.

En la configuracion de desarrollo tenemos que agregar abajo del mode el codigo:

devtool: 'source-map';

Y al momento de compilar en DEV podremos ver un nuevo archivo donde vendra tood el codigo que hicimos pero es dificil de entender o de debuggear. Por eso existen los mapas y al momento de inspeccionar en el apartado de sources ahi podremos ver que google nos da la opcion de ver el mapa y ver parte por parte nuestro codigo.

Jesús Alberto Hidalgo

student•

me da este error gracias por su ayuda..

Jesus Hidalgo@DESKTOP-T4VTF21 MINGW64 ~/proyec-js/js-portfolio-main (master) $ npm run dev

js-portfolio@1.0.0 dev webpack --config webpack.config.dev.js

[webpack-cli] Failed to load 'C:\Users\Jesus Hidalgo\proyec-js\js-portfolio-main\webpack.config.dev.js' config [webpack-cli] TypeError: BundleAnalyzerPlugin is not a constructor at Object.<anonymous> (C:\Users\Jesus Hidalgo\proyec-js\js-portfolio-main\webpack.config.dev.js:80:5) at Module._compile (C:\Users\Jesus Hidalgo\proyec-js\js-portfolio-main\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10) at Module.load (node:internal/modules/cjs/loader:975:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:999:19) at require (C:\Users\Jesus Hidalgo\proyec-js\js-portfolio-main\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at loadConfig (C:\Users\Jesus Hidalgo\proyec-js\js-portfolio-main\node_modules\webpack-cli\lib\webpack-cli.js:1158:31) at C:\Users\Jesus Hidalgo\proyec-js\js-portfolio-main\node_modules\webpack-cli\lib\webpack-cli.js:1245:74 at Array.map (<anonymous>)

Ricardo Torres

student•

cuando ejecuto el "npm run dev" me sigue mandando a la pagina de Bundle Analyzer... Aqui esta el link de mi codigo Que puede estar fallando?? Me ayudan pls

Gisela Angela Cristaldo

student•

Holis, todavia tienes el error?