Editar e salvar arquivos em um espaço de trabalho (ferramenta Fontes, guia Espaço de Trabalho)

Você pode usar o DevTools como um Ambiente de Desenvolvimento Integrado (IDE) no navegador. Para salvar edições em arquivos de origem de páginas da Web, adicione a pasta de código-fonte da página da Web na guia Espaço de trabalho da ferramenta Fontes . Em seguida, você pode editar e salvar arquivos HTML, CSS e JS no editor da ferramenta Fontes (ou na ferramenta Fonte rápida no painel Visualização Rápida na parte inferior do DevTools).

Você pode criar, copiar, renomear e excluir arquivos de origem na guia Workspace .

Use a guia Espaço de trabalho na ferramenta Fontes para exibir e editar o conteúdo de uma pasta no computador a partir da ferramenta Fontes . As alterações feitas nos arquivos em um espaço de trabalho são salvas no computador.

A maneira típica de configurar um espaço de trabalho é configurá-lo para exibir os arquivos de origem do código de front-end do seu site. Dessa forma, você usa o DevTools para inspecionar seu site e fazer alterações em seus arquivos de origem. Dessa forma, as alterações feitas são salvas no computador, em vez de perdidas quando você atualiza a página.

Consulte também:

Visão geral do recurso de espaço de trabalho do DevTools

Um espaço de trabalho do DevTools permite que você exiba o código-fonte do seu site que está em seu computador e faça alterações nele, a partir da ferramenta Fontes , para que as alterações sejam mantidas nas atualizações da página.

Veja um cenário típico para usar um workspace:

  1. Tenha o código-fonte do seu site em seu computador.

  2. Execute um servidor Web local (como npx http-server) a partir do diretório de código-fonte, para que o site esteja acessível em uma URL de desenvolvimento local, como http://localhost:8080.

  3. Abrir http://localhost:8080 no Microsoft Edge.

  4. Use a guia Workspace da ferramenta Fontes no DevTools para alterar o código-fonte do seu site, incluindo os arquivos CSS, HTML e JavaScript.

  5. Recarregue sua página da Web para ver as alterações.

Seu site pode usar um sistema de compilação que você precisa executar antes de poder ver as alterações. Os desenvolvedores da Web geralmente usam um sistema de compilação que observa as alterações salvas nos arquivos de código-fonte. Quando você salva uma alteração em um arquivo de código-fonte, o sistema de compilação cria essas alterações e, em seguida, atualiza automaticamente a página no navegador.

Se você usar esse sistema de compilação automatizado, ao fazer uma alteração em um arquivo de origem na ferramenta Fontes e salvá-lo, verá automaticamente essas alterações aplicadas à página da Web renderizada.

Limitações do recurso de espaço de trabalho com código-fonte transformado

Se você estiver usando uma estrutura moderna, ela poderá transformar seu código-fonte de um formato fácil de manter em um formato otimizado para ser executado o mais rápido possível. A guia Workspace na ferramenta Sources geralmente é capaz de mapear o código otimizado de volta para o código-fonte original, usando mapas de origem para JavaScript e CSS. No entanto, há muita variação em como cada estrutura usa mapas de origem.

O DevTools não dá suporte a todas as variações de estrutura. Se você tiver problemas ao usar espaços de trabalho com a estrutura de sua escolha ou identificar etapas específicas da estrutura necessárias, entre em contato para usar abrindo um problema no repositório MicrosoftEdge/DevTools .

Editando CSS usando a guia Estilos na ferramenta Elementos, ao usar a guia Espaço de trabalho da ferramenta Fontes

Se você usar um espaço de trabalho, em alguns casos, poderá editar o CSS na guia Estilos na ferramenta Elementos e ter as alterações salvas no arquivo mapeado no disco:

  • As edições feitas na guia Estilos na ferramenta Elementossão salvas no arquivo CSS no disco, se o DevTools tiver mapeado uma folha de estilos na página da Web e no arquivo no espaço de trabalho, como por um mapa de origem ou por conteúdo correspondente.

    Se você usar uma estrutura do sistema de compilação automática, as alterações serão salvas no arquivo de origem se o DevTools tiver sido capaz de mapear a folha de estilos para o arquivo de espaço de trabalho usando um mapa de origem.

    Dependendo do sistema de build automatizado ou da estrutura que você usa, o DevTools poderá salvar as alterações no disco, se não houver nenhuma etapa de build ou se houver uma etapa de build e um mapa de origem. A guia Estilos é mapeada para o arquivo CSS no disco e, portanto, as edições na guia Estilos são salvas no disco.

  • As edições feitas na guia Estilos na ferramenta Elementosnão são salvas no arquivo CSS no disco, se a folha de estilo não estiver mapeada para um arquivo de espaço de trabalho. A edição de CSS na guia Estilos da ferramenta Elementos perderá alterações; As alterações não são salvas no disco.

