Partilhar via

Tutorial da área de trabalho (separador Área de Trabalho da ferramenta Origens)

Utilize os seguintes passos para utilizar DevTools como um IDE, como efetuar edições de páginas Web no separador Área de Trabalhoda ferramenta Origens, guardando as alterações aos ficheiros de origem no disco.

Pode ler ou seguir estes passos que mostram como configurar e utilizar uma área de trabalho no DevTools. Depois de configurar uma área de trabalho, as alterações que fizer aos ficheiros na área de trabalho são guardadas no seu computador local.

Passo 1: Clonar o repositório de Demonstrações do Edge para a unidade local

Primeiro, configure um diretório local que contém os ficheiros de origem da página Web, como a página Web de demonstração áreas de trabalho.

Clone o repositório MicrosoftEdge/Demos para a unidade local, incluindo a /workspaces/ pasta de demonstração, da seguinte forma:

  1. Se ainda não tiver terminado, transfira o git e instale-o.

  2. Aceda a MicrosoftEdge/Demonstrações numa nova janela ou separador.

  3. Clique no botão pendente Código e, em seguida, clique no botão Copiar URL para a área de transferência .

    O URL é copiado para a área de transferência: https://github.com/MicrosoftEdge/Demos.git

    Em alternativa, se tiver o GitHub Desktop instalado, clique em Abrir com o GitHub Desktop para clonar o repositório e ignore o passo da linha de comandos abaixo.

    Em alternativa, pode utilizar o painel Controlo de Código Fonte do Visual Studio Code para clonar o repositório e ignorar o passo da linha de comandos abaixo.

  4. Abra uma linha de comandos, como o git bash.

  5. Clone o repositório para a unidade local, introduzindo a cadeia de URL que copiou do repositório do GitHub. Se utilizar a linha de comandos do git bash:

    # Example location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git

Para obter detalhes sobre a clonagem de um repositório, consulte:

Continue com a secção seguinte.

Passo 2: Iniciar o servidor localhost no diretório de ficheiros de origem da página Web

  1. Se ainda não o tiver feito, instale uma versão atualizada do Node.js e npm a partir do Node.js.

    Veja também:

  2. Aceda a uma linha de comandos, como a shell do git bash ou o painel Terminal no Microsoft Visual Studio Code.

  3. Altere para o Demos diretório do workspaces repositório:

    cd ~/GitHub/Demos/workspaces
pwd

    Um diretório para utilização com o separador Área de Trabalho da ferramenta Origens pode ter qualquer nome. Este diretório de demonstração tem o nome /workspaces/.

  4. Crie um ramo de trabalho com o nome "teste" e mude para o mesmo (para evitar alterar os ficheiros da demonstração no ramo "main"):

    git checkout -b test

    É equivalente a:

    git branch test
git switch test

  5. Execute um dos seguintes comandos para iniciar o servidor Web:

    # Node.js option
npx http-server

    Para obter mais informações e opções, consulte Iniciar o servidor (npx http-server) em Instalar a extensão DevTools para Visual Studio Code.

    # Python 2 option
cd ~/GitHub/demos/workspaces
python -m SimpleHTTPServer

    # Python 3 option
cd ~/GitHub/demos/workspaces
python -m http.server

  6. Abra um separador no Microsoft Edge e aceda à versão alojada localmente do site. Normalmente, acede-se aolocalhost:8080 seguinte:

    Demonstração das Áreas de Trabalho de DevTools

    Outro URL equivalente comum é http://0.0.0.0:8080. O número de porta predefinido para a opção do servidor Python é 8000. O número de porta exato pode ser diferente.

    A página Web Demonstração de Áreas de Trabalho de DevTools é aberta.

    (A ligação na demonstração mais recente pode dizer "Editar ficheiro com áreas de trabalho" ou "Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens)".)

Veja também:

Continue com a secção seguinte.

Passo 3: Adicionar uma pasta área de trabalho na ferramenta Origens

Em seguida, defina uma Área de Trabalho em DevTools:

  1. Clique com o botão direito do rato na página Web Demonstração de Áreas de Trabalho de DevTools alojada localmente e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

    O DevTools é aberto.

  2. Clique no separador Origens (ícone da ferramenta Origens).

  3. No painel Navegador (à esquerda), clique no separador Área de Trabalho (que está agrupado com o separador Página ):

    O separador Área de Trabalho

  4. Clique no botão Adicionar pasta .

    É aberta a caixa de diálogo Selecionar Pasta .

  5. Aceda ao diretório clonado /Demos/workspace/ que criou. Por exemplo, na caixa de texto Pasta: introduza o caminho, como C:\Users\localAccount\GitHub\Demos\workspaces\.

  6. Clique no botão Selecionar Pasta .

    O DevTools pede-lhe se deve conceder acesso total às DevTools ao seu /workspaces/ diretório.

  7. Clique no botão Permitir para dar permissão às DevTools para ler e escrever no diretório.

    No separador Área de Trabalho encontram-se ícones de página que têm um ponto verde "mapeado", para index.html, script.jse styles.css. O ponto verde "mapeado" 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 diretório /Demos/workspace/ :

    O separador Área de Trabalho tem um ponto

