Novidades em DevTools (Microsoft Edge 95)
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 .
Sincronizar alterações ao vivo da ferramenta Styles na extensão Visual Studio Code
A extensão DevTools do Microsoft Edge para Visual Studio Code agora apresenta um experimento chamado Edição de Espelho do CSS. Usando esse recurso, você pode usar a ferramenta Styles para ajustar seu CSS e as alterações aplicadas são adicionadas automaticamente aos arquivos de origem do CSS no editor de Visual Studio Code. Você pode alternar e desativar essa funcionalidade.
Para obter mais informações, consulte Atualizar arquivos .css de dentro da guia Estilos (edição de espelho CSS).
Para fornecer comentários, em Visual Studio Code, na Barra de Atividades, clique em Ferramentas do Microsoft Edge e, na seção Edição de Espelho do CSS, clique no link deixar comentários aqui.
Todas as mensagens de erro e aviso no Console agora têm um ícone da Web de pesquisa
A pesquisa dessa mensagem no ícone da Web agora está disponível para todos os erros e avisos no Console. Anteriormente, esse ícone só aparecia para alguns dos erros e avisos comuns. Agora, o ícone foi adicionado nos erros e avisos restantes. Clique no ícone Pesquisar esta mensagem na Web para pesquisar na Web usando o erro relevante ou a cadeia de caracteres de aviso.
Para obter mais informações, consulte Pesquisar erros de console na Web.
Veja também:
- Pesquise na Web uma cadeia de caracteres de mensagem de erro do Console na visão geral do console.
Melhor acesso ao teclado para definir dicas de cliente User-Agent
Começando com o Microsoft Edge versão 92, você pode especificar User-Agent Dicas do Cliente. Você pode especificar User-Agent Dicas do cliente em um dos dois lugares:
- Ao definir a cadeia de caracteres do agente de usuário na ferramenta condições de rede.
- Ao adicionar um dispositivo personalizado para emular em Configurações.
No Microsoft Edge antes da versão 95, ao adicionar um dispositivo personalizado para emular na seção Dispositivos de Configurações, a seleção do botão Dicas do cliente do agente de usuário com o teclado fez com que o item de interface do usuário incorreto fosse ativado. Em vez de expandir a seção Dicas do cliente do agente de usuário para você preenchê-la, ela selecionou o botão Adicionar . O dispositivo que você estava começando a definir foi imediatamente adicionado, usando campos vazios na seção Dicas do cliente do agente de usuário.
No Microsoft Edge versão 95, esse problema foi corrigido. Selecionar o botão Dicas do cliente do agente de usuário usando o teclado agora expande um formulário, no qual você pode especificar dicas de cliente para o dispositivo personalizado.
Para saber mais sobre User-Agent Dicas do cliente, confira Detectar o Microsoft Edge em seu site.
Para exibir o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1243827: dicas de cliente do agente de usuário formam acessibilidade.
Os filtros de console agora exibem mensagens agrupadas se o filtro corresponder ao título do grupo
Você pode usar console.group() para rotular um grupo de mensagens e fornecer alguma organização para mensagens de console. Em versões anteriores do Microsoft Edge, houve vários problemas ao tentar filtrar mensagens agrupadas no Console. Ao filtrar para um rótulo de grupo, o Console não exibiria mensagens individuais dentro do grupo. Além disso, a filtragem não ocultaria rótulos de grupo, mesmo que o rótulo não corresponda ao filtro.
No Microsoft Edge versão 95, esses problemas foram corrigidos. A filtragem para um rótulo agora exibe o rótulo de grupo e as mensagens individuais dentro do grupo. Quando o filtro não corresponde ao rótulo de grupo, todo o grupo fica oculto.
Quando a cadeia de caracteres de filtro corresponde a um rótulo de grupo, o grupo e seus membros são exibidos:
Quando a cadeia de caracteres de filtro não corresponde a um rótulo de grupo, nem o grupo nem seus membros são exibidos:
Veja também:
- grupo na Referência de API do objeto console.
Para exibir o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 363796: ☂ o filtro de console oculta conteúdo agrupado inadequadamente e não oculta títulos de grupo.
Anúncios do projeto Chromium
A seguir estão alguns dos recursos adicionais que estão disponíveis no Microsoft Edge versão 95 que foram contribuídos para o projeto de Chromium de software livre.
Melhorou a exibição de propriedades
O DevTools melhora a exibição de propriedades por:
- Sempre arrojando e classificando as próprias propriedades primeiro, no Console, na ferramenta Fontes e na guia Propriedades na ferramenta Elementos. (Uma propriedade própria é uma propriedade definida diretamente no objeto.)
- Nivelando a exibição de propriedades no painel Propriedades .
Por exemplo, o snippet abaixo cria um objeto linkURL com duas propriedades próprias: user eaccess, em seguida, atualiza o valor de uma propriedade herdada: search
const link = new URL('https://blogs.windows.com/msedgedev/');
link.user = { id: 1, name: 'Amelie Garner' };
link.access = 'admin';
link.search = `?access=${link.access}`;
Depois de inserir o código acima no Console, tente registrar em log link. As propriedades próprias agora são ousadas e são as primeiras na ordem de classificação. Essas alterações facilitam a localização de propriedades personalizadas, especialmente para APIs Web (como URL) que têm muitas propriedades herdadas:
No painel Propriedades da ferramenta Elementos , a lista de propriedades agora é achatada para uma melhor experiência ao depurar propriedades DOM, especialmente para componentes da Web:
Veja também:
Para obter o histórico desse recurso, consulte Chromium problemas 1076820 e 1119900.
Snippets agora estão classificados no painel Fontes
Na guia Snippets da ferramenta Sources , anteriormente, os snippets não foram classificados. Snippets agora são classificados em ordem alfabética:
Veja também:
- Executar snippets do JavaScript em qualquer página da Web
- Chrome 85 – Novidades em DevTools – vídeo.
Para obter o histórico desse recurso, consulte Chromium problema: 1243976.
Menu de comando da interface do usuário aprimorada para DevTools
O Menu de Comando foi aprimorado para facilitar a pesquisa de um arquivo. Quando você pressiona Ctrl+P no Windows e Linux ou Command+P no macOS, o Menu de Comando agora exibe nomes de arquivo em negrito, juntamente com um ícone que indica o tipo de arquivo:
Veja também:
Para obter o histórico desse recurso, consulte Chromium problema 1201997.
Observação
A seção "Anúncios do projeto Chromium" desta página é uma modificação baseada no trabalho criado e compartilhado pelo Google por Políticas de Site e é usada de acordo com os termos descritos na Licença Internacional de Atribuição 4.0 do Creative Commons. A página original para os Anúncios do projeto Chromium é What's New in DevTools (Chrome 95), de autoria de Jecelyn Yeen, uma 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.