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 eles.

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:

• Simular as correções de API e testar a API antes de irem para a produção.
• Crie protótipos de novos designs de interface se você já souber as estruturas de dados que o back-end vai usar.
• Teste correções de desempenho, por exemplo, elimine a CLS, para garantir que elas sejam 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 nos 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 serve o arquivo local modificado, em vez do recurso de rede.

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

Você também pode salvar suas alterações diretamente nos arquivos de origem. Consulte Editar e salvar arquivos com o Workspaces.

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 são ativadas.
• O DevTools não salva as mudanças feitas na árvore do DOM do painel Elements.
• Se você editar o CSS no painel Estilos e a origem desse CSS for um arquivo HTML, o DevTools não salvará a alteração.

Em vez disso, edite arquivos HTML no painel Sources.

Configurar substituições locais

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

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 escolha Substituir cabeçalhos ou Substituir conteúdo no menu suspenso.
2. Se você ainda não tiver configurado substituições locais, na barra de ações na parte de cima, o DevTools vai pedir que você:
   1. Selecione uma pasta para armazenar os arquivos de substituição.
   2. Clique em Permitir para conceder ao DevTools os direitos de acesso.
3. Se você tiver substituições locais configuradas, mas desativadas, o DevTools vai ativá-las automaticamente.

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

   • Use o painel Origens para fazer mudanças no conteúdo da Web.
   • O editor em Rede > Cabeçalhos > Cabeçalhos de resposta para fazer alterações nos cabeçalhos de resposta.

Para desativar temporariamente as substituições locais ou excluir todos os arquivos de substituição, acesse Fontes > Substituições e desmarque a caixa de seleção Ativar substituiçõ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 Origens > Substituições, selecione Excluir e clique em OK na caixa de diálogo. Essa ação não pode ser desfeita, e você terá que recriar manualmente as substituições excluídas.

Para conferir todas as substituições, clique com o botão direito do mouse em uma solicitação no painel Rede e selecione Mostrar todas as substituições. O DevTools vai levar você para Fontes > Substituições.

Substituir conteúdo da Web

Para substituir o conteúdo da Web:

1. Configurar substituições locais.
2. Fazer mudanças nos arquivos e salvá-los no DevTools.

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

Por exemplo, você pode 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 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 de ferramenta ao lado da guia Resposta de uma solicitação com conteúdo da Web substituído.

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

Com as substituições locais, você não precisa acessar o back-end nem precisa esperar que ele dê suporte às suas alterações. Simulação e experiência imediata:

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 alterações aplicadas.

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

Acompanhar as alterações locais

Acompanhe todas as mudanças feitas no conteúdo da Web em um só lugar: a guia da gaveta Alterações.

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 modificar os cabeçalhos de resposta HTTP sem acessar o servidor da Web.

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

• Cabeçalhos do Compartilhamento de recursos entre origens (CORS)
• Cabeçalhos Permissions-Policy
• Cabeçalhos de isolamento de origem cruzada

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 nela com o botão direito do mouse e selecione Substituir cabeçalhos. O DevTools leva você ao editor Headers > Response Headers.

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

   

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

4. Modifique ou adicione um novo cabeçalho.

   Observação:este exemplo adiciona o cabeçalho Access-Control-Allow-Origin: * para eliminar um erro do 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 no 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 riscadas. 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 alterações.

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 várias solicitações às quais eles serão aplicados.

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

   • Para adicionar um par de 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 regra adicionado, 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.