Continue com a secção seguinte.

Passo 4: Guardar uma alteração CSS no disco (através do separador Estilos da ferramenta Elementos)

Em seguida, edite o CSS e guarde as alterações ao ficheiro de origem. Aqui, utilizamos o separador Estilos da ferramenta Elementos, assistido pelos respetivos controlos de interface de utilizador, embora possamos editar diretamente o ficheiro CSS no editor de ficheiros do separador Área de Trabalho da ferramenta Origens.

Para fazer uma alteração no ficheiro CSS e guardá-lo no disco com o separador Estilos da ferramenta Elementos:

  1. Na ferramenta Origens , no separador Área de Trabalho (agrupada com o separador Página ), selecione styles.css para abri-la no painel do editor. A color propriedade do h1 elemento está definida como fuchsia:

    Ver styles.css num editor de texto

  2. Selecione a ferramenta Elementos (ícone da ferramenta Elementos) ; em seguida, na árvore DOM, expanda o <body> elemento e, em seguida, selecione o <h1> elemento.

    O painel Estilos apresenta as regras CSS que são aplicadas ao <h1> elemento . O ícone de ficheiro mapeado (ícone de ficheiro mapeado) junto a styles.css:1 é uma página com um ponto verde "mapeado". O ponto verde "mapeado" significa que todas as alterações efetuadas a esta regra CSS são mapeadas styles.css no seu /Demos/workspace/ diretório:

    O ícone

  3. Altere o valor da color propriedade do <h1> elemento para laranja. Para tal, selecione o <h1> elemento na Árvore DOM. Na regra CSS para h1, clique em fuchsia, comece a escrever laranja e, em seguida, selecione laranja na lista de cores:

    Alterar a propriedade de cor no styles.css

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

    Explorador de Arquivos ou Finder é aberto.

  5. Abra a cópia do styles.css que está no seu /Demos/workspace/ diretório num editor de texto, como Visual Studio Code. A color propriedade está agora definida para a nova cor, que é cor de laranja neste exemplo. A alteração não foi feita apenas na cópia do ficheiro devolvido do servidor Web; a alteração também foi efetuada no ficheiro mapeado no diretório da área /Demos/workspace/ de trabalho.

  6. Atualize a página.

A cor do <h1> elemento ainda está definida para a nova cor. A alteração permanece numa atualização, porque quando efetuou a alteração, as DevTools guardaram a alteração no disco. Quando atualize a página, o servidor local serviu a cópia modificada do ficheiro a partir do disco.

Sugestão: Também pode alterar a cor ao clicar no relógio cor de fucshia para abrir o seletor de cores para escolher uma nova cor. O valor HEX para a cor que escolher é o nome da cor.

Continue com a secção seguinte.

Passo 5: Guardar uma alteração de HTML no disco (através do separador Área de Trabalho da ferramenta Origens)

Em seguida, edite HTML e guarde as alterações ao ficheiro de origem. Para guardar as alterações ao ficheiro HTML da página Web, adicione a pasta de código fonte no separador Área de Trabalho da ferramenta Origens e, em seguida, edite o HTML na ferramenta Origens. (As alterações não são efetuadas ao ficheiro de origem ao alterar apenas o HTML na árvore DOM na ferramenta Elementos .)

