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

Por vezes, tem de experimentar algumas correções possíveis para uma página Web, mas não tem acesso aos ficheiros de origem ou alterar a página requer um processo de compilação lento e complexo. Pode depurar e corrigir todo o tipo de problemas nas DevTools. No entanto, as alterações não persistem; depois de atualizar o ficheiro local, todo o seu trabalho desapareceu. A funcionalidade Substituições na ferramenta Origens ajuda-o a resolver este problema.

Pode utilizar um recurso da página Web atual e armazená-lo localmente. Quando atualiza a página Web, o browser não carrega o recurso a partir do servidor; em vez disso, o browser substitui o recurso do servidor pela cópia local do recurso. As substituições que criar são guardadas em recarregamentos.

A funcionalidade de substituições não se destina ao mapeamento para os seus ficheiros de origem.

Quando configura uma pasta para substituições locais pela primeira vez, essa pasta deverá estar vazia. Em seguida, o DevTools cria todas as pastas e subpastas de que precisa para armazenar substituições.

Configurar a pasta local para armazenar Substituições

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

2. Selecione a ferramenta Origens ().

3. No painel Navegador (à esquerda), clique no separador Substituições (agrupado com o separador Página ); se necessário, clique no botão Mais separadores (v):

   

4. Selecione o separador Substituições e, em seguida, clique novamente no botão Mais separadores para fechar os separadores:

   

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

   

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

   O DevTools avisa-o de que tem de ter acesso total à pasta e que não deve revelar informações confidenciais:

   

7. Clique no botão Permitir .

   No separador Substituições , é apresentada uma caixa de verificação junto a Ativar Substituições Locais. À direita de Ativar Substituições Locais está um ícone Limpar configuração que lhe permite eliminar as definições de substituições locais. Acabou de configurar a pasta e está pronto para substituir os recursos dinâmicos pelos recursos locais:

   

Adicionar ficheiros à pasta Substituições

Em seguida, adicione ficheiros à pasta Substituições, da seguinte forma. Este exemplo irá adicionar um ficheiro CSS.

1. Selecione a ferramenta Elementos e, em seguida, no separador Estilos , clique no nome de um ficheiro CSS, como to-do-styles.css:

   

   A ferramenta Origens é aberta, com o ficheiro selecionado aberto num separador no painel do editor.

2. No painel do editor, clique com o botão direito do rato no separador do ficheiro, como to-do-styles.css e, em seguida, selecione Substituir conteúdo:

   

   No separador do ficheiro, é adicionado um ícone de página com um ponto roxo e, no separador Substituições , é adicionado o ficheiro:

   

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

   O ficheiro é armazenado num novo diretório que está na pasta substitui (por exemplo, em C:\Users\myusername\overrides).

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

   No painel editor da ferramenta Origens , é adicionado um ícone de página com um ponto roxo ao separador do ficheiro. O ponto roxo indica que o ficheiro é um ficheiro local que substitui o ficheiro devolvido do servidor Web:

   

Alterar o estilo com o ficheiro de substituição

Continuando acima, pode agora alterar os estilos da página Web ao utilizar o ficheiro CSS de substituição local (neste exemplo, to-do-styles.css). Adicione um limite vermelho espesso à volta do corpo da página Web composto, da seguinte forma:

1. Em DevTools, selecione a ferramenta Elementos () e, em seguida, certifique-se de que o separador Estilos está selecionado.

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

   border: 10px solid firebrick
   

   

   É adicionado um limite vermelho espesso ("firebrick") à volta do corpo da página Web composta e o ficheiro CSS modificado é guardado automaticamente no seu computador, no diretório Substituições.

3. Atualize a página Web.

   O limite vermelho espesso permanece apresentado e nenhum dos seus trabalhos é perdido, tal como teria sido se estivesse a compor o ficheiro CSS devolvido pelo servidor Web em vez de utilizar o ficheiro de substituição local.

Adicionar ficheiros a Substituições a partir de outros separadores ou ferramentas

1. Continuando acima, selecione a ferramenta Origens () e, à esquerda, selecione o separador Página (agrupado com o separador Substituições ).

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

3. Clique com o botão direito do rato num ficheiro diferente, como (índice) (que é index.html), e, em seguida, selecione Substituir conteúdo:

   

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

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

   

   Ao longo da IU do DevTools, o ícone do ficheiro muda para um ícone de página com um ponto roxo (por exemplo, para to-do.js) e o ficheiro é adicionado ao diretório Substituições da unidade local.

   Quando as substituições estão em vigor, são utilizados ficheiros de recursos localizados no seu computador na pasta Substituições, em vez de ficheiros de recursos que são devolvidos pelo servidor Web.

Interação bidirecional de substituições

Utilize o editor fornecido com a ferramenta Origens do DevTools ou qualquer editor que pretenda alterar os ficheiros. As alterações são sincronizadas em todos os produtos que acedem aos ficheiros na pasta substitui.