Partilhar via

Comece por clicar no botão Iniciar Instância

Utilize este tutorial para saber como abrir e fechar DevTools ao clicar no botão Iniciar Instância para experimentar a página Web de demonstração Êxito . Esta abordagem abre a página Web com êxito predefinida para edição, para que possa praticar e começar a utilizar o DevTools. Esta abordagem é proeminente na IU e abre os separadores DevTools no modo de não depuração.

Esta forma de abrir o DevTools é útil para estes cenários simples:

  • Se quiser experimentar editar a página Predefinida, Êxito com o DevTools.

  • Se quiser inspecionar uma página especificada através de um URL e não precisar do modo de Depuração. Para abrir uma página Web diferente, pode colar um URL ou caminho de ficheiro, na Barra de endereço.

  • Se não tiver uma pasta aberta e quiser experimentar alterar o CSS numa página especificada através de um URL, sem editar um ficheiro de origem local.

Passo 1: Instalar DevTools e pré-requisitos

  1. Se ainda não o fez, siga os passos em Instalar a extensão DevTools para Visual Studio Code e, em seguida, continue abaixo. Não precisa de instalar e iniciar um servidor Web para o tutorial atual, mas é recomendado.

Passo 2: Clique no botão Iniciar Instância

  1. Em Visual Studio Code, selecione Ficheiro>Nova Janela. Inicialmente, não é aberta nenhuma pasta.

  2. Na Barra de Atividade, clique em Ferramentas do Microsoft Edge (ícone ferramentas do Microsoft Edge). É aberta a Barra Lateral das Ferramentas do Microsoft Edge :

    O botão Iniciar Instância sem pasta aberta

  3. Clique no botão Iniciar Instância . O separador DevTools do Edge é aberto e o separador DevTools do Edge: Browser é aberto, apresentando a página predefinida Êxito:

    O resultado predefinido da Instância de Iniciação: os separadores

    O ficheiro de origem da página Êxito é um ficheiro autónomo .html num diretório na sua unidade. Este é um único .html ficheiro que inclui regras CSS (num <style> elemento). Também inclui uma instrução JavaScript console (num <script> elemento).

    Na Barra de endereço do browser DevTools, existe um file:/// caminho (em vez de um URL), como file:///C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html.

    A barra de ferramentas de Depuração não abre, a Consola de Depuração não abre na parte inferior e a Barra Lateral Executar e Depurarcom o Painel de Monitorização não é aberta. Isto indica que Visual Studio Code não está no modo de Depuração.

    Pode modificar o CSS dos ficheiros locais e introduzir caminhos de ficheiro locais ou URLs de localhost na Barra de endereço e interagir com páginas de aplicações Web locais.

Passo 3: Abrir uma pasta para garantir que a edição é permitida

Tenha em atenção que não existe nenhuma pasta aberta no Visual Studio Code. Em muitos casos, para utilizar DevTools para editar em vez de apenas inspecionar uma página Web, tem de abrir uma pasta que contenha ficheiros de origem que correspondam à página Web apresentada. Abrir uma pasta proporciona a maior flexibilidade para que possa abrir um URL ou um caminho de ficheiro na Barra de endereço do separador DevTools do Edge: Browser e ter a funcionalidade DevTools completa.

Abrir uma pasta dá-lhe a oportunidade de conceder confiança à pasta, para que não receba uma mensagem de erro quando tenta alterar os ficheiros de origem. Caso contrário, poderá receber uma mensagem de erro porque a pasta que contém a página Êxito não é fidedigna e o CSS espelho edição está a tentar editar o CSS no ficheiro de origem index.html nessa pasta.

  1. No separador DevTools: Browser do Edge , na Barra de endereço, selecione e copie o caminho do ficheiro, mas não o nome do ficheiro, como C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/.

  2. Na Barra> de Atividade Explorer, clique no botão Abrir Pasta. Na caixa de diálogo Abrir Pasta , cole ou selecione o caminho que copiou acima. Para colar, no Windows, poderá ter de alterar / para \ em todo o caminho. Em seguida, clique no botão Selecionar Pasta .

    Quando abrir uma pasta pela primeira vez, tem de confirmar que confia nos autores dos ficheiros nesta pasta:

    Confia nos autores nos ficheiros desta pasta?

  3. Clique no botão Sim, confio nos autores .

    Poderá ter de iniciar as DevTools novamente, da seguinte forma:

  1. Na Barra de Atividade, clique em Ferramentas do Microsoft Edge (botão Ferramentas do Microsoft Edge). A Barra Lateral das Ferramentas do Microsoft Edge é aberta.

  2. Clique no botão Iniciar Instância . O separador DevTools do Edge é aberto e o separador DevTools do Edge: Browser é aberto, apresentando a página predefinida Êxito.

