Novidades do DevTools (Chrome 99)

Jecelyn Yeen

Como limitar solicitações WebSocket

O painel Network agora é compatível com a limitação 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 Rede, clique em uma solicitação do Web socket e abra a guia Mensagens para observar as transferências de mensagens. Selecione 3G lento para limitar a velocidade.

Como limitar solicitações WebSocket

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 use a API Reporting (por exemplo, página de demonstração). No painel Aplicativo, role para baixo até a seção Serviços em segundo plano 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 oferece uma visão geral de todos os endpoints configurados no cabeçalho Reporting-Endpoints.

Painel da API Reporting

Problema do Chromium: 1205856

Suporte à espera até que o elemento esteja visível/clicável no painel 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.

Veja um exemplo de menu fora da tela posicionado fora da janela de visualização e deslizando quando ativado. O fluxo do usuário é alternar o menu e clicar no item de menu. Anteriormente, a reprodução falhava na última etapa, porque o item de menu ainda está deslizando e não está visível na janela de visualização. Já corrigiu o problema.

Problema do Chromium: 1257499

Melhorias no estilo, na formatação e na filtragem do console

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

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

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

Com essas mudanças, agora você pode depurar seus aplicativos Node.js sem problemas usando o DevTools, com mensagens coloridas adequadas no console. Abra esta demonstração para conferir.

Para saber mais sobre formatação e estilizando mensagens do console com o DevTools, acesse a documentação formatar e estilizar mensagens na documentação do Console.

estilo do 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.

suporte aos especificadores de formato no console do Chat

Problemas do Chromium: 1277944, 1282076

Filtro mais intuitivo de grupo do console

Ao filtrar a mensagem do console, uma mensagem do console será exibida se o conteúdo dela corresponder ao filtro ou se o título do grupo (ou grupo de ancestrais) corresponder ao filtro. Anteriormente, o título do grupo do console era exibido apesar do filtro.

Além disso, se uma mensagem do console for exibida, o grupo (ou grupo de ancestrais) ao qual ele pertence também será exibido.

filtro de grupo do console

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 ao mapa de origem inline para depuração de extensões do Chrome.

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

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 confusão nas estruturas e nos nomes das pastas (por exemplo, “../”, “./” etc). Nos bastidores, isso é o resultado da normalização dos URLs de origem absolutos nos mapas de origem.

Árvore de pastas de origem aprimorada no painel Origens

Problema do Chromium: 1284737

Exibir arquivos de origem do worker no painel "Sources"

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

ALT_TEXT_HERE

Problema do Chromium: 1277002

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

A interface de emulação automática do tema escuro 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.

Emulação automática de tema escuro

Problema do Chromium: 1243309

Seletor de cores sensível ao toque e painel de divisão

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

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:

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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