Se você estiver usando um Workspace, edite o CSS na ferramenta Sources (não na ferramenta Elements ), pois os arquivos de origem que você editar podem ser criados ou compilados por um script de build antes de serem servidos pelo servidor local. Ao editar na ferramenta Elementos , você pode estar editando a versão compilada e construída do arquivo, não o arquivo de origem.

Quando você usa um Workspace:

  1. Edite o arquivo na ferramenta Fontes.
  2. Salve a alteração.
  3. Construa novamente. Alguns sistemas de compilação fazem isso automaticamente, quando detectam uma alteração.
  4. Recarregue a página. Alguns servidores fazem isso automaticamente quando detectam uma alteração.

Limitações da guia Estilos da ferramenta Elementos

O uso da guia Estilos da ferramenta Elementos nem sempre funciona para todos os cenários. Suponha que seu projeto use uma estrutura ou pré-processador para escrever CSS, onde você não escreve CSS diretamente, mas escreve o equivalente a CSS usando uma linguagem diferente e uma estrutura de arquivo diferente. Tal projeto pode usar um sistema de compilação que então traduz, compila e combina o código semelhante a CSS em algo que o navegador possa entender.

Esse projeto pode gerar mapas de origem, para que o DevTools permita que você veja e edite seus arquivos de origem na guia Estilos da ferramenta Elementos. Mas, em alguns casos, isso pode não funcionar ou o projeto pode não usar mapas de origem.

Quando isso acontece, as alterações feitas na guia Estilos da ferramenta Elementos não são salvas nos arquivos da área de trabalho. Nesse caso, edite seus arquivos de origem na ferramenta Fontes . No cenário acima, os arquivos que usam um idioma diferente ficam visíveis na guia Espaço de trabalho da ferramenta Fontes , e você pode editar os arquivos de origem lá.

Em seguida, nos bastidores, todas as alterações salvas precisam ser reconstruídas e compiladas (o que pode acontecer automaticamente) e, em seguida, as alterações ficam visíveis na página da Web renderizada após uma atualização de página (o que pode acontecer automaticamente).

As substituições locais são um recurso do DevTools semelhante a um espaço de trabalho. Você pode usar uma substituição quando quiser experimentar alterações em uma página da Web e precisar exibir as alterações nos carregamentos da página da Web, mas não se preocupa em mapear suas alterações para o código-fonte da página da Web.

As Substituições Locais salvam as alterações feitas em uma página da Web em uma pasta de sua escolha e as organizam em uma estrutura de pastas que corresponde à URL dos recursos substituídos.

O recurso Substituições armazena uma cópia dos recursos da página da Web que você edita no DevTools. Quando você atualiza a página, o Microsoft Edge carrega a cópia modificada local dos arquivos em vez dos arquivos no servidor.

Consulte também:

As edições da árvore DOM da ferramenta Elementos são perdidas após a atualização

Para fazer alterações em um arquivo de origem HTML, você precisa usar a guia Espaço de trabalho da ferramenta Fontes, em vez da ferramenta Elementos.

Limitações das edições da árvore DOM da ferramenta >Elementos:

Na ferramenta Elementos , é possível alterar a representação DOM do documento HTML, que o mecanismo do navegador construiu quando carregou a página. No entanto, as alterações no DOM não podem ser mapeadas de volta para arquivos de origem HTML. Você pode fazer alterações no conteúdo HTML usando a árvore DOM na ferramenta Elementos , mas suas alterações na árvore DOM não são salvas em disco e afetam apenas a sessão atual do navegador.

Consulte também:

Limitações da guia Página da ferramenta >Fontes:

