Substituir recursos da página da Web por cópias locais (guia Substituições)

Às vezes, você precisa experimentar algumas correções possíveis para uma página da Web, mas não tem acesso aos arquivos de origem, ou alterar a página requer um processo de compilação lento e complexo. Você pode depurar e corrigir todos os tipos de problemas no DevTools. Mas as mudanças não persistem; Depois de atualizar o arquivo local, todo o seu trabalho desaparecerá. O recurso Substituições na ferramenta Fontes ajuda a resolver esse problema.

Você pode pegar um recurso da página da web atual e armazená-lo localmente. Quando você atualiza a página da Web, o navegador não carrega o recurso do servidor; Em vez disso, o navegador substitui o recurso do servidor pela sua cópia local do recurso. As substituições que você cria são salvas em recargas.

O recurso de substituições não se destina a mapear para seus arquivos de origem.

Quando você configura uma pasta para substituições locais pela primeira vez, essa pasta deve estar vazia. O DevTools cria todas as pastas e subpastas necessárias para armazenar substituições dentro dele.

Configurar sua pasta local para armazenar substituições

1. Clique com o botão direito do mouse em uma página da Web, como https://microsoftedge.github.io/Demos/demo-to-do/, e selecione Inspecionar. O DevTools é aberto.

2. Selecione a ferramenta Fontes ().

3. No painel Navegador (à esquerda), clique na guia Substituições (agrupada com a guia Página ); Se necessário, clique no botão Mais guias (v):

   

4. Selecione a guia Substituições e, em seguida, clique novamente no botão Mais guias para recolher as guias:

   

5. Clique em + Selecionar pasta para substituições:

   

6. Na caixa de diálogo de navegação de arquivos, selecione uma pasta no computador local para armazenar os arquivos de recursos que você deseja substituir, como C:\Users\myusername\overrides, e clique no botão Selecionar Pasta .

   O DevTools avisa que deve ter acesso total à pasta e que você não deve revelar nenhuma informação confidencial:

   

7. Clique no botão Permitir .

   Na guia Substituições , uma caixa de seleção é mostrada ao lado de Habilitar substituições locais. À direita de Habilitar substituições locais há um ícone de configuração Limpar que permite excluir as configurações de substituições locais. Agora você terminou de configurar sua pasta e está pronto para substituir recursos ativos por recursos locais:

   

Adicionando arquivos à pasta Substituições

Em seguida, adicione arquivos à pasta Substituições, da seguinte maneira. Este exemplo adicionará um arquivo CSS.

1. Selecione a ferramenta Elementos e, na guia Estilos , clique no nome de um arquivo CSS, como to-do-styles.css:

   

   A ferramenta Fontes é aberta, com o arquivo selecionado aberto em uma guia no painel do editor.

2. No painel do editor, clique com o botão direito do mouse na guia do arquivo, como to-do-styles.css, e selecione Substituir conteúdo:

   

   Na guia do arquivo, um ícone de página com um ponto roxo é adicionado e, na guia Substituições , o arquivo é adicionado:

   

   Neste exemplo, o arquivo é listado como: microsoftedge.github.io/Demos/demo-to-do/styles > to-do-styles.css

   O arquivo é armazenado em um novo diretório que está na pasta de substituições (por exemplo, em C:\Users\myusername\overrides).

3. No Explorador de Arquivos ou no Finder, verifique se o DevTools criou uma subpasta nomeada usando a URL do arquivo (como microsoftedge.github.io) e que contém a estrutura de diretório correta, como C:\Users\myusername\overrides\microsoftedge.github.io\Demos\demo-to-do\styles. O arquivo de substituição é armazenado nesse diretório.

   No painel editor da ferramenta Fontes , um ícone de página com um ponto roxo é adicionado à guia do arquivo. O ponto púrpura indica que o arquivo é um arquivo local que substitui o arquivo retornado do servidor Web:

   

Alterando o estilo usando o arquivo de substituição

Continuando acima, agora você pode alterar os estilos da página da Web usando o arquivo CSS de substituição local (neste exemplo, to-do-styles.css). Adicione uma borda vermelha grossa ao redor do corpo da página da Web renderizada, da seguinte maneira:

1. No DevTools, selecione a ferramenta Elementos () e verifique se a guia Estilos está selecionada.

2. Copie a seguinte propriedade de estilo CSS e cole-a na regra CSS do elemento existente body que está em seu arquivo de substituição de CSS, como to-do-styles.css:

   border: 10px solid firebrick
   

   

   Uma borda vermelha grossa ("tijolo refratário") é adicionada ao redor do corpo da página da Web renderizada, e o arquivo CSS modificado é salvo automaticamente em seu computador, no diretório Substituições.

3. Atualize a página da Web.

   A borda vermelha grossa permanece exibida, e nenhum trabalho é perdido, como teria sido se renderizasse o arquivo CSS que é retornado pelo servidor Web em vez de usar o arquivo de substituição local.

Adicionar arquivos a Substituições a partir de outras guias ou ferramentas

1. Continuando acima, selecione a ferramenta Fontes ( e, à esquerda, selecione a guia Página (agrupada com a guia Substituições ).

2. Na árvore de arquivos de recursos da página, expanda a pasta estilos . Files que já estão colocados na pasta de substituições (usando a guia Substituições), como to-do-styles.css, têm um ponto roxo no ícone.

3. Clique com o botão direito do mouse em um arquivo diferente, como (index) (que é index.html), e selecione Substituir conteúdo:

   

   Na guia Página e na guia Substituições na ferramenta Fontes , o ícone do arquivo muda para um ícone de página com um ponto roxo (como para index.html) e o arquivo é adicionado ao diretório Substituições da unidade local.

4. Selecione a ferramenta Rede (), clique com o botão direito do mouse em um arquivo de recurso para a página da Web, como to-do.jse, em seguida, selecione Substituir conteúdo:

   

   Em toda a interface do usuário do DevTools, o ícone do arquivo muda para um ícone de página com um ponto roxo (como para to-do.js), e o arquivo é adicionado ao diretório Substituições da unidade local.

   Quando as substituições estão em vigor, são usados arquivos de recursos localizados na pasta Substituições do computador, em vez de arquivos de recursos retornados pelo servidor Web.

Interação bidirecional de substituições

Use o editor fornecido com a ferramenta Fontes do DevTools ou qualquer editor que você queira alterar os arquivos. As alterações são sincronizadas em todos os produtos que acessam os arquivos na pasta substituições.