Edita CSS num site ativo, muda para outra página e todas as alterações desaparecem. Frustrante? Sem dúvida. O painel Elements nas DevTools do Chrome é ótimo para edições rápidas de estilos e marcação, mas até recentemente qualquer experiência durava exatamente até ao primeiro F5. E voltar ao editor de código, recompilar e reimplementar só para testar uma hipótese é uma perda de tempo que ninguém aprecia.

Felizmente, o Chrome tem um mecanismo integrado que resolve este problema. Chama-se Local Overrides e permite guardar alterações localmente para que o navegador as aplique mesmo depois de atualizar a página. A funcionalidade surgiu no Chrome 65, mas ao longo dos anos ganhou novas capacidades: agora pode não só substituir ficheiros, mas também cabeçalhos de resposta HTTP e simular pedidos de API diretamente do navegador.

Neste guia, da ativação ao acompanhamento de edições: tudo o que um programador precisa para um trabalho produtivo com local overrides.

💡 Visão geral rápida:

• Ative o Local Overrides no separador Sources e escolha uma pasta para guardar os ficheiros substituídos.
• Edite CSS, JS ou HTML no separador Sources, as alterações são guardadas localmente de forma automática.
• Atualize a página ou navegue para outra, o Chrome continua a aplicar as suas edições.
• Acompanhe as diferenças no separador Changes e faça a gestão dos ficheiros através do Overrides.

Como ativar o local overrides

Abra as DevTools (F12 ou Ctrl+Shift+I) e vá ao separador Sources. Na parte esquerda do painel, encontre o separador Overrides. Se não estiver visível, clique no ícone >> para mostrar os separadores ocultos.

Clique no botão Select folder for overrides. O Chrome vai pedir permissão para aceder ao sistema de ficheiros, escolha uma pasta existente ou crie uma nova. É aqui que todos os ficheiros substituídos serão guardados.

Depois de selecionar a pasta, a caixa de verificação Enable Local Overrides será ativada automaticamente. Note: no separador Network aparecerá um ícone de aviso, que sinaliza que alguns pedidos de rede podem ser intercetados e substituídos por versões locais dos ficheiros. Isto é normal e significa que os overrides estão ativos.

Como fazer e guardar alterações

Agora a parte interessante, a edição. Abra qualquer ficheiro através do separador Sources: encontre o CSS ou JavaScript necessário na árvore de ficheiros à esquerda e faça duplo clique. Faça as edições e pressione Ctrl+S, o ficheiro será guardado na sua pasta local e o Chrome passará a usar a versão local em vez da do servidor.

Nuance importante: edite a marcação especificamente no separador Sources, não no Elements. O painel Elements é conveniente para trabalho visual com o DOM, mas as alterações de HTML feitas nele não são guardadas como local overrides. Mude para Sources, encontre o ficheiro HTML necessário e edite aí, um ponto roxo ao lado do nome do ficheiro confirmará que o ficheiro foi substituído.

Atualize a página ou navegue para outra, o Chrome continuará a aplicar as suas edições. Quer restaurar o original? Elimine o ficheiro da pasta de overrides ou desmarque Enable Local Overrides.

Vale a pena mencionar separadamente a substituição de cabeçalhos HTTP, uma capacidade adicionada em versões posteriores do Chrome. Vá ao separador Network, clique com o botão direito num pedido e selecione Override headers. O Chrome criará um ficheiro .headers na sua pasta local onde pode definir cabeçalhos de resposta personalizados. Isto é inestimável para testar políticas CORS, Content-Security-Policy e cache sem edições no servidor.

Como acompanhar as edições feitas

Quando está a substituir ativamente dezenas de ficheiros, é fácil esquecer o que exatamente foi alterado e onde. Para isso, as DevTools têm duas ferramentas úteis.

O separador Overrides (no painel Sources) mostra uma lista completa de ficheiros substituídos agrupados por domínios. A partir daqui pode abrir qualquer ficheiro para edição adicional ou eliminar um override desnecessário, clique com o botão direito → Delete.

