Extensão DevTools do Microsoft Edge para Visual Studio Code

  • Artigo

A extensão Microsoft Edge DevTools para Visual Studio Code permite que você use o Microsoft Edge DevTools e uma versão inserida do Microsoft Edge Browser, incluindo a Emulação de Dispositivo, diretamente de dentro Visual Studio Code. A extensão DevTools fornece muitas das mesmas ferramentas que estão no DevTools que está no navegador Microsoft Edge, de dentro de Visual Studio Code.

Ferramentas de Desenvolvedor do Microsoft Edge e visualização do navegador no Visual Studio Code

Visual Studio Code é um editor de código-fonte leve, mas poderoso para Windows, Linux e macOS. Visual Studio Code é um IDE completo (ambiente de desenvolvimento integrado) que tem recursos poderosos para o desenvolvimento da Web. Visual Studio Code inclui suporte interno para JavaScript, TypeScript e Node.js, portanto, é uma ótima ferramenta para desenvolvedores Web, especialmente com essa extensão DevTools.

A extensão DevTools para Visual Studio Code permite:

  • Desenvolva páginas da Web e use DevTools sem deixar Visual Studio Code. Essa extensão oferece uma alternativa ao uso do DevTools para o desenvolvimento de páginas da Web na janela do navegador.

  • Emular dispositivos, como exibir sua página da Web em vários tamanhos de viewport durante o desenvolvimento.

  • Teste a acessibilidade de suas páginas da Web de dentro de Visual Studio Code.

  • Edite ao vivo CSS e SASS e veja suas alterações refletidas imediatamente em uma instância do navegador durante a edição de seus arquivos de origem reais. A edição de espelho do CSS permite controlar se você deve salvar alterações no .css arquivo. O DevTools abre e edita seus .css arquivos, mas sem salvar automaticamente os arquivos, para que você possa decidir e controlar se deseja salvar as alterações feitas na guia Estilos da ferramenta Elementos .

Abordagens comparadas

A extensão DevTools para Visual Studio Code é uma das várias maneiras diferentes de usar DevTools para alterar seus arquivos locais.

Abordagem Prós e Contras Artigo
Ferramenta Elementos de DevTools > do Navegador > Você precisa copiar manualmente as alterações de DevTools em seus arquivos de origem. Inspecionar, editar e depurar HTML e CSS com a ferramenta Elementos
Guia Filesystem da ferramenta > DevTools Sources> do Navegador > para definir um Workspace Sempre salva as alterações, o que pode desencorajar a experimentação Usando a guia Sistema de Arquivos para definir um workspace local na visão geral da ferramenta Fontes
Configurações do Navegador > DevTools>>experimenta>arquivos de código aberto em Visual Studio Code Sempre salva as alterações, o que pode desencorajar a experimentação Experimentos >Abrindo arquivos de origem no Visual Studio Code.
Extensão DevTools do Microsoft Edge para Visual Studio Code Abre e edita automaticamente o arquivo de origem do CSS, mas não salva automaticamente o arquivo, portanto, você pode escolher se deve salvar as edições. O artigo atual.

Edição de duas vias

As alterações são refletidas entre os arquivos de origem na pasta aberta, a guia Edge DevTools e a guia Edge DevTools: Browser , da seguinte maneira.

CSS

Por meio do CSS espelho edição, você pode alterar o CSS na guia DevTools do Edge e ele é alterado automaticamente no arquivo ou .css de origem.html, além de ser refletido na guia Edge DevTools: Navegador. DevTools permite que você decida se deve salvar a alteração, permitindo que você experimente.

Você pode alterar o CSS no arquivo ou .html de origem.css, salvar a alteração e recarregar a página da Web na guia Edge DevTools: Browser, que também atualiza a guia Edge DevTools.

HTML

Você pode editar a árvore DOM na guia DevTools do Edge (como alterar <h2>Success!</h2> para <h2>CSS Success!</h2>), em seguida, pressione Enter e atualize a guia DevTools do Edge: Navegador para ver a alteração. (Isso não edita automaticamente o arquivo de origem .html .)

Você pode alterar HTML no arquivo de origem .html , salvar a alteração e recarregar a página da Web na guia Edge DevTools: Navegador , que também atualiza a guia Edge DevTools .

Tarefas compatíveis com as ferramentas de desenvolvedor

A extensão DevTools para Visual Studio Code permite:

