Partilhar via


Substituir recursos de página da Web com 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 build lento e complexo. Você pode depurar e corrigir todos os tipos de problemas em DevTools. Mas as alterações não persistem; depois de atualizar o arquivo local, todo o seu trabalho se foi. O recurso Substituições na ferramenta Fontes ajuda você a resolver esse problema.

Agora 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 cópia local do recurso.

Configurando 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. DevTools é aberto.

  2. Selecione a ferramenta Fontes (ícone 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):

    Ferramenta de fontes com espaço insuficiente para mostrar a opção substituições

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

    Selecionando a guia Substituições

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

    Selecionando uma pasta a ser usada para substituições

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

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

    Conceder acesso de DevTools a uma pasta

  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 está um ícone de configuração Clear que permite excluir as configurações de substituições locais. Agora você terminou de configurar sua pasta e está pronto para substituir recursos ao vivo por recursos locais:

    Configuração bem-sucedida de uma pasta de substituições

Adicionar 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:

    Selecionando um arquivo no inspetor Styles

    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:

    Clique com o botão direito do mouse em um nome de arquivo e selecione 'Salvar para substituições'

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

    No editor de Fontes, adicionando o nome do arquivo à lista de substituições

    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 substituições (como em C:\Users\myusername\overrides).

  3. Em Explorador de Arquivos ou Finder, verifique se o DevTools criou uma subpasta nomeada usando a URL do arquivo (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 arquivo de substituição é armazenado neste diretório.

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

    Armazenar o arquivo na pasta substituições adiciona um ponto roxo ao ícone da página

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. Em DevTools, selecione a ferramenta Elementos (ícone da ferramenta Elementos) e verifique se a guia Estilos está selecionada.

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

    border: 10px solid firebrick
    

    Alterando os estilos de página da Web persistentemente editando um arquivo em sua pasta substituições

    Uma borda vermelha grossa ("firebrick") é 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 retornado pelo servidor Web em vez de usar o arquivo de substituição local.

Adicionar arquivos a substituições de dentro de outras guias ou ferramentas

  1. Continuando acima, selecione a ferramenta Fontes (ícone 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 . Os arquivos que já estão colocados na pasta 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:

    Selecionar um arquivo na ferramenta Fontes para substituições

    Na guia Página e Substituições na ferramenta Fontes , o ícone do arquivo é alterado 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 (ícone de ferramenta de rede), clique com o botão direito do mouse em um arquivo de recurso para a página da Web, como to-do.jse selecione Substituir conteúdo:

    Selecionando um arquivo da ferramenta Rede para substituições

    Em toda a interface do usuário de DevTools, o ícone do arquivo é alterado 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, os arquivos de recurso localizados em seu computador na pasta Substituições são usados, em vez de arquivos de recurso que são 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ê deseja alterar os arquivos. As alterações são sincronizadas em todos os produtos que acessam os arquivos na pasta substituições.