Comece clicando no botão Launch Instance

Use este tutorial para saber como abrir e fechar o DevTools clicando no botão Iniciar instância para experimentar a página da Web de demonstração de sucesso . Essa abordagem abre a página da Web padrão Success para edição, para que você possa praticar e começar a usar o DevTools. Essa abordagem é proeminente na interface do usuário e abre as guias do DevTools no modo de não depuração.

Essa maneira de abrir o DevTools é útil para esses cenários simples:

  • Se você quiser experimentar editar a página de Sucesso padrão usando o DevTools.

  • Se você deseja inspecionar uma página especificada usando uma URL e não precisa do modo de depuração. Para abrir uma página da Web diferente, você pode colar uma URL ou um caminho de arquivo na Barra de endereços.

  • Se você não tiver uma pasta aberta e quiser experimentar alterar o CSS em uma página especificada usando uma URL, sem editar um arquivo de origem local.

Etapa 1: Instalar o DevTools e pré-requisitos

  1. Se você ainda não fez isso, siga as etapas em Instalando a extensão DevTools para Visual Studio Code e continue abaixo. Você não precisa instalar e iniciar um servidor Web para o presente tutorial, mas é recomendável.

Etapa 2: Clique no botão Launch Instance

  1. No Visual Studio Code, selecione Arquivo>Nova Janela. Inicialmente, nenhuma pasta é aberta.

  2. Na Barra de Atividades, clique em Ferramentas do Microsoft Edge (ícone de Ferramentas do Microsoft Edge). A Barra Lateral de Ferramentas do Microsoft Edge é aberta:

    O botão Launch Instance sem nenhuma pasta aberta

  3. Clique no botão Launch Instance . A guia DevTools do Edge é aberta e a guia DevTools do Edge: Navegador é aberta, exibindo a página de sucesso padrão:

    O resultado padrão da Instância de Execução: as guias 'DevTools do Edge'

    O arquivo de origem da página Sucesso é um arquivo independente .html em um diretório na sua unidade. Este é um único .html arquivo que inclui regras CSS (em um <style> elemento). Ele também inclui uma instrução JavaScript console (em um <script> elemento).

    Na barra de endereços do navegador DevTools, há um file:/// caminho (em vez de uma URL), como file:///C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html.

    A barra de ferramentas Depurar não abre, o Console de Depuração não abre na parte inferior e a Barra Lateral Executar e Depurar com o painel Inspeção não abre. Isso indica que o Visual Studio Code não está no modo de depuração.

    Você pode modificar o CSS dos arquivos locais e inserir caminhos de arquivo local ou URLs de host local na barra de endereços e interagir com páginas de aplicativos Web locais.

Etapa 3: Abra uma pasta para garantir que a edição seja permitida

Observe que nenhuma pasta está aberta no Visual Studio Code. Em muitos casos, para usar o DevTools para editar em vez de apenas inspecionar uma página da Web, você deve abrir uma pasta que contenha arquivos de origem que correspondam à página da Web exibida. Abrir uma pasta oferece mais flexibilidade para que você possa abrir uma URL ou um caminho de arquivo na barra de endereços do Edge DevTools: guia do navegador e ter funcionalidade completa do DevTools.

Abrir uma pasta oferece a oportunidade de conceder confiança à pasta, para que você não receba uma mensagem de erro ao tentar alterar os arquivos de origem. Caso contrário, você poderá receber uma mensagem de erro porque a pasta que contém a página Sucesso não é confiável e a edição de espelho CSS está tentando editar o CSS no index.html arquivo de origem nessa pasta.

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

  2. No Activity BarExplorer>, clique no botão Open Folder. Na caixa de diálogo Abrir Pasta , cole ou selecione o caminho copiado acima. Para colar, no Windows, talvez seja necessário alterar / para \ ao longo do caminho. Em seguida, clique no botão Selecionar Pasta .

    Na primeira vez que abrir uma pasta, você deverá confirmar que confia nos autores dos arquivos nesta pasta:

    Você confia nos autores nos arquivos desta pasta?

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

    Talvez seja necessário iniciar o DevTools novamente, da seguinte maneira:

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

  2. Clique no botão Launch Instance . A guia DevTools do Edge é aberta e a guia DevTools do Edge: Navegador é aberta, exibindo a página Êxito padrão.

Etapa 4: Editar CSS

  1. Na guia DevTools do Edge , clique no botão Selecionar um elemento na página para inspecioná-lo (ícone da ferramenta Inspecionar), às vezes chamado de botão Inspecionar .

  2. No Edge DevTools: guia Navegador , passe o mouse sobre diferentes partes da página, enquanto observa a árvore DOM da ferramenta Elementos se expandir e atualizar.

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

  4. Na guia Estilos da ferramenta Elementos na guia DevTools do Edge , na seção de declaração h2 não itálica, clique à direita da margin-bottom regra.

  5. Insira uma nova regra font-size: 5emCSS e pressione Enter. A ortografia é semelhante à regra mostrada na seção h2 em itálico da folha de estilo do agente do usuário abaixo dela.

    index.htmlé aberto, editado automaticamente pela edição de espelho CSS para adicionar a linha font-size: 5em;. Role até essa linha, na seção h2.

