Novidades do DevTools (Chrome 99)

Limitar solicitações WebSocket

O painel Network agora oferece suporte ao controle de solicitações de soquete da Web. Antes, a limitação 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 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, 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 esperar até que o elemento esteja visível/clicável no painel do gravador

Ao repetir um registro de fluxo do usuário, o painel Gravador agora espera até que o elemento esteja visível ou clicável na janela de visualização ou tenta rolar automaticamente o elemento até a janela de visualização antes de repetir 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. Anteriormente, a repetição falhava na última etapa, porque o item de menu ainda está deslizando e não está 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 as Ferramentas do desenvolvedor, acesse a documentação Formatar e estilizar mensagens no console.

Problemas do Chromium: 1282837, 1282076

Suporte adequado aos especificadores de formato %s, %d, %i e %f.

O Console agora executa corretamente as conversões do tipo %s, %d, %i e %f, conforme especificado no Console padrão. 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 exibida, 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 você pode 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. Ele é uma caixa de seleção agora, era um menu suspenso antes.

Além disso, quando Auto Dark Theme estiver ativado, o menu suspenso Emulate prefers-color-scheme será 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 com tema claro quando o usuário ativa temas escuros no sistema operacional.

Problema do Chromium: 1243309

Seletor de cores e painel dividido com suporte a toque

Agora você pode selecionar a cor e redimensionar a gaveta nas Ferramentas do desenvolvedor usando os dedos ou uma stylus em dispositivos com tela touch.

Aqui está um exemplo capturado com a tela touchscreen do dispositivo Google Pixelbook.

Problemas do Chromium: 1284245, 1284995

Destaques diversos

Estas são 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 de comando. (1278743).
• Informe problemas de solicitações de simulação do CORS na guia Problemas. (1272445).
• Informe problemas de dicas de cliente HTTP do user agent na guia Issues. (1219359).
• Os comportamentos Shift + Delete e Page up / Page down foram corrigidos nos painéis Sources 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 Sources. (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

Considere usar o Chrome Canary, Dev ou Beta como seu 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 em 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 de Novidades do DevTools no YouTube ou de dicas do DevTools no YouTube.

Novidades no DevTools

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