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

Sofia Emelianova

Com substituições locais, é possível substituir cabeçalhos de resposta HTTP e conteúdo da Web, incluindo solicitações XHR e de busca, para simular recursos remotos, mesmo se você não tiver acesso a eles. Isso permite criar protótipos de mudanças sem esperar o suporte do back-end. 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 exibe o arquivo local modificado em vez do recurso de rede.

Limitações

As substituições locais funcionam para cabeçalhos de resposta de rede e para a maioria dos tipos de arquivo, incluindo XHR e solicitações 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 do DOM do painel Elements.
• Se você editar CSS no painel Estilos e a origem desse CSS for um arquivo HTML, o DevTools não salvará a alteração.

Em vez disso, é possível editar arquivos HTML no painel Origens.

Configurar substituições locais

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

1. Abra o DevTools, acesse o painel Network, clique com o botão direito do mouse em uma solicitação que você quer substituir e selecione Override headers ou Override content no menu suspenso.
2. Se você ainda não configurou substituições locais, o DevTools vai solicitar que você faça o seguinte na barra de ações na parte superior:
   1. Selecione uma pasta para armazenar os arquivos de substituição.
   2. Clique em Allow para dar acesso ao DevTools.
3. Se você tiver substituições locais configuradas, mas desativadas, o DevTools vai ativá-las automaticamente.

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

   • Painel Origens 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 alterações nos cabeçalhos de resposta.

Para desativar temporariamente as substituições locais ou excluir todos os arquivos de substituição, acesse Sources > Overrides e desmarque a caixa de seleção check_box_outline_blank Enable Local Overrides ou clique em block Clear, 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 Sources > Overrides, selecione Delete 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 visualizar rapidamente todas as substituições, no painel Rede, clique com o botão direito do mouse em uma solicitação e selecione Mostrar todas as substituições. O DevTools levará você a Origens > Substituições.

Substituir conteúdo da Web

Para modificar o conteúdo da Web:

1. Configure substituições locais.
2. Fazer alterações nos arquivos e salvá-los no DevTools.

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

O DevTools salva os arquivos modificados, os lista em Fontes > Substituições e mostra o ícone ao lado dos arquivos modificados nos painéis e painéis relevantes: Elementos > Estilos, Rede e Origens > 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 modificado.

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 mudanças. Simular e fazer experimentos na prática:

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

Para saber mais sobre esse fluxo de trabalho, assista ao vídeo a seguir:

Acompanhe as alterações locais

Você pode acompanhar todas as alterações feitas no conteúdo da Web em um só lugar, na guia da gaveta Alterações.

Substituir cabeçalhos de resposta HTTP

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

Com as substituições de cabeçalho de resposta, é possível criar protótipos de correções para vários cabeçalhos localmente, incluindo, mas não se limitando a:

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

Para substituir um cabeçalho de resposta:

1. Configure substituições locais e inspecione, por exemplo, esta página de demonstração.
2. Acesse Rede, encontre uma solicitação, clique com o botão direito nela e selecione Substituir cabeçalhos. O DevTools leva você ao editor Headers > Response Headers.

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

   

   Como alternativa, para ativar o editor Cabeçalhos de resposta, passe o cursor sobre um valor de cabeçalho de resposta e clique em edit Editar.

4. Modifique ou adicione um novo cabeçalho.

   

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

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

5. refresh 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.

   

   O DevTools leva 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 única ou múltipla solicitação para aplicá-los.

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

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

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

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