Partilhar via

Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens)

Pode utilizar o DevTools como um Ambiente de Desenvolvimento Integrado (IDE) no browser. Para guardar edições nos ficheiros de origem da página Web, adicione a pasta de código fonte da página Web no separador Área de Trabalho da ferramenta Origens . Em seguida, pode editar e guardar ficheiros HTML, CSS e JS no editor da ferramenta Origens (ou na Ferramenta de origem rápida no painel Vista Rápida na parte inferior de DevTools).

Pode criar, copiar, mudar o nome e eliminar ficheiros de origem a partir do separador Área de Trabalho .

Utilize o separador Área de Trabalho na ferramenta Origens para apresentar e editar os conteúdos de uma pasta no seu computador a partir da ferramenta Origens . As alterações efetuadas aos ficheiros numa área de trabalho são guardadas no seu computador.

A forma típica de configurar uma área de trabalho é configurá-la para apresentar os ficheiros de origem do código de front-end do seu site. Desta forma, utiliza as DevTools para inspecionar o seu site e para fazer alterações aos respetivos ficheiros de origem. Desta forma, as alterações efetuadas são guardadas no seu computador, em vez de perdidas quando atualiza a página.

Consulte também:

Descrição geral da funcionalidade de área de trabalho DevTools

Uma área de trabalho de DevTools permite-lhe ver o código fonte do seu site que está no seu computador e fazer alterações à mesma, a partir da ferramenta Origens , para que as alterações sejam mantidas nas atualizações da página.

Eis um cenário típico para utilizar uma área de trabalho:

  1. Tenha o código fonte do seu site no 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 num URL de desenvolvimento local, como http://localhost:8080.

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

  4. Utilize o separador Área de Trabalho da ferramenta Origens em DevTools para alterar o código fonte do seu site, incluindo os ficheiros CSS, HTML e JavaScript.

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

O seu site pode utilizar um sistema de compilação que tem de executar antes de poder ver as alterações. Os programadores Web utilizam frequentemente um sistema de compilação que observa as alterações guardadas nos ficheiros de código fonte. Quando guarda uma alteração num ficheiro de código fonte, o sistema de compilação cria essas alterações e, em seguida, atualiza automaticamente a página no browser.

Se utilizar um sistema de compilação automatizado, quando efetuar uma alteração a um ficheiro de origem na ferramenta Origens e guardá-lo, verá automaticamente essas alterações aplicadas à página Web composta.

Limitações da funcionalidade da área de trabalho com código fonte transformado

Se estiver a utilizar uma arquitetura moderna, poderá transformar o código fonte a partir de um formato fácil de manter num formato otimizado para ser executado o mais rapidamente possível. Normalmente, o separador Área de Trabalho na ferramenta Origens consegue mapear o código otimizado de volta para o código fonte original, utilizando mapas de origem para JavaScript e CSS. No entanto, existe muita variação na forma como cada arquitetura utiliza mapas de origem.

O DevTools não suporta todas as variações de arquitetura. Se tiver problemas ao utilizar áreas de trabalho com a sua arquitetura de eleição ou identificar os passos específicos da arquitetura que são necessários, contacte para utilizar ao abrir um problema no repositório MicrosoftEdge/DevTools .

Editar CSS com o separador Estilos na ferramenta Elementos ao utilizar o separador Área de Trabalho da ferramenta Origens

Se utilizar uma área de trabalho, em alguns casos, pode editar CSS no separador Estilos na ferramenta Elementos e guardar as alterações no ficheiro mapeado no disco:

  • As edições que efetuar no separador Estilos na ferramenta Elementossão guardadas no ficheiro CSS no disco, se a DevTools tiver mapeado uma folha de estilos na página Web e o ficheiro na área de trabalho, como por exemplo, por um mapa de origem ou por conteúdo correspondente.

    Se utilizar uma arquitetura de sistema de compilação automática, as alterações serão guardadas no ficheiro de origem se o DevTools conseguir mapear a folha de estilos para o ficheiro da área de trabalho com um mapa de origem.

    Consoante o sistema ou arquitetura de compilação automatizado que utilizar, as DevTools poderão guardar alterações no disco, se não houver nenhum passo de compilação ou se existir um passo de compilação e um mapa de origem. O separador Estilos é mapeado para o ficheiro CSS no disco e, por isso, as edições no separador Estilos são guardadas no disco.

  • As edições que efetuar no separador Estilos na ferramenta Elementosnão são guardadas no ficheiro CSS no disco, se a folha de estilos não estiver mapeada para um ficheiro de área de trabalho. A edição de CSS no separador Estilos da ferramenta Elementos perderá alterações; as alterações não são guardadas no disco.

