Novidades do DevTools (Chrome 99)

Jecelyn Yeen

Limitar solicitações WebSocket

O painel Rede agora oferece suporte à limitação de solicitações de WebSocket. Antes, a limitação de rede não funcionava em solicitações de soquete da Web.

Abra o painel Rede, clique em uma solicitação de WebSocket e abra a guia Mensagens para observar as transferências de mensagens. Selecione 3G lento para limitar a velocidade.

Problema do Chromium: 423246

Novo painel da API Reporting no painel "Aplicativo"

Use o novo painel API Reporting para monitorar os relatórios gerados na sua página e o status deles.

A API Reporting foi criada para ajudar você a monitorar violações de segurança na sua página, chamadas de API descontinuadas e muito mais.

Abra uma página que usa a API Reporting (por exemplo, a página de demonstração). No painel Application, role para baixo até a seção Background services e selecione o painel Reporting API.

A seção Relatórios mostra uma lista dos relatórios gerados na sua página e o status deles. Clique nele para ver os detalhes do relatório.

A seção Endpoints oferece uma visão geral de todos os endpoints configurados no cabeçalho Reporting-Endpoints.

Problema do Chromium: 1205856

Suporte para aguardar até que o elemento esteja visível/clicável no painel "Gravador"

Ao repetir uma gravação de fluxo do usuário, o painel Gravador agora vai esperar até que o elemento esteja visível ou clicável na janela de visualização ou tentar rolar automaticamente o elemento para a janela antes de repetir a etapa. Antes, o replay falhava imediatamente.

Confira um exemplo de menu fora da tela posicionado fora da janela de visualização e que desliza para dentro quando ativado. O fluxo de usuários é alternar o menu e clicar no item dele. Antes, a reprodução falhava na última etapa porque o item de menu ainda estava deslizando e não estava visível na janela de visualização. Isso já foi corrigido.

Problema do Chromium: 1257499

Melhor estilo, formatação e filtragem do console

Estilizar corretamente as mensagens de registro com o código de escape ANSI

Agora é possível usar as sequências de escape ANSI para estilizar corretamente as mensagens do console. Antes, o console do DevTools tinha suporte muito limitado (e parcialmente corrompido) para sequências de escape ANSI.

É comum que desenvolvedores Node.js coloram mensagens de registro usando sequências de escape ANSI, geralmente com a ajuda de algumas bibliotecas de estilização, como chalk, colors, ansi-colors, kleur etc.

Com essas mudanças, agora é possível depurar seus aplicativos Node.js sem problemas usando o DevTools, com mensagens de console coloridas adequadas. Abra esta demonstração para conferir!

Para saber mais sobre como formatar e estilizar mensagens do console com o DevTools, acesse a documentação Formatar e estilizar mensagens no console.

Problemas do Chromium: 1282837, 1282076

Compatibilidade adequada com especificadores de formato %s, %d, %i e %f

Agora o Console realiza corretamente as conversões de tipo %s, %d, %i e %f, conforme especificado no padrão do console. Antes, o resultado da conversa era inconsistente.

Problemas do Chromium: 1277944, 1282076

Filtro de grupo do console mais intuitivo

Ao filtrar a mensagem do console, uma mensagem é mostrada se o conteúdo dela corresponder ao filtro ou se o título do grupo (ou do grupo ancestral) corresponder ao filtro. Antes, o título do grupo do console aparecia mesmo com o filtro.

Além disso, se uma mensagem do console for mostrada, o grupo (ou o grupo ancestral) a que ela pertence também será exibido.

Problema do Chromium: 1068788

Melhorias nos mapas de origem

Depurar extensões do Chrome com arquivos de mapa de origem

Agora é possível depurar extensões do Chrome com arquivos de mapa de origem. Antes, o DevTools só oferecia suporte a sourcemap inline para depuração de extensões do Chrome.

Problema do Chromium: 212374

Árvore de pastas de origem aprimorada no painel "Origens"

A árvore de pastas de origem no painel Fontes agora está melhorada, com menos confusão nas estruturas e nomes de pastas (por exemplo, "../", "./" etc.). Por baixo dos panos, isso é o resultado da normalização dos URLs de origem absolutos nos mapas de origem.

Problema do Chromium: 1284737

Mostrar arquivos de origem do worker no painel "Origens"

Os arquivos de origem Worker (por exemplo, web worker, service worker) com SourceURL relativo agora são mostrados no painel Origem. Antes, os arquivos de origem do worker não eram processados corretamente.

Problema do Chromium: 1277002

Atualizações do tema escuro automático do Chrome

A interface Emulação automática do tema escuro foi simplificada. Agora é uma caixa de seleção, antes era um menu suspenso.

Além disso, quando o Tema escuro automático está ativado, o menu suspenso Emular prefers-color-scheme é desativado e definido automaticamente como prefers-color-scheme: dark.

O Chrome 96 apresenta um teste de origem para o tema escuro automático no Android. Com esse recurso, o navegador aplica um tema escuro gerado automaticamente a sites com tema claro quando o usuário ativa os temas escuros no sistema operacional.

Problema do Chromium: 1243309

Seletor de cores e painel dividido compatíveis com toque

Agora você pode selecionar a cor e redimensionar a gaveta no DevTools com os dedos ou uma stylus em dispositivos touchscreen.

Confira um exemplo capturado com a tela sensível ao toque do dispositivo Google Pixelbook.

Problemas do Chromium: 1284245, 1284995

Destaques diversos

Confira algumas correções importantes nesta versão:

• Correção do problema de edição de cookies no painel Cookies. (1290196)
• Use Shift + Tab para selecionar o comando anterior no menu "Comando". (1278743)
• Informe problemas de solicitação de simulação do CORS na guia Problemas. (1272445).
• Informe problemas com as dicas de cliente HTTP do user agent na guia Problemas. (1219359, link em inglês).
• Corrigimos os comportamentos Shift + Delete e Page up / Page down nos painéis Fontes e Console. (1278461, 1285662)
• Feche a caixa de diálogo de edição de ponto de interrupção ao remover um ponto no painel Fontes. (922513)
• Não é necessário recarregar ao alternar entre o tema claro e escuro no DevTools. (1278738)

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.