Extensão do DevTools do Microsoft Edge para o Visual Studio Code

A extensão DevTools do Microsoft Edge para Visual Studio Code permite que você use o DevTools do Microsoft Edge e uma versão incorporada do navegador Microsoft Edge, incluindo Emulação de Dispositivo, diretamente do 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 do Visual Studio Code.

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

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

A extensão DevTools para Visual Studio Code permite que você:

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

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

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

  • Edite CSS e SASS ao vivo e veja suas alterações refletidas imediatamente em uma instância do navegador enquanto edita seus arquivos de origem reais. A edição de espelho CSS permite que você controle se deseja salvar as alterações em seu .css arquivo. O DevTools abre e edita seus .css arquivos, mas sem salvá-los automaticamente, 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 o DevTools para alterar seus arquivos locais.

Abordagem Prós e contras Artigo
Navegador > DevTools >Ferramenta Elementos Você precisa copiar manualmente as alterações do DevTools para os arquivos de origem. Inspecionar, editar e depurar HTML e CSS com a ferramenta Elementos
Navegador > DevTools >Ferramenta> Fontes Guia Workspace para definir um Workspace Sempre salva as alterações, o que pode desencorajar a experimentação Selecione um workspace local para usar o DevTools para editar arquivos e salvar alterações em disco na visão geral da ferramenta Fontes
Navegador > DevTools >Configurações>Experimentos 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 código-fonte no Visual Studio Code.
Extensão do DevTools do Microsoft Edge para o Visual Studio Code Abre e edita automaticamente o arquivo de origem CSS, mas não salva automaticamente o arquivo, para que você possa escolher se deseja salvar as edições. O presente artigo.

Edição bidirecional

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

CSS

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

Você pode alterar o .css CSS no arquivo de origem ou .html , salvar a alteração e recarregar a página da Web no Edge DevTools: guia Navegador , 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>), pressionar Enter e atualizar o DevTools do Edge: guia Navegador para ver a alteração. (Isso não edita automaticamente o .html arquivo de origem.)

Você pode alterar o .html HTML no arquivo de origem, salvar a alteração e, em seguida, recarregar a página da Web no Edge DevTools: guia 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 que você:

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

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 se concentram especificamente na extensão DevTools para Visual Studio Code, mas são para o DevTools do navegador Microsoft Edge.

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 da sua página da Web. Inspecionar, editar e depurar HTML e CSS com a ferramenta Elementos
Ferramenta Console Uma linha de comando inteligente e avançada dentro do DevTools. Uma ótima ferramenta complementar para usar com outras ferramentas. Fornece uma maneira poderosa de criar scripts de funcionalidade, inspecionar a página da web atual e manipular a página da web atual usando JavaScript. Visão geral do console
Ferramenta 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 cabeçalhos HTTP, conteúdo ou tamanho. Inspecionar atividade de rede
Ferramenta aplicativo Use a ferramenta Aplicativo para gerenciar o armazenamento de páginas de aplicativos Web, incluindo manifesto, trabalhos de serviço, armazenamento local, cookies, armazenamento em cache e serviços em segundo plano. A ferramenta Aplicativo, para gerenciar o armazenamento
Ferramenta Issues 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 resolver os problemas. Encontrar e corrigir problemas usando a ferramenta Problemas
Ferramenta 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 do usuário e definir Content-Encodings, como deflate, gzip e br. Ferramenta 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 para um padrão de URL especificado e ver como uma página da Web se comporta. Ferramenta de bloqueio de solicitação de rede
Ferramenta Inspecionar Use a ferramenta Inspecionar para ver informações sobre um item em uma página da Web renderizada. Quando a ferramenta Inspecionar está ativa, você passa o mouse sobre os 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 do dispositivo Use a ferramenta Emulação de Dispositivo , também chamada de Modo de Simulação de Dispositivo ou Modo de Dispositivo, para aproximar a aparência e a resposta da sua página em um dispositivo móvel. Emular dispositivos móveis (Emulação do dispositivo)

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

Confira também

Páginas externas:

  • Last updated on