Substituir o conteúdo da Web e os cabeçalhos de resposta HTTP localmente

Sofia Emelianova

Com as substituições locais, você pode desbloquear seu fluxo de trabalho criando protótipos e testando mudanças e correções sem esperar que o back-end, terceiros ou APIs ofereçam suporte a elas.

Use substituições locais para simular recursos remotos, mesmo que você não tenha acesso a eles. É possível simular respostas a solicitações e vários arquivos, por exemplo, cabeçalhos de resposta HTTP e conteúdo da Web, incluindo solicitações XHR e de busca.

Por exemplo, as substituições locais podem ajudar nos seguintes casos de uso:

• Simule a API e teste as correções antes de elas entrarem em produção.
• Crie protótipos de novos designs de interface se você já conhece as estruturas de dados que o back-end vai usar.
• Teste correções de performance, por exemplo, elimine o CLS, para garantir com antecedência que elas são significativas.

Observação: assista o vídeo acima para saber mais sobre casos de uso.

As substituições locais também permitem manter as mudanças feitas no DevTools em todos os carregamentos de página.

Como funciona

• Quando você faz mudanças no DevTools, ele salva uma cópia do arquivo modificado em uma pasta especificada.
• Quando você recarrega a página, o DevTools disponibiliza o arquivo local modificado, em vez do recurso de rede.

Observação: as substituições locais desativam automaticamente o cache.

Também é possível salvar as mudanças diretamente nos arquivos de origem. Consulte Editar e salvar arquivos com os espaços de trabalho.

Limitações

As substituições locais funcionam para cabeçalhos de resposta de rede e para a maioria dos tipos de arquivo, incluindo solicitações XHR e de busca, com algumas exceções:

• O cache é desativado quando as substituições locais estão ativadas.
• O DevTools não salva as mudanças feitas na árvore DOM do painel Elementos.
• Se você editar o CSS no painel Estilos e a origem desse CSS for um arquivo HTML, o DevTools não vai salvar a mudança.

Em vez disso, edite arquivos HTML no painel Fontes.

Configurar substituições locais

É possível substituir o conteúdo da Web ou os cabeçalhos de resposta imediatamente no painel Rede:

1. Abra o DevTools, navegue até o painel Rede, clique com o botão direito do mouse em uma solicitação que você quer substituir e escolha Substituir cabeçalhos ou Substituir conteúdo no menu suspenso.
2. Se você ainda não configurou substituições locais, na barra de ações na parte de cima, o DevTools vai pedir para:
   1. Selecione uma pasta para armazenar os arquivos de substituição.
   2. Clique em Permitir para conceder direitos de acesso das DevTools a ele.
3. Se você tiver substituições locais configuradas, mas desativadas, o DevTools as ativará automaticamente.

4. Depois que as substituições locais são configuradas e ativadas, dependendo do que você está prestes a substituir, o DevTools leva você para:

   • O painel Fontes para fazer mudanças no conteúdo da Web.
   • O editor em Rede > Cabeçalhos > Cabeçalhos de resposta para permitir que você faça mudanças nos cabeçalhos de resposta.

Para desativar temporariamente as modificações locais ou excluir todos os arquivos de modificação, navegue até Fontes > Modificações e desmarque a caixa de seleção Ativar modificações locais ou clique em Limpar, respectivamente.

Para excluir um único arquivo de substituição ou todas as substituições em uma pasta, clique com o botão direito do mouse no arquivo ou na pasta em Fontes > Substituições, selecione Excluir e clique em OK na caixa de diálogo. Não é possível desfazer essa ação, e você terá que recriar manualmente as substituições excluídas.

Para ver todas as substituições rapidamente, no painel Rede, clique com o botão direito do mouse em uma solicitação e selecione Mostrar todas as substituições. As DevTools vão levar você até Sources > Overrides.

Substituir conteúdo da Web

Para substituir o conteúdo da Web:

1. Configurar substituições locais.
2. Faça mudanças nos arquivos e salve-os no DevTools.

Observação:não é possível substituir arquivos mapeados por origem. Se você clicar com o botão direito do mouse em uma solicitação no painel Rede e selecionar Substituir conteúdo, as DevTools vão mostrar uma caixa de diálogo que leva aos arquivos de origem originais.

Por exemplo, é possível editar arquivos em Fontes ou CSS em Elementos > Estilos, a menos que o CSS esteja em arquivos HTML.