O separador Área de Trabalho de DevTools é semelhante a utilizar um editor para editar o ficheiro de origem HTML, mas permite editar o ficheiro de origem HTML diretamente nas DevTools.

  1. Continuando acima, em DevTools, clique no separador Origens (ícone da ferramenta Origens).).

  2. No painel Navegador à esquerda, no separador Área de Trabalho (agrupado com o separador Página ), selecione index.html.

    O separadorindex.html é aberto na ferramenta Origens .

  3. <h1> Na etiqueta, substitua "DevTools Workspaces Demo" por "I Love Cake".

    É apresentado um asterisco junto a index.html.

  4. Prima Ctrl+S (Windows, Linux) ou Comando+S (macOS).

    A alteração é guardada e o asterisco desaparece.

    Efetuou a alteração na listagem de ficheiros, em vez de na árvore DOM na ferramenta Elementos .

  5. Atualize a página. O cabeçalho na página composta muda para "I Love Cake", porque essa cadeia foi guardada no index.html seu diretório mapeado /Demos/workspace/ :

    Alterar HTML a partir da ferramenta Origens

  6. Na ferramenta Origens , clique com o botão index.htmldireito do rato e, em seguida, selecione Abrir na pasta que contém.

    Explorador de Arquivos ou Finder é aberto.

  7. Abra a cópia do index.html que está no seu /Demos/workspace/ diretório num editor de texto, como Visual Studio Code.

    O <h1> elemento contém o novo texto, "I Love Cake", porque efetuou a alteração com o editor da ferramenta Origens para editar index.html e, em seguida, guardou a alteração e esse ficheiro foi mapeado numa área de trabalho (o separador Área de Trabalho ), indicado por um ponto verde "mapeado" no ícone do ficheiro.

    Muitos programadores não escrevem HTML diretamente, mas utilizam abordagens como:

    • Uma linguagem do lado do servidor, como Java, Python ou PHP.
    • Um gerador de sites, como a Eleventy.
    • Uma arquitetura do lado do cliente que utiliza código JavaScript.
    • Uma linguagem de marcação diferente de HTML, como Markdown.

    Isto significa que, na prática, poucos programadores alteram ficheiros HTML no separador Área de Trabalho. A maioria dos devs produz ficheiros HTML com um tipo diferente de ficheiro de origem, como um ficheiro de origem JS do componente React e, em seguida, reconstrói e recarrega (o que pode acontecer automaticamente).

  8. 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).

    No separador Área de Trabalho , os pontos verdes "mapeados" são apresentados em todos os ficheiros HTML, CSS e JS.

Continue com a secção seguinte.

Passo 6: Guardar uma alteração de JavaScript no disco

A partir de cima, em seguida, irá editar o ficheiro JavaScript da demonstração da área de trabalho e guardar as alterações ao ficheiro de origem. Para guardar edições num ficheiro de origem JavaScript, pode utilizar DevTools como um IDE, depois de adicionar a pasta de código fonte no separador Área de Trabalho da ferramenta Origens . Em seguida, pode editar e guardar o ficheiro JavaScript no editor da ferramenta Origens .

Na página Web de demonstração composta, para modelar a hiperligação Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens) com itálico:

  1. Em DevTools, selecione a ferramenta Origens e, em seguida, selecione o separador Área de Trabalho , que está agrupado com o separador Página .

  2. No separador Área de Trabalho , selecione script.js.

    script.js é aberto num separador no painel do editor da ferramenta Origens .

  3. No painel do editor, adicione o seguinte código à parte inferior do script.js:

    document.querySelector('a').style = 'font-style:italic';

    É apresentado um asterisco no script.js separador.

  4. Prima Ctrl+S (Windows, Linux) ou Comando+S (macOS).

    script.js é guardado e o asterisco é removido do script.js separador.

  5. Atualize a página.

  6. Se já não existir um ponto verde "mapeado" no ficheiro HTML, JS ou CSS, 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).

    A hiperligação Editar ficheiros com Áreas de Trabalho (ou Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens)) na página está agora em itálico:

    A ligação na página está agora em itálico

Continue com a secção seguinte.

Passo 7: Adicionar um ficheiro de .js com o DevTools

  1. Na ferramenta Origens , no separador Área de Trabalho , clique com o botão direito do rato na /workspaces/ pasta e, em seguida, selecione o menuite Novo ficheiro .

    É adicionado um ficheiro com o nome NewFile :

    Um novo ficheiro adicionado através do separador Área de Trabalho

  2. Clique com o botão NewFile direito do rato no separador Área de Trabalho e, em seguida, selecione Mudar o Nome.

  3. Mude o nome do ficheiro para test.js.

  4. Em test.js, adicione a linha: console.log('hello from test.js');

  5. Na ferramenta Origens , no separador Área de Trabalho , selecione index.html.

  6. Em index.html, abaixo da linha <script src="./script.js" defer></script>, adicione a linha: <script src="./test.js" defer></script>

  7. Prima Ctrl+S (Windows, Linux) ou Comando+S (macOS).

    index.html é guardado.

  8. 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).

    No separador Área de Trabalho , os pontos verdes "mapeados" são apresentados em todos os ficheiros HTML, CSS e JS:

    Adicionar uma referência ao ficheiro JS no ficheiro HTML e pontos verdes

Esta ação conclui o tutorial.

Se quiser reverter as edições na sua /workspace/ pasta, pode utilizar comandos git numa linha de comandos ou utilizar o GitHub Desktop para reverter as alterações no ramo atual, como "principal" ou "teste".

Confira também

Observação

Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. 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