Novidades em DevTools (Microsoft Edge 99)
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 .
Depurar com segurança seu código de produção com mapas de origem do Servidor de Símbolos de Artefatos do Azure
O Servidor de Símbolos de Artefatos do Azure agora dá suporte ao armazenamento dos mapas de origem que o processo de build produz ao compilar, minificar e agrupar seu código. Em vez de hospedar mapas de origem em seu servidor público, agora você pode publicar seus mapas de origem no Servidor de Símbolos de Artefatos do Azure seguro. Em seguida, conecte DevTools ao Symbol Server para que o DevTools busque automaticamente seus mapas de origem.
Usando mapas de origem, você pode ver e depurar seu código-fonte original em DevTools, em vez de ter que trabalhar com o código de produção compilado, minificado e empacotado retornado pelo servidor. Hospedar seus mapas de origem no Servidor de Símbolos de Artefatos do Azure permite que você veja e trabalhe com seu código-fonte de forma segura e privada, em vez de colocar seus mapas de origem em seu servidor e revelar seu código original publicamente.
Para experimentar este recurso:
- Publique seus mapas de origem no servidor de símbolos do Azure Artifacts.
- Abra oServidor de Símbolos de Configurações> de DevTools > e conecte DevTools ao Servidor de Símbolos de Artefatos do Azure, inserindo sua organização do Azure DevOps e o token de acesso pessoal.
Veja também:
- Mapear o código processado para o código-fonte original para depuração
- Depurar com segurança o código original publicando mapas de origem para o servidor de símbolos do Azure Artifacts
- Depurar com segurança o código original usando mapas de origem do servidor de símbolos do Azure Artifacts
Extensão do Microsoft Edge DevTools para Visual Studio
Acompanhando o sucesso da integração Visual Studio Code, agora você também pode inserir as Ferramentas de Desenvolvedor do Microsoft Edge no Microsoft Visual Studio para depurar seus projetos ASP.NET ao vivo. Baixe as Ferramentas de Desenvolvedor do Microsoft Edge para Visual Studio e experimente.
Para experimentar este recurso:
- Verifique se o Visual Studio 2022 e a carga de trabalho ASP.NET estão instalados.
- Configure o Web Live Preview como o Web Forms Designer padrão, conforme descrito no Microsoft Edge Developer Tools para Visual Studio.
- Em um projeto ASP.NET, abra uma página da Web do projeto na janela Design .
- No canto superior esquerdo da janela Design , clique no botão Open Edge DevTools (
):
O Edge DevTools para Visual Studio é aberto, com a ferramenta Elementos selecionada:
A ferramenta Rede também está disponível por padrão:
A ferramenta Inspecionar (
) e o screencast de alternância (
) estão disponíveis e o menu Mais Ferramentas (
) oferece as ferramentas de bloqueio problemas, condições de rede e solicitação de rede .
Veja também:
- Ferramentas de Desenvolvedor do Edge para Visual Studio (versão prévia), no Visual Studio DevBlogs.
- Extensão do Edge DevTools para Visual Studio.
Camadas no modo de exibição 3D
Desde o Microsoft Edge 88, a ferramenta 3D View forneceu uma versão aprimorada da ferramenta Layers . Agora, no Microsoft Edge 99, a funcionalidade na ferramenta Camadas foi removida e a ferramenta Camadas contém um link que redireciona você para a exibição Camadas Compostas na ferramenta Exibição 3D . Você pode encontrar todos os recursos que estavam anteriormente na ferramenta Camadas e muito mais, na ferramenta Modo de Exibição 3D .
Atualização: a ferramenta Camadas já foi removida.
Veja também:
Use seus mapas de origem para exibir nomes de função originais em perfis de desempenho
Atualização: No Microsoft Edge 111, esse recurso foi removido, pois a ferramenta Performance agora fornece automaticamente os nomes de arquivo e função originais durante a criação de perfil do código de produção, desde que os sourcemaps sejam hospedados no Servidor de Símbolos de Artefatos do Azure. Consulte A ferramenta DevTools unminifis file and function names ao criar perfil de código de produçãono What's New in DevTools (Microsoft Edge 111).
Versão preterida do que há de novo
Gravar um perfil de desempenho na ferramenta Desempenho produz um gráfico de chamas minificado. Nas versões anteriores do Microsoft Edge, o gráfico de chamas não usou mapas de origem para exibir seus nomes de função originais, mesmo se você hospedasse os mapas de origem no servidor.
Começando no Microsoft Edge versão 99, você pode exibir seus nomes de função originais em um perfil de desempenho, da seguinte maneira:
- Registre um perfil na ferramenta Desempenho .
- Clique no novo botão Desminificar (
) para criar e baixar o perfil de desempenho não qualificado. - Carregar (importar) (
) o perfil de desempenho não qualificado na ferramenta Desempenho .
O botão Desminificar usará mapas de origem, desde que eles estejam hospedados lado a lado com o código de produção, para desminificar nomes de função no gráfico de chamas na ferramenta Desempenho .
O gráfico de chama na ferramenta Desempenho mostra inicialmente nomes de função como b, O, Xt e bn, retirados do código de produção minificado retornado pelo servidor Web:
Depois de clicar em Desminificar () e, em seguida, Carregar perfil (), o gráfico de chamas na ferramenta Desempenho agora mostra essas funções rotuladas com nomes significativos: invokeFunc (b), executeAction (O), endBatch (Xt)e runReactions (bn), recuperados de seus mapas de origem:
Veja também:
- Desminificar nomes de funções nos perfis de desempenho do DevTools no Microsoft Edge Blog.
- Exiba nomes de função originais em perfis de desempenho.
Acessibilidade aprimorada para console de rede e exibição 3D
Nas versões anteriores do Microsoft Edge, a tecnologia auxiliar anunciou informações incorretas ao fornecer um token de portador personalizado na ferramenta Console de Rede. No Microsoft Edge versão 99, esse problema foi corrigido. Ao selecionar a caixa de texto para fornecer um token de portador personalizado, a tecnologia assistiva agora anuncia "Grupo de exibição de solicitação de texto de edição de token".
Nas versões anteriores do Microsoft Edge, a tecnologia assistiva anunciava apenas o texto do botão de rádio na ferramenta Exibição 3D, sem anunciar o nome do grupo ao qual o botão pertence. No Microsoft Edge versão 99, isso foi corrigido. Por exemplo, quando o foco estiver no botão Usar textura de tela , a tecnologia assistiva agora anunciará: "Grupo de rádio tipo de cor, Usar textura de tela, botão de rádio, selecionado".
Veja também:
Árvore de pasta de origem aprimorada no painel Fontes
Na guia Página da ferramenta Fontes , a árvore de pastas de origem agora é aprimorada, com menos desordem na nomenclatura e no contorno das pastas. Prefixos de caminho desnecessários, como ../ e ./ foram removidos. A estrutura da árvore foi simplificada mesclando pastas duplicadas equivalentes.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1284737.
Veja também:
- Usando a guia Página para explorar recursos que constroem a página da Web atual na visão geral da ferramenta Fontes.
Anúncios do projeto Chromium
O Microsoft Edge versão 99 também inclui as seguintes atualizações do projeto Chromium:
- Limitando solicitações do WebSocket
- Novo painel de API de Relatórios no painel Aplicativo
- Melhor estilo de console, formatação e filtragem
- Melhorias no sourcemaps
- Seletor de cores e painel dividido com toque
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 para anúncios do projeto Chromium é What's New in DevTools (Chrome 99) e é de autoria de Jecelyn Yeen (defensora do desenvolvedor que trabalha no Chrome DevTools no Google).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.