A guia Página da ferramenta Fontes não permite salvar as alterações no sistema de arquivos.

  • Um arquivo HTML aberto por meio da guia Página não pode ser editado.
  • Um arquivo CSS ou JS aberto por meio da guia Página pode ser editado, mas as edições não são preservadas nas atualizações da página da Web.

As etapas a seguir demonstram que as edições na árvore DOM da ferramenta Elementos não são preservadas nas atualizações de página:

  1. Configure a demonstração do Workspaces conforme descrito no tutorial do Workspace (ferramenta Fontes, guia Workspace).

  2. No DevTools, selecione a ferramenta Elementos (</>).

  3. Na árvore DOM, no elemento, selecione a cadeia de caracteres de DevTools Workspaces Demotexto , exclua-a<h1>, digite a cadeia de caracteres de I Love Caketexto e pressione Enter. A página da web renderizada mostra o novo texto do título, I Love Cake:

    Tentativa de alterar o HTML da árvore DOM na ferramenta Elementos

  4. Selecione a ferramenta Fontes , clique com o botão direito do mouse index.htmle selecione Abrir na pasta que contém.

    O Explorador de Arquivos ou o Finder é aberto.

  5. Abra o arquivo que está em seu /Demos/workspace/ diretório em um editor de texto, como o index.html Visual Studio Code. A alteração que você acabou de fazer não aparece; o cabeçalho ainda diz "Demonstração do DevTools Workspaces", em vez de "I Love Cake".

  6. No navegador, atualize a página de demonstração.

    A página é revertida para o título original, "Demonstração de Workspaces do DevTools", porque a árvore DOM com sua edição foi descartada e o DOM foi recriado do arquivo inalterado index.html que está em seu /Demos/workspace/ diretório.

Por que as edições da árvore DOM não são salvas

Alterar a árvore DOM nos Elementos, de acordo com a seção acima, não funciona.

  • A árvore de nós que você vê na ferramenta Elementos representa o DOM da página.

  • Para exibir uma página, um navegador busca HTML pela rede, analisa o HTML e o converte em uma árvore de nós DOM.

  • Se a página tiver algum JavaScript, esse JavaScript poderá adicionar, excluir ou alterar nós DOM. O CSS também pode alterar o DOM por meio da content propriedade.

  • O navegador eventualmente usa o DOM para determinar qual conteúdo ele deve apresentar aos usuários do navegador.

  • Portanto, o estado final da página que os usuários veem pode ser muito diferente do HTML que o navegador buscou.

  • Isso torna difícil para o DevTools resolver onde uma alteração feita na ferramenta Elementos deve ser salva, porque o DOM é afetado por HTML, JavaScript e CSS.

Resumindo, a árvore DOM, que o mecanismo do navegador construiu, é diferente do documento HTML que foi baixado do servidor.

Fazendo com que os pontos verdes "mapeados" apareçam nos arquivos

Se os pontos verdes "mapeados" pararem de aparecer nos arquivos no DevTools, como na guia Workspace ; ou se a ferramenta Alterações não mostrar as alterações esperadas:

  • Com o DevTools exibido, clique longamente ou clique com o botão direito do mouse no botão Atualizar no Microsoft Edge e selecione Atualização forçada (Ctrl+Shift+R).

    Um ponto verde "mapeado" ao lado de um arquivo no DevTools indica que o DevTools estabeleceu um mapeamento entre um recurso de rede da página recebida do servidor Web e o arquivo de origem local em seu /Demos/workspace/ diretório. O novo arquivo que você adicionar no DevTools deve ser retornado pelo servidor, a ser indicado como mapeado.

Se você adicionar um novo .js arquivo no espaço de trabalho e quiser que um círculo verde de "sincronização" apareça no arquivo adicionado .js e que o arquivo seja representado na ferramenta Alterações :

  1. Faça referência ao arquivo adicionado .js no arquivo HTML, como a linha <script src="test.js"></script> dentro da <body> tag.

  2. Verifique se há código no .js arquivo, como a linha console.log('hello from test.js');.

  3. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS). A alteração é salva e o asterisco desaparece.

  4. Com o DevTools exibido, clique longamente ou clique com o botão direito do mouse no botão Atualizar no Microsoft Edge e selecione Atualização forçada (Ctrl+Shift+R).

Consulte também:

Consulte também

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques.

Licença Creative Commons Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.

  • Last updated on