Novidades em DevTools (Microsoft Edge 80)
Para marcar os recursos mais recentes do Microsoft Edge DevTools e a extensão Microsoft Edge DevTools para Microsoft Visual Studio Code e Visual Studio, leia esses anúncios.
Para se manter atualizado e obter os recursos mais recentes do DevTools, baixe uma versão prévia do Insiders do Microsoft Edge. Se você estiver no Windows, Linux ou macOS, considere usar o Canary (ou outro canal de visualização) como seu navegador de desenvolvimento padrão. As versões Beta, Dev e Canary do Microsoft Edge são executadas como aplicativos separados, lado a lado com a versão estável e lançada do Microsoft Edge. Consulte Canais internos do Microsoft Edge.
Para os últimos anúncios, siga a equipe do Microsoft Edge no Twitter. Para relatar um problema com o DevTools ou pedir um novo recurso, registre um problema no repositório MicrosoftEdge/DevTools .
Anúncios da equipe do Microsoft Edge DevTools
Melhorias de acessibilidade para os DevTools
A equipe do DevTools contribuiu com 170 alterações no Chromium para resolver problemas de contraste de cores, teclado e leitor de tela de alto impacto no DevTools. Todos os desenvolvedores que criam a Web devem ser capazes de usar o DevTools.
Deseja aprender a tornar sua página da Web acessível a todos os usuários? Baixe as extensões Do Accessibility Insights e webhint para o Microsoft Edge para começar.
Se você usar leitores de tela ou o teclado para navegar pelos DevTools, envie seus comentários twittando para nós ou selecionando o í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. Estamos entusiasmados em anunciar a localização para o 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
edge://flags Acesse e defina o sinalizador Habilitar ferramentas de desenvolvedor localizadas como Habilitado. Defina também o sinalizador de experimentos ferramentas de desenvolvedor como Habilitado. Reinicie o Microsoft Edge e abra o DevTools.
Os DevTools correspondem ao idioma que você usa para o Microsoft Edge em edge://settings/languages.
Se você quiser usar o DevTools em um idioma diferente dos disponíveis, twitte para nós ou clique no ícone Enviar Comentários .
Chromium problema #941561
Veja também:
Extensão webhint do Microsoft Edge
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 dentro do DevTools. Leia mais em https://webhint.io.
Experimente a extensão do navegador webhint no Microsoft Edge. Depois de instalar a extensão, abra DevTools e selecione a ferramenta Dicas . A partir daqui, execute uma verificação de site personalizável. Vá até webhint.io para saber mais.
Veja também:
Exibição 3D
Use o Modo de Exibição 3D para depurar seu aplicativo Web navegando pelo DOM (Modelo de Objeto de Documento) ou pelo contexto de empilhamento de índice z .
Para acessar o Modo de Exibição 3D, acesse edge://flags e verifique se o sinalizador de experimentos do Developer Tools está definido como Habilitado. Reinicie o Microsoft Edge e abra o DevTools. Pressione F1 no DevTools ou abra a seçãoExperimentos de Configurações> e ative a caixa de seleção Habilitar exibição 3D. Agora, pressione Ctrl+Shift+P (Windows/Linux) ou Command+Shift+P (macOS), digite no Modo de Exibição 3D e selecione Mostrar Exibição 3D.
Estamos trabalhando na interface do usuário e adicionando mais funcionalidades ao Modo de Exibição 3D, portanto, envie seus comentários.
Chromium problema #987787
Veja também:
extensões Visual Studio Code
A equipe do DevTools também lançou algumas extensões para Visual Studio Code que permitem usar o poder dos DevTools diretamente do editor de texto. Confira as extensões a seguir.
Elementos do Microsoft Edge
Use a ferramenta Elementos de dentro Visual Studio Code adicionando a extensão Elements for Microsoft Edge Visual Studio Code.
Atualização: a partir de 2022, a extensão Elements for Microsoft Edge agora é a extensão Microsoft Edge DevTools para Visual Studio Code.
Para obter mais informações, marcar a extensão Microsoft Edge DevTools para Visual Studio Code.
Depurador do Microsoft Edge
Com a extensão Depurador para Microsoft Edge Visual Studio Code, depure 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 para o Microsoft Edge em Visual Studio Code. Consulte Depurar o Microsoft Edge no Visual Studio Code.
webhint
A extensão webhint Visual Studio Code usa webhint para melhorar sua página da Web enquanto você a grava! Essa extensão é executada e relata diagnóstico em seus arquivos de workspace com base na webhint análise.
Saiba mais sobre o Visual Studio Code extensão webhint.
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 JavaScript em execução no Microsoft Edge. Baixe o Visual Studio 2019 para experimentar esse recurso.
Leia nossa postagem no blog para saber como depurar o Microsoft Edge no Visual Studio.
Para saber mais sobre como depurar o Microsoft Edge no Visual Studio, consulte Visual Studio para desenvolvimento da Web.
Acompanhamento de mensagens de console de prevenção
O acompanhamento da prevenção é um recurso exclusivo no Microsoft Edge que impede que você seja rastreado por um site antes de visitá-lo. A configuração padrão de prevenção de rastreamento é o modo Balanceado, que bloqueia rastreadores de terceiros e rastreadores mal-intencionados conhecidos para uma experiência que equilibra a privacidade e a compatibilidade com a Web. Para fornecer mais informações sobre a compatibilidade de sua página da Web quando determinados rastreadores são bloqueados, a equipe do Microsoft Edge adicionou mensagens de aviso no 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 80 que foram contribuídos para o projeto código aberto Chromium.
Suporte para redeclarações de let e classe no Console
O Console agora dá suporte a redeclarações de let e class instruções. A incapacidade de redeclare foi um aborrecimento comum para desenvolvedores Web que usam o Console para experimentar o novo código JavaScript.
Aviso
A redeclara uma let instrução ou class em um script fora do Console ou dentro de uma única entrada do Console ainda causa um SyntaxError.
Por exemplo, anteriormente, ao declarar novamente uma variável local com let, o Console gerou um erro:
Agora, o Console permite a redeclaração:
Chromium problema #1004193
Veja também:
Depuração de WebAssembly aprimorada
O DevTools começou a dar suporte ao Padrão de Depuração ANÃO, o que significa maior suporte para passar por cima do código, definir pontos de interrupção e resolver rastreamentos de pilha em seus idiomas de origem no DevTools.
Veja também:
- Filtrar o tipo de recurso Wasm na ferramenta Rede em Novidades em DevTools (Microsoft Edge 92).
Atualizações do painel de rede
Solicitar cadeias de iniciadores no painel Iniciador
Agora você pode exibir os iniciadores e as dependências de uma solicitação de rede como uma lista aninhada. Isso pode ajudar você a entender por que um recurso foi solicitado ou qual atividade de rede um determinado recurso (como um script) causou.
Depois de registrar a atividade de rede no painel Rede, selecione um recurso e vá para o painel Iniciador para exibir a Cadeia de Iniciador de Solicitações:
- O recurso inspecionado é em negrito. Na captura de tela acima,
ai.2.min.jsestá o recurso inspecionado. - Os recursos acima do recurso inspecionado são os iniciadores. Na captura de tela acima,
https://www.microsoftedgeinsider.comestá o iniciador deai.2.min.js. Em outras palavras,https://www.microsoftedgeinsider.comcausou a solicitação de rede paraai.2.min.js. (A captura de tela mostra uma URL desatualizada. A URL mais recente éhttps://www.microsoft.com/edge/download/insider.) - Os recursos abaixo do recurso inspecionado são as dependências. Na captura de tela acima,
https://dc.services.visualstudio.com/v2/trackhá uma dependência deai.2.min.js. Em outras palavras,ai.2.min.jscausou a solicitação de rede parahttps://dc.services.visualstudio.com/v2/track.
As informações do iniciador e da dependência também podem ser acessadas segurando o Shift e, em seguida, pairando sobre os recursos de rede. Consulte Exibir iniciadores e dependências na referência de recursos de rede.
Chromium problema #842488
Realçar a solicitação de rede selecionada na visão geral
Depois de selecionar um recurso de rede para inspecioná-lo, o painel Rede agora coloca uma borda azul em torno desse recurso na visão geral. Isso pode ajudá-lo a detectar se a solicitação de rede está acontecendo mais cedo ou mais tarde do que o esperado.
Chromium problema #988253
Consulte Ocultar o painel Visão geral na referência de recursos de rede.
Colunas de URL e caminho no painel Rede
Use as novas colunas Caminho e URL na ferramenta Rede para exibir o caminho absoluto ou a URL completa de cada recurso de rede.
Para exibir as novas colunas, clique com o botão direito do mouse no cabeçalho da tabela Cascata e selecione Caminho ou URL.
Chromium problema #993366
Veja também:
- Referência de recursos de rede.
- Classificar solicitações em referência de recursos de rede menciona a coluna Cascata .
Cadeias de caracteres User-Agent atualizadas
O DevTools dá suporte à configuração de uma cadeia de caracteres de User-Agent personalizada por meio do painel Condições de Rede . A cadeia de caracteres User-Agent afeta o User-Agent cabeçalho HTTP anexado aos recursos de rede e também o valor de navigator.userAgent.
As cadeias de caracteres de User-Agent predefinidas foram atualizadas para refletir as versões modernas do navegador.
Para acessar condições de rede, abra o Menu de Comando e execute o Show Network Conditions comando.
Observação
Você também pode definir User-Agent cadeias de caracteres no Modo de Dispositivo.
Chromium problema #1029031
Veja também:
Audita atualizações do painel
Em uma versão posterior, o painel Auditorias foi renomeado como o painel Lighthouse .
Nova interface do usuário de configuração
A interface do usuário de configuração tem um design novo e responsivo e as opções de configuração de limitação foram simplificadas. Para obter mais informações sobre as alterações de interface do usuário de limitação, consulte Limitação do Painel de Auditorias.
Veja também:
Atualizações da ferramenta de cobertura
Modos de cobertura por função ou por bloco
A ferramenta Coverage tem um novo menu suspenso que permite especificar se os dados de cobertura de código devem ser coletados por função ou por bloco. A cobertura por bloco é mais detalhada, mas também muito mais cara de coletar. O DevTools usa a cobertura por função por padrão agora.
Cuidado
Você pode notar grandes diferenças de cobertura de código em arquivos HTML, dependendo se você usa por função ou por modo de bloco . Ao usar por modo de função , scripts embutidos em arquivos HTML são tratados como funções. Se o script for executado em tudo, DevTools marcará todo o script como código usado. Se o script não for executado, DevTools marcará o script como código não usado.
A cobertura agora deve ser iniciada por uma atualização de página
A cobertura de código de agregação sem uma atualização de página foi removida porque os dados de cobertura não eram confiáveis. Por exemplo, uma função pode ser relatada como não usada se o tempo de execução foi há muito tempo e o coletor de lixo V8 a limpou.
Chromium problema #1004203
Veja também:
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 Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.