Se estiver a utilizar uma Área de Trabalho, edite o CSS na ferramenta Origens (não na ferramenta Elementos ), porque os ficheiros de origem que editar podem ser criados ou compilados por um script de compilação antes de serem servidos pelo servidor local. Ao editar na ferramenta Elementos , poderá estar a editar a versão compilada e compilada do ficheiro e não o ficheiro de origem.

Quando utiliza uma Área de Trabalho:

  1. Edite o ficheiro na ferramenta Origens .
  2. Guarde a alteração.
  3. Crie novamente. Alguns sistemas de compilação fazem-no automaticamente quando detetam uma alteração.
  4. Recarregue a página. Alguns servidores fazem-no automaticamente quando detetam uma alteração.

Limitações do separador Estilos da ferramenta Elementos

A utilização do separador Estilos da ferramenta Elementos pode nem sempre funcionar em todos os cenários. Suponha que o projeto utiliza uma arquitetura ou um pré-processador para escrever CSS, onde não escreve diretamente CSS, mas escreve o equivalente ao CSS com uma linguagem diferente e uma estrutura de ficheiros diferente. Um projeto deste tipo pode utilizar um sistema de compilação que, em seguida, traduz, compila e combina o código semelhante ao CSS em algo que o browser possa compreender.

Tal projeto pode gerar mapas de origem, para que o DevTools lhe permita ver e editar os seus ficheiros de origem no separador Estilos da ferramenta Elementos. No entanto, em alguns casos, isso pode não funcionar ou o projeto pode não utilizar mapas de origem.

Quando isso acontece, quaisquer alterações efetuadas no separador Estilos da ferramenta Elementos não são guardadas nos ficheiros da área de trabalho. Nesse caso, edite os ficheiros de origem na ferramenta Origens . No cenário acima, os ficheiros que utilizam um idioma diferente estão visíveis no separador Área de Trabalho da ferramenta Origens e pode editar os ficheiros de origem aí.

Em seguida, nos bastidores, todas as alterações guardadas têm de ser recriadas e compiladas (o que pode acontecer automaticamente) e, em seguida, as alterações são visíveis na página Web composta após uma atualização da página (o que pode acontecer automaticamente).

Substituições locais é uma funcionalidade de DevTools semelhante a uma área de trabalho. Pode utilizar uma substituição quando pretender experimentar alterações a uma página Web e tem de apresentar as alterações entre cargas de páginas Web, mas não se importa em mapear as alterações ao código fonte da página Web.

As Substituições Locais guardam as alterações que efetua a uma página Web numa pasta à sua escolha e organiza-as numa estrutura de pastas que corresponde ao URL dos recursos substituídos.

A funcionalidade Substituições armazena uma cópia dos recursos da página Web que edita no DevTools. Quando atualiza a página, o Microsoft Edge carrega a cópia modificada local dos ficheiros em vez dos ficheiros 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 a um ficheiro de origem HTML, tem de utilizar o separador Área de Trabalho da ferramenta Origens, 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 motor do browser construiu quando carregou a página. No entanto, as alterações ao DOM não podem ser mapeadas de volta para ficheiros de origem HTML. Pode fazer alterações ao conteúdo HTML com a árvore DOM na ferramenta Elementos , mas as alterações à árvore DOM não são guardadas no disco e afetam apenas a sessão atual do browser.

Consulte também:

Limitações do separador Página da ferramenta >Origens:

