Novidades do DevTools (Chrome 99)

Jecelyn Yeen

Limitar solicitações WebSocket

O painel Rede agora oferece suporte ao controle de solicitações de soquete da Web. Antes, o throttling de rede não funcionava em solicitações de soquete da Web.

Abra o painel Network, clique em uma solicitação de soquete da Web e abra a guia Messages 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 "Application"

Use o novo painel da 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 da 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 API Reporting.

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

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

Problema do Chromium: 1205856

Suporte para espera até que o elemento esteja visível/clicável no painel do gravador

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

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

Problema do Chromium: 1257499

Estilo, formatação e filtragem melhores no console

Estilo adequado para 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 quebrado) para sequências de escape ANSI.

É comum que os desenvolvedores do Node.js colorifiquem mensagens de registro usando sequências de escape ANSI, geralmente com a ajuda de algumas bibliotecas de estilo, como chalk, colors, ansi-colors, kleur e assim por diante.

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 os especificadores de formato %s, %d, %i e %f

O Console agora 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 da consola, uma mensagem da consola agora é mostrada se o conteúdo da mensagem corresponder ao filtro ou 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 ele pertence também será mostrado.

Problema do Chromium: 1068788

Melhorias nos mapas de origem

Depurar a extensão do Chrome com arquivos de mapa de origem

Agora é possível depurar a extensão do Chrome com arquivos de mapa de origem. Antes, o DevTools só oferecia suporte a um 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 Origens foi aprimorada com menos informações nas estruturas e nomes de pastas (por exemplo, "../", "./" etc.). Por trás, esse é 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 de workers (por exemplo, worker da Web, service worker) com SourceURL relativo agora são mostrados no painel Source. 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 da emulação do tema escuro automático foi simplificada. Agora é uma caixa de seleção, antes era um menu suspenso.

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

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 claros quando o usuário ativa os temas escuros no sistema operacional.

Problema do Chromium: 1243309

Seletor de cores e painel dividido com suporte a toque

Agora é possível selecionar a cor e redimensionar a gaveta nas Ferramentas do desenvolvedor usando os dedos ou uma stylus em dispositivos com tela touch.

Confira um exemplo capturado com a tela touchscreen do dispositivo Google Pixelbook.

Problemas do Chromium: 1284245, 1284995

Destaques diversos

Confira algumas correções importantes desta 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 de comando. (1278743).
• Informe problemas de solicitações de simulação do CORS na guia Problemas. (1272445).
• Informe problemas com as Dicas de cliente HTTP do user agent na guia Problemas. (1219359).
• Correção de comportamentos de Shift + Delete e Page up / Page down nos painéis Fontes e Console. (1278461, 1285662).
• Feche a caixa de diálogo de edição do ponto de interrupção na remoção do ponto de interrupção no painel Origens. (922513)
• Não é necessário fazer uma recarga ao alternar o tema claro/escuro no DevTools. (1278738).

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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