Mejora la experiencia de depuración en las Herramientas para desarrolladores de Chrome con la extensión de mapa de origen ignoreList.
Las Herramientas para desarrolladores de Chrome analizan el campo ignoreList en los mapas de origen para ayudar a mejorar la experiencia de depuración de los desarrolladores. Observa el siguiente seguimiento de pila en Console. Las Herramientas para desarrolladores ocultan automáticamente todos los marcos de terceros y muestran solo los que son relevantes para tu código.
ignoreList. La última opción oculta marcos irrelevantes de terceros para ayudarte a detectar problemas más rápido durante la depuración.
¿Qué es ignoreList?
Las extensiones de mapas de origen son campos adicionales que almacenan información complementaria sobre el mapa de origen. Estos campos tienen el prefijo x_.
Las Herramientas para desarrolladores de Chrome usan el campo ignoreList (si se proporciona) para filtrar el código generado y permitir que los desarrolladores web se enfoquen solo en el código que crearon. Por ejemplo, observa el siguiente mapa de fuentes.
/* demo.js.map */
{
"version": 3,
"mappings": "AAAAA, ..."
"sources": [
"app.js",
"components/Button.ts",
"node_modules/.../framework.js",
"node_modules/.../library.js",
...
],
"ignoreList": [2, 3],
...
}
El campo sources muestra una lista de fuentes originales que usó la entrada mappings. Mira el video ¿Qué son los mapas de origen? para obtener más información sobre cómo funcionan los mapeos.
Dado que los dos archivos node_modules/…/frameworks.js y node_modules/.../library.js son secuencias de comandos de terceros, puedes especificar el campo ignoreList para indicar sus posiciones en el campo sources. Las Herramientas para desarrolladores de Chrome aplicarán esta información para ocultar marcos de esos archivos ignorados.
Esto también se aplica a Call Stack en el panel Sources durante la depuración del punto de interrupción.
En segundo plano, las Herramientas para desarrolladores tienen un parámetro de configuración adicional habilitado de forma predeterminada: Agregar automáticamente secuencias de comandos de terceros conocidas a la lista de elementos ignorados. Puedes encontrarla en Herramientas para desarrolladores > Configuración > Lista de elementos ignorados.
Con el campo del mapa de origen ignoreList, tienes la opción de ocultar los archivos ignorados en el panel Sources para enfocarte en el código.
Cómo completar ignoreList
La buena noticia es que los frameworks como Angular y Nuxt ya configuran ignoreList en sus mapas de origen. Actualiza a la versión más reciente y podrás comenzar a usarla de inmediato. Obtendrás mejoras en el seguimiento de pila sin esfuerzo.
Por otro lado, las herramientas de compilación como Vite y Rollup ofrecen opciones de configuración para configurarla. También existe un complemento webpack para hacerlo.
Si eres un encargado de mantenimiento de bibliotecas o frameworks, es esencial que comprendas cómo implementar estos parámetros de configuración para mejorar la experiencia de depuración de tus usuarios. Consulta la siguiente sección para ver cómo lo hicieron Angular y Nuxt detrás de escena.
¿Qué pasa si tu framework y herramienta de compilación favoritos aún no lo admiten?
Trabajamos activamente con frameworks y creamos herramientas para implementar estos nuevos parámetros de configuración. También puedes ayudar notificando a los encargados de mantenimiento sobre esta función. Por ejemplo, puedes informar un problema en su repositorio.
Como alternativa, puedes agregar secuencias de comandos irrelevantes a la lista de elementos ignorados de forma manual desde el árbol de archivos de Herramientas para desarrolladores > Fuentes > Panel Page para obtener un resultado similar.
Casos de éxito: Implementación de Nuxt y Angular
Observa los siguientes dos casos prácticos.
ignoreList en Nuxt
A partir de la Nuxt v3.3.1, los contenidos de node_modules y Nuxt buildDir se marcaron como "to be ignore by debugger".
Esto se logró a través de un cambio en la configuración de compilación de Nuxt con Vite y Rollup:
/* vite.config.ts */
const ctx: ViteBuildContext = {
config: vite.mergeConfig(
build: {
rollupOptions: {
output: {
sourcemapIgnoreList: (relativeSourcePath) => {
return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
},
}
})
El equipo de Herramientas para desarrolladores desea expresar su gratitud a los equipos de Vite y Nuxt por hacer esto posible. Agradecemos tu esfuerzo y colaboración, que fueron esenciales para el éxito de esta implementación. Gracias de nuevo a los equipos de Vite y Nuxt por sus contribuciones.
ignoreList en Angular
A partir de la versión 14.1.0 de Angular, el contenido de las carpetas node_modules y webpack se marcó como “para ignorar”.
Esto se logró a través de un cambio en angular-cli creando un complemento que se conecta al módulo Compiler del webpack.
El complemento webpack que crearon nuestros ingenieros se conecta a la etapa PROCESS_ASSETS_STAGE_DEV_TOOLING y propaga el campo ignoreList en los mapas de origen con los recursos finales que genera webpack y se carga el navegador.
const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];
for (const [index, path] of map.sources.entries()) {
if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
ignoreList.push(index);
}
}
map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));
Para obtener más información sobre otras mejoras de depuración de Angular en Herramientas para desarrolladores, consulta el caso de éxito: Mejor depuración de Angular con Herramientas para desarrolladores.
El equipo de Herramientas para desarrolladores de Chrome desea agradecer al equipo de Angular por sus invaluables contribuciones para el éxito de esta implementación. Su esfuerzo y colaboración fueron esenciales, y agradecemos su arduo trabajo. Gracias, equipo de Angular, por hacerlo posible.