Passo 4: Editar CSS

  1. No separador DevTools do Edge , clique no botão Selecionar um elemento na página para inspecioná-lo (ícone inspecionar ferramenta), por vezes denominado botão Inspecionar .

  2. No separador DevTools do Edge: Browser , paire o cursor sobre diferentes partes da página, enquanto vê a árvore DOM da ferramenta Elementos expandir e atualizar.

  3. Clique no cabeçalho Êxito! , que é um <h2> elemento.

  4. No separador Estilos da ferramenta Elementos no separador DevTools do Edge , na secção de declaração h2 não itálico, clique à direita da margin-bottom regra.

  5. Introduza uma nova regra CSS e, em seguida, font-size: 5emprima Enter. A ortografia é semelhante à regra apresentada na secção itálico h2 da folha de estilos do agente de utilizador abaixo da mesma.

    index.htmlé aberto, editado automaticamente pelo CSS espelho a editar para adicionar a linha font-size: 5em;. Desloque-se para essa linha, na secção h2.

Passo 5: Dispor separadores

  1. No separador DevTools do Edge , na secção h2 não itálico, clique na font-size regra CSS que introduziu e, em seguida, prima Seta Para Cima e Seta Para Baixo. O valor em index.html é editado automaticamente pelo CSS espelho a editar.

  2. No separador DevTools do Edge , clique no botão Alternar screencast algumas vezes. O separador Edge DevTools: Browser é aberto e fechado, poupando espaço.

  3. No separador DevTools: Browser do Edge , clique no botão Fechar DevTools ou Abrir DevTools algumas vezes. O outro separador DevTools é aberto e fechado, poupando espaço.

  4. Na parte superior do Visual Studio Code, clique com o botão direito do rato nos separadores e disponha-os para mostrar os vários separadores ao mesmo tempo:

    • A Barra Lateral a mostrar os Destinos das Ferramentas> do Microsoft Edge.
    • O index.html editor.
    • O separador DevTools do Edge .
    • O separador Edge DevTools: Browser .

    Edição da página com êxito do tamanho do CSS h2

Passo 6: Ver JavaScript

  1. No separador DevTools do Edge , clique no separador da ferramenta Consola . index.html contém um <script> elemento que contém uma instrução console.info('Hello from the startpage!')JavaScript , que produz "Olá da página inicial!"

Passo 7: Abrir um ficheiro de .html diferente com a Barra de endereço

