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

Sofia Emelianova
Sofia Emelianova

Com as substituições locais, é possível desbloquear o fluxo de trabalho prototipando e testando alterações e correções sem esperar o suporte do back-end, de terceiros ou das APIs.

Use substituições locais para simular recursos remotos, mesmo se não tiver acesso a eles. É possível simular respostas para 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 e testar correções de API antes de irem para a produção.
  • Desenvolver protótipos de novos designs de IU se você já conhece as estruturas de dados que o back-end usará.
  • Teste as correções de desempenho, por exemplo, elimine a CLS, para garantir com antecedência que elas sejam significativas.

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.

Você também pode salvar as mudanças diretamente nos arquivos de origem. Consulte Editar e salvar arquivos com 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 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. Escolher substituir conteúdo no menu do botão direito do mouse de uma solicitação.
  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. O DevTools pede que você selecione uma pasta.
    2. Clique em Allow para dar acesso ao DevTools. O DevTools solicita acesso.
  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:

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 Enable Local Overrides ou clique em 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 Salvo. ao lado dos arquivos modificados nos painéis e painéis relevantes: Elementos > Estilos, Rede e Origens > Substituições.

Os ícones correspondentes ao lado dos arquivos substituídos em "Origens", "Rede" e "Elementos", depois em "Estilos"

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.

O ícone de ponto roxo com uma dica ao lado da guia "Resposta".

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

Além disso, em Origens > Substituições, clique com o botão direito do mouse no arquivo salvo e selecione Abrir na pasta no menu de contexto. Isso abre a pasta selecionada durante a overrides setup. Lá, é possível modificar os arquivos com seu editor de código favorito.

A opção "Abrir na pasta que contém".

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:

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.

    O editor de cabeçalhos de resposta.

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

  4. Modifique ou adicione um novo cabeçalho.

    Modificar um valor de cabeçalho existente, adicionar um novo e remover uma substituição.

    • Para editar um valor de cabeçalho, clique nele.
    • Para adicionar um 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 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. 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 Salvo. .headers ao lado da seção Cabeçalhos de resposta.

    O link Substituições de cabeçalho 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:

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

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

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

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