Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
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.
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
.cssarquivo. O DevTools abre e edita seus.cssarquivos, 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
- Introdução ao uso da extensão DevTools para o Visual Studio Code
- Abrindo o DevTools e o navegador DevTools
Páginas externas:
- Sobrecarregando o VS Code Live Server – Se você usar a extensão Live Server no Visual Studio Code para ver as alterações em seus produtos Web ao vivo, poderá melhorar ainda mais a experiência obtendo um navegador e o DevTools inseridos no Visual Studio Code usando a extensão DevTools do Microsoft Edge para Visual Studio Code.
- Introdução - documentação do Visual Studio Code.
- vscode-edge-devtools repo - código-fonte da extensão Microsoft Edge Developer Tools para o Visual Studio Code.
- Extensão do DevTools do Microsoft Edge para o Visual Studio Code no Visual Studio Marketplace.