Mejora la experiencia de depuración en las Herramientas para desarrolladores de Chrome con la extensión de mapa de fuentes ignoreList.
Las Herramientas para desarrolladores de Chrome analizan el campo ignoreList en los mapas de fuentes para ayudar a mejorar la experiencia de depuración de los desarrolladores. Consulta el siguiente seguimiento de pila en Console. Las Herramientas para desarrolladores ocultan automáticamente todos los marcos de terceros y muestra solo los que son relevantes para tu código.
ignoreList. La versión posterior oculta los fotogramas 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. Esos 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 crean. 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 utilizadas por la entrada mappings. Mira el video ¿Qué son los mapas de orígenes? para obtener información sobre cómo funcionan las asignaciones.
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 la pila de llamadas en el panel Sources durante la depuración del punto de interrupción.
En segundo plano, Herramientas para desarrolladores tiene habilitada una configuración adicional de forma predeterminada: Agregar automáticamente secuencias de comandos de terceros conocidas para ignorar la lista. Puedes encontrarla en Herramientas para desarrolladores > Configuración > Lista de omisiones.
Con el campo de mapa de fuentes ignoreList, tienes la opción de ocultar los archivos ignorados en el panel Fuentes para centrarte en tu código.
Cómo propagar ignoreList
La buena noticia es que los frameworks como Angular y Nuxt ya configuran ignoreList en sus mapas de origen. Actualízalo a la versión más reciente y estará listo para usar. Obtienes mejoras para el seguimiento de pila sin esfuerzo.
Por otro lado, las herramientas de compilación, como Vite y Rollup, ofrecen parámetros de configuración para configurarlo. También existe un complemento de webpack para hacerlo.
Si eres un encargado de mantenimiento de frameworks o bibliotecas, es fundamental que comprendas cómo implementar esta 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 en segundo plano.
¿Qué pasa si tu framework y herramienta de compilación favoritas aún no son compatibles?
Trabajamos activamente con frameworks y creamos herramientas para implementar estos nuevos parámetros de configuración. También puedes ayudar si notificas a los encargados de mantenimiento sobre esta función. Por ejemplo, puedes informar un problema en su repositorio.
Como alternativa, puedes agregar de forma manual secuencias de comandos irrelevantes a la lista de elementos ignorados directamente desde el árbol de archivos en el panel Herramientas para desarrolladores > Fuentes > Página 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 Nuxt v3.3.1, el contenido de node_modules y buildDir de Nuxt se marcó como "para que los depuradores lo ignoren".
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 quiere agradecer a los equipos de Vite y Nuxt por hacer todo 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 tus contribuciones.
ignoreList en Angular
A partir de Angular v14.1.0, el contenido de las carpetas node_modules y webpack se marcó como “ignorar”.
Esto se logró con un cambio en angular-cli mediante la creación de un complemento que se engancha al módulo Compiler del webpack.
El complemento webpack que crearon nuestros ingenieros se conecta con 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 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 Caso de éxito: Mejor depuración de Angular con Herramientas para desarrolladores.
El equipo de Herramientas para desarrolladores de Chrome quiere agradecer al equipo de Angular por sus invaluables contribuciones al éxito de esta implementación. Tu esfuerzo y colaboración fueron esenciales, y agradecemos tu arduo trabajo. ¡Gracias, equipo de Angular, por hacer esto posible!