O separador Changes está localizado na parte inferior das DevTools, ao lado do separador Console. Mostra as diferenças entre o ficheiro original e a sua versão local, linha a linha, como no Git. Conveniente para uma auditoria rápida: o que exatamente alterou em cada ficheiro e quanto as mudanças diferem da fonte.

Dica rápida: antes de refatorar ou experimentar num site ativo, tire um instantâneo das alterações através do Changes, este é o seu "commit" local ao qual pode sempre voltar.

Overrides como ferramenta de teste de desempenho

Além da prototipagem conveniente, o Local Overrides abre um cenário interessante para análise de desempenho. Tem a capacidade de alterar código num site não local e medir imediatamente o impacto dessas edições na velocidade de carregamento e renderização.

Por exemplo, suspeita que um script de análise de terceiros está a atrasar a renderização do primeiro ecrã. Substitua o pedido, troque o script original por um ficheiro vazio ou uma versão diferida e execute o Lighthouse. A diferença nas métricas mostrará claramente se a otimização se justifica.

Outro cenário: tipos de letra. Substitua o ficheiro CSS, removendo @font-face para um tipo de letra personalizado, e veja quanto muda o LCP (Largest Contentful Paint). Ou experimente com a ordem de carregamento de scripts, mova JS crítico do <head> para o final do <body> e compare as métricas.

Harry Roberts e Umar Hansa, conhecidos especialistas em desempenho web, publicaram screencasts com exemplos claros desta abordagem. As suas demonstrações mostram: o Local Overrides transforma o navegador numa sandbox para hipóteses de desempenho onde cada iteração demora segundos, não minutos.

Se trabalha com um servidor de desenvolvimento local, o valor dos overrides é menor, já controla as fontes. Mas quando precisa de testar rapidamente uma ideia em produção ou no site de outra pessoa sem acesso ao código, esta ferramenta é indispensável.

⁉️🤔 Perguntas frequentes

Os local overrides são guardados depois de fechar o navegador?

Sim, todos os ficheiros são armazenados na pasta que escolheu no disco. Depois de reiniciar o Chrome, os overrides são automaticamente retomados, desde que a caixa de verificação Enable Local Overrides tenha permanecido ativada. Os ficheiros em si não desaparecem, pois são ficheiros normais no seu sistema de ficheiros.

Posso substituir uma resposta de API (JSON), não apenas ficheiros estáticos?

Sim, a partir do Chrome 117 isto funciona. No separador Network, clique com o botão direito num pedido e selecione Override content, o Chrome criará um ficheiro local com o corpo da resposta que pode editar. No próximo pedido, o navegador devolverá a sua versão local em vez da resposta do servidor.

Porque é que as minhas alterações feitas no painel Elements são repostas depois de atualizar?

O painel Elements edita o DOM em memória, não os ficheiros fonte. Para que as alterações sobrevivam ao F5, mude para o separador Sources, encontre o ficheiro correspondente e edite-o aí. Guarde com Ctrl+S e o Chrome criará um local override.

Como partilho local overrides com um colega?

Basta enviar o conteúdo da pasta de overrides. O colega coloca os ficheiros na sua pasta, especifica-a nas DevTools através de Select folder for overrides e todas as edições aplicam-se na máquina dele. Para trabalho em equipa, é conveniente manter a pasta de overrides no repositório Git do projeto.

Posso usar o Local Overrides no Firefox ou noutros navegadores?

O Firefox não tem um análogo ao Local Overrides, a persistência de alterações entre recarregamentos não é suportada. O Edge, baseado no Chromium, tem a mesma funcionalidade que o Chrome, uma vez que usa a base de código comum das DevTools. O Brave e o Opera também suportam overrides como navegadores Chromium.

Porque precisa realmente de local overrides

O Local Overrides nas Chrome DevTools não é apenas uma "funcionalidade conveniente". É uma forma de transformar o navegador num ambiente completo para prototipagem rápida e teste de hipóteses sem tocar no código de produção. Poupa ciclos de "editar → compilar → implementar → verificar" e obtém resultados instantaneamente.

Experimente agora: abra qualquer site, ative os overrides e mude a cor de um título. Atualize a página. Viu que a cor se manteve? É disto que se trata.