Etapa 5: organizar as guias

  1. Na guia DevTools do Edge , na seção h2 não itálica, clique na regra CSS inserida e pressione Seta font-sizepara cima e Seta para baixo. O valor é index.html editado automaticamente, pela edição de espelho CSS.

  2. Na guia Edge DevTools , clique no botão Alternar screencast algumas vezes. The Edge DevTools: A guia Browser abre e fecha, economizando espaço.

  3. No Edge DevTools: guia Navegador , clique no botão Fechar DevTools ou Abrir DevTools algumas vezes. A outra guia DevTools abre e fecha, economizando espaço.

  4. Na parte superior do Visual Studio Code, clique com o botão direito do mouse nas guias e organize-as para mostrar as várias guias ao mesmo tempo:

    • A Barra Lateral, mostrandoos Destinosdas Ferramentas> do Microsoft Edge.
    • O index.html editor.
    • A guia DevTools do Edge .
    • The Edge DevTools: guia Browser .

    Edição de página com êxito h2 Tamanho CSS

Etapa 6: visualizar o JavaScript

  1. Na guia DevTools do Edge , clique na guia Console . index.html contém um <script> elemento que contém uma instrução console.info('Hello from the startpage!')JavaScript , que gera "Olá da página inicial!"

Etapa 7: abrir um arquivo de .html diferente usando a barra de endereços

Ao inserir um caminho de arquivo na barra de endereços do Edge DevTools: guia do navegador , o botão Iniciar instância também pode ser usado para abrir um arquivo diferente .html em vez da página Êxito. Vamos demonstrar isso abaixo. No entanto, clicar com o botão direito do mouse em um .html arquivo no Explorer é a principal maneira de abrir um .html arquivo que não seja a página da Web Sucesso e as ferramentas sejam abertas no modo de depuração.

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

  2. Se solicitado, clique no botão Sim, confio nos autores . Além de conceder confiança, a abordagem de Instância de Execução não requer a abertura de uma pasta, se você especificar um caminho de arquivo em vez de uma URL no navegador DevTools.

  3. Se as guias do Edge DevTools ainda não estiverem abertas, na Barra de Atividades, clique em Ferramentas do Microsoft Edge (ícone de Ferramentas do Microsoft Edge) e, em seguida, clique no botão Iniciar Instância :

    O botão Launch Instance sem nenhuma pasta aberta

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

  5. No Visual Studio Code, no Edge DevTools: guia Navegador, na barra de endereços, cole o filepath local obtido acima, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html. O aplicativo demo-to-do é aberto. Na barra de endereços, o prefixo file:/// é adicionado e (no Windows) as barras invertidas são alteradas para barras; por exemplo: file:///C:/Users/username/Documents/GitHub/Demos/demo-to-do/index.html.

  6. No aplicativo de demonstração, insira uma tarefa, como teste.

  7. Na ferramenta Elementos , na guia Estilos , altere um valor CSS, como: clique no body { font-size: 11pt;} tamanho do ponto e altere o valor. O arquivo correspondente .css na pasta que você abriu abre e é editado automaticamente para corresponder às alterações feitas na guia Estilos (mas não é salvo).

Etapa 8: abrir uma URL usando a barra de endereços

A barra de endereços que resulta do botão Launch Instance pode ser usada para abrir uma URL em um servidor. No entanto, o botão Iniciar projeto , juntamente com uma URL armazenada em launch.json, é a principal maneira de abrir uma página da Web especificando uma URL, e as ferramentas são abertas no modo de depuração.

  1. Se o servidor localhost estiver em execução, cole uma URL de host local, como http://localhost:8080. Ou cole a URL do servidor github.io, https://microsoftedge.github.io/Demos/demo-to-do/.

    Se você quiser usar a edição de espelho CSS para editar seus arquivos de origem, será necessário abrir uma pasta no Visual Studio Code. Caso contrário, desmarque a caixa de seleção edição de espelho CSS na guia Estilos na ferramenta Elementos na guia Edge DevTools. Desmarcar a caixa de seleção evita mensagens de erro sobre mapeamento e espelho editando quando você experimenta alterar o CSS no DevTools e não forneceu um arquivo de origem CSS para o DevTools.

  2. No aplicativo de demonstração, insira uma tarefa, como teste.

  3. Na ferramenta Elementos , na guia Estilos , altere um valor CSS, como: clique no body { font-size: 11pt;} tamanho do ponto e altere o valor. O arquivo correspondente .css na pasta que você abriu abre e é editado automaticamente para corresponder às alterações feitas na guia Estilos (mas não é salvo).

Etapa 9: fechar o DevTools

  1. Clique em Fechar (x) na guia DevTools do Edge e na guia DevTools do Edge: Navegador , se essas guias estiverem abertas.

  2. Selecione Barra de> AtividadesFerramentas do Microsoft Edge. Se a seção Destinos listar destinos, passe o mouse sobre o lado direito da instância de destino e clique em Fechar instância (x). O botão Iniciar Instância é exibido, indicando que todas as instâncias do DevTools estão fechadas.

    Fechando DevTools aberto por meio de Instância de Inicialização

    Observe que, na captura de tela acima, o Visual Studio Code não está no modo de depuração; por exemplo, não há nenhuma barra de ferramentas de depuração. Se houvesse uma barra de ferramentas de depuração, você poderia fechar o DevTools clicando no botão Parar .

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

  4. Selecione Arquivo>, Fechar Pasta.

Veja também:

Você concluiu o tutorial "Comece clicando no botão Launch Instance". É recomendável que você também faça os outros tutoriais; consulte Introdução ao uso da extensão DevTools para o Visual Studio Code.

Confira também

GitHub:

  • Last updated on