Ao introduzir um caminho de ficheiro na Barra de endereço do separador Edge DevTools: Browser , o botão Iniciar Instância também pode ser utilizado para abrir um ficheiro diferente .html em vez da página Êxito. Vamos demonstrar isso abaixo. No entanto, clicar com o botão direito do rato num .html ficheiro no Explorer é a principal forma de abrir um .html ficheiro que não seja a página Web Êxito e as ferramentas são abertas no modo de Depuração.

  1. No Visual Studio Code, selecioneAbrir Pasta de Ficheiros> (ou Abrir Recentes). Abra a \Demos\demo-to-do\ pasta do repositório Demos que clonou, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

  2. Se lhe for pedido, clique no botão Sim, confio no botão autores . Além de conceder fidedignidade, a abordagem Iniciar Instância não requer realmente abrir uma pasta, se especificar um caminho de ficheiro em vez de um URL no browser DevTools.

  3. Se os separadores DevTools do Edge ainda não estiverem abertos, na Barra de Atividade, clique em Ferramentas do Microsoft Edge (ícone ferramentas do Microsoft Edge) e, em seguida, clique no botão Iniciar Instância :

    O botão Iniciar Instância sem pasta aberta

  4. Na Barra de Atividade, selecione Explorer e, em seguida, clique com o botão direito do rato em \demo-to-do\index.html>Copiar Caminho.

  5. No Visual Studio Code, no separador DevTools do Edge: Browser, na barra Endereço, cole o caminho de ficheiro local que obteve acima, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html. A aplicação de demonstração a fazer é aberta. Na Barra de endereço, o file:/// prefixo é adicionado e as barras invertidas (no Windows) são alteradas para barras reencaminhadas; por exemplo: file:///C:/Users/username/Documents/GitHub/Demos/demo-to-do/index.html.

  6. Na aplicação de demonstração, introduza uma tarefa, como testar.

  7. Na ferramenta Elementos , no separador Estilos , altere um valor CSS, como: clique no tamanho do ponto em e, em body { font-size: 11pt;} seguida, altere o valor. O ficheiro correspondente .css na pasta que abriu é aberto e é editado automaticamente para corresponder às alterações efetuadas no separador Estilos (mas não é guardado).

Passo 8: Abrir um URL com a Barra de endereço

A Barra de endereço que resulta do botão Iniciar Instância pode ser utilizada para abrir um URL num servidor. No entanto, o botão Iniciar Projeto , juntamente com um URL armazenado no launch.json, é a principal forma de abrir uma página Web ao especificar um URL e, em seguida, as ferramentas abrem no modo de Depuração.

  1. Se o servidor localhost estiver em execução, cole um URL de localhost, como http://localhost:8080. Em alternativa, cole o URL do servidor github.io, https://microsoftedge.github.io/Demos/demo-to-do/.

    Se quiser utilizar o CSS espelho editar para editar os seus ficheiros de origem, terá de abrir uma pasta no Visual Studio Code; caso contrário, desmarque a caixa de verificação de edição espelho CSS no separador Estilos na ferramenta Elementos no separador DevTools do Edge. Desmarcar a caixa de verificação impede mensagens de erro sobre mapeamento e espelho editar quando experimenta alterar o CSS no DevTools e não forneceu um ficheiro de origem CSS para DevTools.

  2. Na aplicação de demonstração, introduza uma tarefa, como testar.

  3. Na ferramenta Elementos , no separador Estilos , altere um valor CSS, como: clique no tamanho do ponto em e, em body { font-size: 11pt;} seguida, altere o valor. O ficheiro correspondente .css na pasta que abriu é aberto e é editado automaticamente para corresponder às alterações efetuadas no separador Estilos (mas não é guardado).

Passo 9: Fechar DevTools

  1. Clique em Fechar (x) no separador DevTools do Edge e no separador DevTools do Edge: Browser , se estes separadores estiverem abertos.

  2. Selecione Barra de> AtividadeFerramentas do Microsoft Edge. Se a secção Destinos listar quaisquer destinos, paire o cursor sobre o lado direito da instância de destino e, em seguida, clique em Fechar instância (x). É apresentado o botão Iniciar Instância , que indica que todas as instâncias de DevTools estão fechadas.

    Fechar As DevTools abertas através da Instância de Iniciação

    Tenha em atenção que, na captura de ecrã acima, Visual Studio Code não está no modo de Depuração; por exemplo, não existe uma barra de ferramentas de Depuração. Se houvesse uma barra de ferramentas de Depuração, poderia fechar As DevTools clicando no botão Parar .

  3. Feche index.html sem guardar as alterações.

  4. SelecioneFechar Pasta deFicheiros>.

Veja também:

Concluiu o tutorial "Introdução ao clicar no botão Iniciar Instância". Recomenda-se que também faça os outros tutoriais; veja Começar a utilizar a extensão DevTools para Visual Studio Code.

Confira também

GitHub:

  • Last updated on