Tarefa Artigo
Obtenha uma análise dinâmica dos problemas no código-fonte. Análise de problemas embutidos e dinâmicos
Inicie uma nova instância do navegador com DevTools para seu projeto. Abrir o DevTools e o navegador DevTools
Emule dispositivos diferentes e veja seu projeto em modos de exibição diferentes. Emulação de dispositivo
Exiba a estrutura e o layout do DOM do runtime de sua página usando a ferramenta Elementos . Abrir arquivos de origem da ferramenta Elementos
Analise e altere os estilos de CSS do seu projeto com visualização ao vivo e alterações ao vivo nos arquivos de origem do projeto. Atualizar arquivos .css de dentro da ferramenta Styles (edição de espelho CSS)
Analise o tráfego do site usando a ferramenta Rede . Integração de ferramentas de rede
Registre informações, experimente JavaScript e acesse a janela/DOM usando a ferramenta Console . Integração de console
Inspecione o armazenamento e os trabalhadores de serviço usando a ferramenta Aplicativo . Integração de ferramentas de aplicativo
Use a extensão no fluxo de trabalho de depuração Visual Studio Code. Integração com Visual Studio Code depuração

Visão geral das ferramentas na extensão DevTools

As ferramentas a seguir estão incluídas na extensão DevTools para Visual Studio Code. Os artigos a seguir não estão especificamente focados na extensão DevTools para Visual Studio Code, mas são para o Microsoft Edge browser DevTools.

Mal-Intencionado Objetivo Artigo
Ferramenta Elementos Inspecione, edite e depure seu HTML e CSS. Você pode editar na ferramenta enquanto exibe as alterações ao vivo no navegador. Depure seu HTML usando a árvore DOM e inspecione e trabalhe no CSS para sua página da Web. Inspecionar, editar e depurar HTML e CSS com a ferramenta Elementos
Ferramenta de console Uma linha de comando inteligente e rica dentro de DevTools. Uma ótima ferramenta complementar para usar com outras ferramentas. Fornece uma maneira poderosa de criar scripts, inspecionar a página da Web atual e manipular a página da Web atual usando JavaScript. Visão geral do console
Ferramenta de rede Use a ferramenta Rede para garantir que os recursos estejam sendo baixados ou carregados conforme o esperado. Inspecione as propriedades de um recurso individual, como os cabeçalhos HTTP, o conteúdo ou o tamanho. Inspecionar a atividade de rede
Ferramenta de aplicativo Use a ferramenta De aplicativo para gerenciar o armazenamento para páginas de aplicativos Web, incluindo manifesto, trabalhadores de serviço, armazenamento local, cookies, armazenamento em cache e serviços em segundo plano. A ferramenta De aplicativo, para gerenciar o armazenamento
Ferramenta problemas A ferramenta Problemas analisa automaticamente a página da Web atual, relata problemas agrupados por tipo e fornece documentação para ajudar a explicar e resolve os problemas. Localizar e corrigir problemas usando a ferramenta Problemas
Ferramenta de condições de rede Use a ferramenta condições de rede para desabilitar o cache do navegador, definir a limitação de rede, definir a cadeia de caracteres do agente de usuário e definir codificações de conteúdo, como deflate, gzip e br. Ferramenta de condições de rede
Ferramenta de bloqueio de solicitação de rede Use a ferramenta de bloqueio de solicitação de rede para testar o bloqueio de solicitações de rede em um padrão de URL especificado e ver como uma página da Web se comporta. Ferramenta de bloqueio de solicitação de rede
Inspecionar ferramenta Use a ferramenta Inspecionar para ver informações sobre um item em uma página da Web renderizada. Quando a ferramenta Inspecionar estiver ativa, você passa o mouse sobre itens na página da Web e o DevTools adiciona uma sobreposição de informações e um realce de grade na página da Web. Analisar páginas usando a ferramenta Inspecionar
Emulação de dispositivo Use a ferramenta Emulation de Dispositivo , também chamada modo de simulação de dispositivo ou modo de dispositivo, para aproximar a aparência e a resposta de sua página em um dispositivo móvel. Emular dispositivos móveis (Emulação de Dispositivo)

Para obter a lista de todas as ferramentas que estão na versão do navegador Microsoft Edge do DevTools, consulte Visão geral de todas as ferramentas em Sobre a lista de ferramentas.

Confira também

Páginas externas: