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.
Esses são os recursos mais recentes na versão estável do Microsoft Edge DevTools.
Comunicados da equipe Microsoft Edge DevTools
Melhorias de acessibilidade para o DevTools
A equipe do DevTools contribuiu com 170 alterações no Chromium para resolver problemas de alto impacto de contraste de cores, teclado e leitor de tela no DevTools. Todo desenvolvedor que cria a Web deve ser capaz de usar o DevTools.
Deseja saber como tornar sua página da Web acessível a todos os usuários? Baixe os insights de acessibilidade e as extensões webhint para Microsoft Edge para começar (atualização de julho de 2026: webhint foi removido do Microsoft Edge 151).
Se você usa leitores de tela ou o teclado para navegar pelo DevTools, envie-nos seus comentários twittando para nós ou clicando no ícone Enviar comentários !
Chromium problema #963183
Veja também:
Usando o DevTools em outros idiomas
Muitos desenvolvedores usam outras ferramentas de desenvolvedor, como StackOverflow e Visual Studio Code, em seu idioma nativo, não apenas em inglês. Temos o prazer de anunciar a localização do DevTools, que agora você pode usar em um dos 10 idiomas além do inglês:
- Chinês (Simplificado) - 中文(简体)
- Chinês (Tradicional) - 中文(繁體)
- Francês – français
- Alemão - deutsch
- Italiano - italiano
- Japonês - 日本語
- Coreano - 한국어
- Português - português
- Russo – русский
- Espanhol - español
O DevTools corresponde automaticamente ao idioma usado para o Microsoft Edge no edge://settings/languages.
Se você quiser que o Microsoft Edge esteja em um idioma e seu DevTools permaneça em inglês, pressione F1 no DevTools para abrir Configurações e desabilitar Corresponder ao idioma do navegador.
As mensagens do console não são localizadas. Somente as cadeias de caracteres usadas na interface do usuário do DevTools são exibidas no idioma que você usa para o Microsoft Edge.
Se você quiser usar o DevTools em um idioma diferente dos disponíveis, envie um tweet para nós ou clique no ícone Enviar comentários .
Chromium problema #941561
Veja também:
webhint extensão do Microsoft Edge
Atualização de julho de 2026: a webhint foi removida do Microsoft Edge 151.
A extensão webhint do Microsoft Edge permite que você examine facilmente sua página da Web e obtenha comentários sobre acessibilidade, compatibilidade do navegador, segurança, desempenho e muito mais no DevTools. Leia mais em https://webhint.io.
Experimente a extensão de navegador webhint no Microsoft Edge. Depois de instalar a extensão, abra o DevTools e selecione a ferramenta Dicas . A partir daqui, execute uma verificação de site personalizável. Acesse webhint.io para saber mais.
Veja também:
Modo de Exibição 3D
Use a Exibição 3D para depurar seu aplicativo Web navegando pelo DOM (Modelo de Objeto do Documento) ou pelo contexto de empilhamento de z-index .
Para abrir a ferramenta Exibição 3D, pressione Ctrl+Shift+P (Windows/Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando, comece a digitar 3d viewe selecione Mostrar Exibição 3D.
A equipe do Microsoft Edge está trabalhando com a equipe do Chromium na interface do usuário e adicionando mais funcionalidades à Exibição 3D. Portanto, use o ícone Enviar comentários!
Chromium problema #987787
Veja também:
Extensões do Visual Studio Code
A equipe do DevTools também lançou algumas extensões para o Visual Studio Code que permitem usar o poder do DevTools diretamente do editor de texto! Confira as extensões abaixo:
Veja também:
- Visual Studio Code para desenvolvimento na Web
- Extensão do DevTools do Microsoft Edge para o Visual Studio Code
Elementos para o Microsoft Edge
Use a ferramenta Elementos de dentro do Visual Studio Code adicionando a extensão Elementos para Microsoft Edge Visual Studio Code.
Atualização: a partir de 2022, a extensão Elementos do Microsoft Edge agora é a extensão do Microsoft Edge DevTools para o Visual Studio Code.
Para obter mais informações, Marque Extensão do DevTools do Microsoft Edge para o Visual Studio Code.
Depurador para o Microsoft Edge
Com a extensão Depurador do Microsoft Edge Visual Studio Code, depure o JavaScript em execução no Microsoft Edge diretamente do Visual Studio Code.
Atualização: a partir de 2022, a extensão Depurador do Microsoft Edge Visual Studio Code foi substituída por um depurador interno do Microsoft Edge no Visual Studio Code. Consulte Depurar o Microsoft Edge no Visual Studio Code.
Dica da web
Atualização de julho de 2026: a webhint foi removida do Microsoft Edge 151.
A webhint que a extensão Visual Studio Code usa webhint para melhorar sua página da Web enquanto você a escreve. Essa extensão executa e relata diagnósticos em seus arquivos de espaço de trabalho com base na webhint análise.
Saiba mais sobre a extensão webhint do Visual Studio Code.
Veja também:
Integração do Visual Studio
No Visual Studio 2019 versão 16.2 ou posterior, use o depurador do Visual Studio para depurar o JavaScript em execução no Microsoft Edge. Baixe o Visual Studio 2019 para experimentar esse recurso!
Para saber mais sobre como depurar o Microsoft Edge do Visual Studio, consulte Visual Studio para desenvolvimento na Web.
Prevenção contra rastreamento Mensagens do console
A prevenção contra rastreamento é um recurso exclusivo do Microsoft Edge que protege você de ser rastreado por sites que você não tenha visitado antes. A configuração de prevenção de rastreamento padrão é o modo Balanceado, que bloqueia rastreadores de terceiros e rastreadores mal-intencionados conhecidos para uma experiência que equilibra privacidade e compatibilidade com a web. Para lhe dar mais informações sobre a compatibilidade da sua página da web quando determinados rastreadores são bloqueados, mensagens de aviso foram adicionadas ao Console quando um rastreador é bloqueado.
Veja também:
Anúncios do projeto Chromium
As seções a seguir anunciam recursos adicionais disponíveis no Microsoft Edge 81 que foram contribuídos para o projeto código aberto Chromium.
Suporte ao Moto G4 no modo de dispositivo
Depois de habilitar a barra de ferramentas do dispositivo, simule as dimensões de uma janela de visualização do Moto G4 na lista de dispositivos .
Clique em Mostrar estrutura do dispositivo para mostrar o hardware do Moto G4 ao redor da viewport.
Recursos relacionados:
- Abra o Menu de Comando e execute o
Capture screenshotcomando para fazer uma captura de tela da janela de visualização que inclui o hardware Moto G4 (depois de habilitar Mostrar Quadro do Dispositivo). - Limite a rede e a CPU para simular com mais precisão as condições de navegação na Web de um usuário móvel.
Chromium problema #924693
Atualizações relacionadas a cookies
Veja também:
- Exibir, editar e excluir cookies
- Exibir cookies na Referência de recursos de rede
Cookies bloqueados no painel Cookies
O painel Cookies no painel Aplicativo agora exibe cookies bloqueados com um plano de fundo amarelo.
Chromium problema #1030258
Prioridade do cookie no painel Cookie
As tabelas Cookies nas ferramentas Rede e Aplicativo agora incluem uma coluna Prioridade .
Cuidado: os navegadores baseados no Chromium, como o Microsoft Edge, são os únicos navegadores que dão suporte à prioridade do cookie.
Chromium problema #1026879
Editar todos os valores de cookie
Todas as células nas tabelas Cookie agora são editáveis, exceto as células na coluna Tamanho , porque essa coluna representa o tamanho da rede do cookie, em bytes. Para obter uma explicação de cada coluna, consulte Camposem Exibir, editar e excluir cookies.
Copiar como Node.js busca para incluir dados de cookie
Para obter uma fetch expressão que inclua dados de cookie, clique com o botão direito do mouse em uma solicitação de rede e selecione Copiar>Cópia como Node.js busca.
Chromium problema #1029826
Ícones de manifesto de aplicativo Web mais precisos
Anteriormente, o painel Manifesto no painel Aplicativos enviava suas próprias solicitações para exibir os ícones de manifesto do aplicativo Web. O DevTools agora mostra exatamente o mesmo ícone de manifesto que Microsoft Edge usa.
Chromium problema #985402
Veja também:
- Abra o painel Cookies em Exibir, editar e excluir cookies
Passe o mouse sobre as propriedades de conteúdo CSS para exibir valores sem escape
No painel Estilos da ferramenta Elementos , para exibir a versão sem escape de um valor de uma content propriedade, passe o mouse sobre o valor.
Por exemplo, nesta demonstração , quando você inspeciona o pseudoelemento p::after , uma cadeia de caracteres de escape é exibida no painel Estilos :
Quando você passa o mouse sobre o content valor, o valor sem escape é exibido.
Veja também:
Erros de mapa de origem mais detalhados no Console
O Console agora fornece mais detalhes sobre por que um mapa de origem falhou ao carregar ou analisar. Anteriormente, ele apenas fornecia um erro sem explicar o que deu errado.
Veja também:
Configuração para desabilitar a rolagem após o final de um arquivo
Para evitar o comportamento padrão da interface do usuário que permite rolar bem além do final de um arquivo no painel Fontes , abra Configurações e desmarque a caixa de seleção Preferências>Fontes>Permitir rolagem além do final do arquivo.
Veja também:
- Uso do painel Editor para exibir ou editar arquivos na visão geral da ferramenta Fontes.
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques.
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.