O separador Página da ferramenta Origens não lhe permite guardar alterações no sistema de ficheiros.

  • Não é possível editar um ficheiro HTML aberto através do separador Página .
  • Um ficheiro CSS ou JS aberto através do separador Página pode ser editado, mas as edições não são preservadas nas atualizações da página Web.

Os passos seguintes 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 Áreas de trabalho conforme descrito no tutorial área de trabalho (separador Área de Trabalho da ferramenta Origens).

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

  3. Na árvore DOM, no elemento, selecione a cadeia de DevTools Workspaces Demotexto , elimine-a, escreva a cadeia I Love Cakede texto e, em <h1> seguida, prima Enter. A página Web composta mostra o novo texto do cabeçalho, I Love Cake:

    A tentar alterar HTML da árvore DOM na ferramenta Elementos

  4. Selecione a ferramenta Origens , clique com o botão direito do rato index.htmle, em seguida, selecione Abrir na pasta que contém.

    Explorador de Arquivos ou Finder é aberto.

  5. Abra o index.html ficheiro que está no seu /Demos/workspace/ diretório num editor de texto, como Visual Studio Code. A alteração que acabou de efetuar não é apresentada; O cabeçalho continua a ler "Demonstração de Áreas de Trabalho de DevTools", em vez de "I Love Cake".

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

    A página reverte para o cabeçalho original , "Demonstração de Áreas de Trabalho de DevTools", porque a árvore DOM com a sua edição foi eliminada e o DOM foi recriado a partir do ficheiro inalterado index.html que se encontra no seu /Demos/workspace/ diretório.

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

A alteração da árvore DOM nos Elementos, de acordo com a secção acima, não funciona.

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

  • Para apresentar uma página, um browser obtém HTML através da rede, analisa o HTML e, em seguida, converte-o numa árvore de nós DOM.

  • Se a página tiver javaScript, esse JavaScript pode adicionar, eliminar ou alterar nós DOM. O CSS também pode alterar o DOM através da content propriedade .

  • Eventualmente, o browser utiliza o DOM para determinar que conteúdo deve apresentar aos utilizadores do browser.

  • Por conseguinte, o estado final da página que os utilizadores veem pode ser muito diferente do HTML que o browser obteve.

  • Isto dificulta que as DevTools resolve em que uma alteração efetuada na ferramenta Elementos deve ser guardada, porque o DOM é afetado por HTML, JavaScript e CSS.

Resumindo, a árvore DOM, que o motor do browser construiu, é diferente do documento HTML que foi transferido do servidor.

Fazer com que os pontos "mapeados" verdes apareçam nos ficheiros

Se os pontos verdes "mapeados" deixarem de aparecer em ficheiros em DevTools, como no separador Área de Trabalho ; ou se a ferramenta Alterações não mostrar as alterações esperadas:

  • Com As DevTools apresentadas, clique com o botão direito do rato ou clique com o botão direito do rato no botão Atualizar no Microsoft Edge e, em seguida, selecione Atualização fixa (Ctrl+Shift+R).

    Um ponto "mapeado" verde junto a um ficheiro no DevTools indica que a DevTools estabeleceu um mapeamento entre um recurso de rede da página que é recebida do servidor Web e o ficheiro de origem local no seu /Demos/workspace/ diretório. O novo ficheiro que adicionar às DevTools tem de ser devolvido pelo servidor, para ser indicado como mapeado.

Se adicionar um novo .js ficheiro na área de trabalho e quiser que seja apresentado um círculo de "sincronização" verde no ficheiro adicionado .js e que o ficheiro seja representado na ferramenta Alterações :

  1. Referencie o ficheiro adicionado .js no ficheiro HTML, como a linha <script src="test.js"></script> dentro da <body> etiqueta.

  2. Certifique-se de que existe código no .js ficheiro, como a linha console.log('hello from test.js');.

  3. Prima Ctrl+S (Windows, Linux) ou Comando+S (macOS). A alteração é guardada e o asterisco desaparece.

  4. Com As DevTools apresentadas, clique com o botão direito do rato ou clique com o botão direito do rato no botão Atualizar no Microsoft Edge e, em seguida, selecione Atualização fixa (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 é da autoria de Kayce Bascos.

Licença Creative Commons Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.

  • Last updated on