Melhore a experiência de depuração no Chrome DevTools com a extensão de mapa de origem ignoreList.
O Chrome DevTools analisa o campo ignoreList em mapas de origem para melhorar a experiência de depuração do desenvolvedor. Confira o stack trace a seguir no Console. O DevTools oculta automaticamente todos os frames de terceiros e mostra apenas os que são relevantes para seu código.
ignoreList. O segundo oculta frames de terceiros irrelevantes para ajudar você a identificar problemas mais rapidamente durante a depuração.
O que é o ignoreList?
As extensões de mapas de origem são campos adicionais que armazenam informações complementares sobre o mapa de origem. Esses campos são prefixados com x_.
O Chrome DevTools usa o campo ignoreList (se fornecido) para filtrar o código gerado e permitir que os desenvolvedores web se concentrem apenas no código que criaram. Por exemplo, veja o mapa de origem a seguir.
/* demo.js.map */
{
"version": 3,
"mappings": "AAAAA, ..."
"sources": [
"app.js",
"components/Button.ts",
"node_modules/.../framework.js",
"node_modules/.../library.js",
...
],
"ignoreList": [2, 3],
...
}
O campo sources mostra uma lista de fontes originais usadas pela entrada mappings. Assista O que são mapas de origem? para saber como os mapeamentos funcionam.
Como os dois arquivos node_modules/…/frameworks.js e node_modules/.../library.js são scripts de terceiros, é possível especificar o campo ignoreList para indicar as posições deles no campo sources. O Chrome DevTools vai usar essas informações para ocultar frames desses arquivos ignorados.
Isso também se aplica à pilha de chamadas no painel Origens durante a depuração de pontos de interrupção.
Nos bastidores, o DevTools tem uma configuração extra ativada por padrão: Adicionar automaticamente scripts conhecidos de terceiros à lista de ignorados. Ela está em DevTools > Configurações > Lista de ignorados.
Com o campo de mapa de origem ignoreList, você pode ocultar os arquivos ignorados no painel Origens para se concentrar no código.
Como preencher ignoreList
A boa notícia é que frameworks como Angular e Nuxt já configuram ignoreList nos mapas de origem. Faça upgrade para a versão mais recente e use o recurso imediatamente. Você recebe melhorias de stack trace sem esforço.
Por outro lado, ferramentas de build como Vite e Rollup oferecem configurações para isso. Também há um plug-in do webpack para isso.
Se você mantém um framework ou uma biblioteca, é essencial entender como implementar essas configurações para melhorar a experiência de depuração dos usuários. Consulte a seção a seguir para saber como o Angular e o Nuxt fizeram isso nos bastidores.
E se o framework e a ferramenta de build que você mais gosta ainda não forem compatíveis?
Trabalhamos ativamente com frameworks e ferramentas de build para implementar essas novas configurações. Você também pode ajudar notificando os mantenedores sobre esse recurso. Por exemplo, você pode registrar um problema no repositório deles.
Como alternativa, você pode adicionar manualmente scripts irrelevantes à lista de ignorados diretamente na árvore de arquivos no painel DevTools > Origens > Página para alcançar um resultado semelhante.
Estudos de caso: implementação do Nuxt e do Angular
Confira os dois estudos de caso a seguir.
ignoreList no Nuxt
A partir do Nuxt v3.3.1, o conteúdo de node_modules e Nuxt buildDir foi marcado como "a ser ignorado por depuradores".
Isso foi feito com uma mudança na configuração do build do Nuxt usando o Vite e o 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)
},
}
})
A equipe do DevTools agradece às equipes do Vite e do Nuxt por tornarem isso possível. Agradecemos seus esforços e colaboração, que foram essenciais para o sucesso dessa implementação. Agradecemos novamente às equipes do Vite e do Nuxt pelas contribuições.
ignoreList no Angular
A partir do Angular v14.1.0, o conteúdo das pastas node_modules e webpack foi marcado como "a ser ignorado".
Isso foi feito com uma mudança em angular-cli ao criar um plug-in que se conecta ao módulo Compiler do webpack.
O plug-in do webpack que nossos engenheiros criaram se conecta ao estágio PROCESS_ASSETS_STAGE_DEV_TOOLING e preenche o campo ignoreList nos mapas de origem com os recursos finais que o webpack gera e o navegador carrega.
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 saber mais sobre outras melhorias de depuração do Angular no DevTools, consulte Estudo de caso: melhor depuração do Angular com o DevTools.
A equipe do Chrome DevTools gostaria de agradecer à equipe do Angular pelas contribuições valiosas para o sucesso dessa implementação. Seus esforços e colaboração foram essenciais, e agradecemos seu trabalho árduo. Agradecemos à equipe do Angular por tornar isso possível.