As DevTools salvam os arquivos modificados, listam-os em Fontes > Substituições e mostram o ícone ao lado dos arquivos substituídos nos painéis relevantes: Elementos > Estilos, Rede e Fontes > Substituições.

Além disso, o painel Rede mostra um ícone de ponto roxo com uma dica ao lado da guia Resposta de uma solicitação com conteúdo da Web substituído.

Substituir solicitações XHR ou de busca para simular recursos remotos

Com as substituições locais, você não precisa de acesso ao back-end nem esperar que ele ofereça suporte às suas mudanças. Simule e faça testes em tempo real:

1. Configurar substituições locais.
2. Em Rede, filtre as solicitações XHR/fetch, encontre a que você precisa, clique com o botão direito do mouse e selecione Substituir conteúdo.
3. Faça as mudanças nos dados buscados e salve o arquivo.
4. Atualize a página e observe as mudanças aplicadas.

Para aprender esse fluxo de trabalho, assista ao vídeo a seguir:

Acompanhar suas mudanças locais

Você pode acompanhar todas as mudanças feitas no conteúdo da Web em um só lugar: a guia Mudanças do painel.

Além disso, em Fontes > Substituições, clique com o botão direito do mouse no arquivo salvo e selecione Abrir na pasta que contém no menu de contexto. Isso abre a pasta selecionada durante a configuração de substituições. Lá, você pode modificar os arquivos com seu editor de código favorito.

Substituir cabeçalhos de resposta HTTP

No painel Rede, é possível substituir cabeçalhos de resposta HTTP sem acesso ao servidor da Web.

Com substituições de cabeçalho de resposta, você pode criar protótipos locais de correções para vários cabeçalhos, incluindo, entre outros:

• Cabeçalhos de compartilhamento de recursos entre origens (CORS)
• Cabeçalhos da política de permissões
• Cabeçalhos de isolamento entre origens

Para substituir um cabeçalho de resposta:

1. Configure substituições locais e abra a página que você quer depurar.
2. Acesse Rede, encontre uma solicitação, clique com o botão direito do mouse nela e selecione Substituir cabeçalhos. As DevTools levam você ao editor Cabeçalhos > Cabeçalhos de resposta.

3. Passe o cursor sobre um valor de cabeçalho de resposta e coloque um cursor ali.

   

   Outra opção é passar o cursor sobre um valor de cabeçalho de resposta e clicar em edit Editar para ativar o editor Cabeçalhos de resposta.

4. Modifique ou adicione um novo cabeçalho.

   Observação:este exemplo adiciona o cabeçalho Access-Control-Allow-Origin: * para se livrar de um erro de CORS.

   

   • Para editar um valor de cabeçalho, clique nele.
   • Para adicionar um novo cabeçalho, clique em Adicionar cabeçalho.
   • Para remover uma substituição de cabeçalho, clique em ao lado dela. Isso remove os cabeçalhos adicionados ou reverte os valores modificados para os originais.

   O painel Rede destaca os cabeçalhos modificados em verde e as substituições removidas em vermelho e tachadas. Além disso, a guia Cabeçalhos mostra um ícone de ponto roxo com uma dica para informar que os cabeçalhos foram substituídos.

5. Atualize a página para aplicar as mudanças.

Editar todas as substituições de cabeçalho de resposta

Para editar todas as substituições de cabeçalho em um só lugar:

1. Clique em .headers ao lado da seção Cabeçalhos de resposta.

   

   As DevTools levam você ao arquivo .headers correspondente em Sources > Overrides.

2. Edite o arquivo .headers:

   

   • Para adicionar uma nova regra de substituição, clique em Adicionar regra de substituição. Uma regra aqui é um conjunto de cabeçalhos e valores e uma ou várias solicitações para aplicá-los.

     Observação:é possível usar caracteres curinga para especificar várias solicitações de uma só vez.
     Designar vários caracteres com * e um único com ?.

   • Para adicionar um par cabeçalho-valor a uma regra, passe o cursor sobre outro par e clique em .

   • Para reverter um valor de cabeçalho, remova um cabeçalho ou uma regra adicionada. Para isso, passe o cursor sobre ele e clique em .

3. Salve o arquivo .headers com Command / Control + S.

4. Atualize a página para aplicar as mudanças.