index.md

layout	title	authors	date	updated	description	hero	alt	tags
layouts/blog-post.njk	O que há de novo no DevTools (Chrome 99)	jecelynyeen	2022-02-21	2022-02-21	Limitando requests de WebSocket, novo painel da API de relatórios, estilização do console e mais.	image/dPDCek3EhZgLQPGtEG3y0fTn4v82/KFqGlM5UJkIYrjGKHlsa.jpg		new-in-devtools devtools chrome-99

Tradução realizada por Alvaro Camillo Neto. Revisão por Lucas Santos

{% Partial 'devtools/banner.md' %}

{% YouTube id='zFVWeOKZBHs' %}

Limitando requests de WebSocket {: #websocket }

O painel Rede agora é compatível com a limitação de requests de web sockets. Anteriormente, a limitação de rede não funcionava em requests de web sockets.

Abra o painel Rede, clique em uma request de web socket e abra a guia Mensagens para observar as transferências de mensagens. Selecione 3G Lento para limitar a velocidade.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ZHJibovD0IRQ7KrWb0aD.png", alt="Limitando requests de WebSocket", width="800", height="540" %}

Issue relacionada: 423246

Novo painel API de relatórios no painel Aplicativo {: #reporting-api }

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

A API de relatórios foi desenvolvida para ajudar você a monitorar violações de segurança de sua página, chamadas de API obsoletas e muito mais.

Abra uma página que usa a API de relatórios (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 de relatórios.

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

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

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/D1fUz4zuS1xwDbszgft1.png", alt="Painel da API de relatórios", width="800", height="560" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/668bc7a4bc6bea854e8fc21f0e0ca3953ff5e95a #}

Issue relacionada: 1205856

Suporte para esperar até que o elemento esteja visível/clicável no painel Gravação {: #recorder }

Ao reproduzir uma gravação de fluxo do usuário, o painel Gravação agora aguardará até que o elemento fique visível ou clicável na janela de visualização ou tente rolar automaticamente o elemento na janela de visualização antes de reproduzir a etapa. Anteriormente, o replay falhava imediatamente.

Aqui está um exemplo de um menu off-screen posicionado fora da janela de visualização e deslizar quando ativado. O fluxo do usuário é alternar o menu e clicar no item de menu. Anteriormente, a repetição falhava na última etapa, porque o item de menu ainda está deslizando e ainda não está visível na janela de visualização. Está corrigido a partir dessa versão.

{% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/Qf8f2x1u1y5FEMSmkB3A.mp4", class="screenshot", autoplay=true, controls=true, loop=true, muted=true %}

Issue relacionada: 1257499

Melhor estilização, formatação e filtragem do console {: #console }

Estilize corretamente as mensagens de log com código de escape ANSI {: #console-styling }

Agora você pode usar as sequências de escape ANSI para estilizar corretamente as mensagens do console. Anteriormente, o console do DevTools tinha suporte muito limitado (e parcialmente quebrado) para sequências de escape ANSI.

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

Com essas alterações, agora você pode depurar seus aplicativos Node.js perfeitamente usando DevTools, com mensagens de console coloridas adequadas. Abra esta demo para ver você mesmo!

Para saber mais sobre como formatar e estilizar mensagens do console com o DevTools, vá para a documentação de formato e estilo de mensagens no Console. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/6Lu7Js1rgSmjV0cnhDlH.png", alt="estilização do console", width="800", height="547" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/f061ee77a872701a366a604903e639506574520a #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/22a372d445c3f8cff00c2cfe48cb7373165bcd9d #}

Issue Relacionadas: 1282837, 1282076

Suporte adequado os especificadores de formato %s, %d, %i e %f {: #console-format }

O Console agora executa corretamente as conversões de tipo %s, %d, %i e %f conforme especificado no Console Standard. Anteriormente, o resultado da conversa era inconsistente.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/eQPTyQMmyjOUQ6WD4n6N.png", alt="suporte a especificadores de formato na mensagem do console", width="800", height="490" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/2ec299d49c6ab2c185df660766b1fb827db87f8a #}

Issue Relacionadas: 1277944, 1282076

Filtro de grupo de console mais intuitivo {: #console-filter }

Ao filtrar a mensagem do console, uma mensagem do console agora é mostrada se o conteúdo da mensagem corresponder ao filtro ou o título do grupo (ou o grupo ancestral) corresponder ao filtro. Anteriormente, o título do grupo de console era exibido apesar do filtro.

Além disso, se uma mensagem do console for exibida, o grupo (ou o grupo ancestral) ao qual ela pertence agora também é exibido.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/7iE7r79DI3cQxObhiZUh.png", alt="filtro de grupo de console", width="800", height="612" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/94734947c48283a56f93430f23b838cef10fd364 #}

Issue relacionada: 1068788

Melhorias nos source maps {: #sourcemap }

Depuração de extensões do Chrome com arquivos de source map {: #extension }

Agora você pode depurar a extensão do Chrome com arquivos de source map. Anteriormente, o DevTools suportava apenas o sourcemap inline para depuração de extensão do Chrome.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/lnRa954ROl0MSSExlBl7.png", alt="Debug Chrome extension with source map files", width="800", height="518" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/1e73eb62955de7c4b0920575c7b374d47dab6a65 #}

Issue relacionada: 212374

Árvore de pastas aprimorada no painel Fontes {: #source-tree }

A árvore de pastas no painel Fontes agora foi aprimorada com menos confusão nas estruturas de pastas e nomenclatura (por exemplo, “../”, “./”, etc). Sob o capô, isso é o resultado da normalização das URLs de origem absolutas nos source maps.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/Wl1pPVfQ51NaCtpp3KuY.png", alt="Árvore de pastas aprimorada no painel Fontes", width="800", height="444" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/68613ab02f6d556a2c5ac68ea08f466a534c6bd9 #}

Issue relacionada: 1284737

Exibição arquivos fontes de workers no painel Origens {: #worker-sourcemap }

Worker (por exemplo, web worker, service worker) arquivos fontes com SourceURL relativo agora são exibidos no painel Fontes. Anteriormente, os arquivos fontes do worker não eram tratados corretamente.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/apH5n92bqYWINMQn5VXa.png", alt="Exibição arquivos fontes de workers no painel Origens", width="800", height="509" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/6e877d5e1a3ccca22e866fb2a70330613aeb6964 #}

Issue relacionada: 1277002

Atualizações do Tema Escuro Automático do Chrome {: #auto-dark-mode }

A interface do Tema Escuro Automático (Auto Dark Theme) agora está simplificada. Agora é uma caixa de seleção, anteriormente era uma lista suspensa.

Além disso, quando o Auto Dark Theme estiver ativado, o menu suspenso Emular prefers-color-scheme será desativado e definido como prefers-color-scheme: escuro automaticamente.

O Chrome 96 apresentava uma Origin Trial para Auto Dark Theme no Android. Com esse recurso, o navegador aplica um tema escuro gerado automaticamente a sites com temas claros, quando o usuário optou por temas escuros no sistema operacional.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/eqfY1jZI8kY7BknnuAom.png", alt="Emulação Auto Dark Theme", width="800", height="476" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/8443d2894b6401695ce94657e6afd5ad399eef28 #}

Issue relacionada: 1243309

Seletor de cores amigável ao toque e painel dividido {: #touch-friendly }

Agora você pode selecionar cores e redimensionar a Drawer no DevTools com os dedos ou caneta em dispositivos touchscreen.

Aqui está um exemplo capturado com a tela sensível ao toque do dispositivo Google Pixelbook. {% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/aA3Oann2z26Yty9sgNB2.mp4", class="screenshot", autoplay=true, controls=true, loop=true, muted=true %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/f60936b29519e0cf387cd0a133d43885c6eb183d #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/22bb84d657aa69f6f7d5067605c2c133a5714172 #}

Issues relacionadas: 1284245, 1284995

Destaques diversos {: #misc }

Estas são algumas correções dignas de nota nesta versão:

• Corrigido o problema de editar cookies no painel Cookies. (1290196)

• Use Shift + Tab para selecionar o comando anterior no menu Comando. (1278743)

• Informe os problemas de solicitação de simulação do CORS na aba Problemas. (1272445).

• Relate problemas de User-Agent Client Hints na guia Problemas.(https://crbug.com/1219359)).

• Corrigidos os comportamentos Shift + Delete e Page up / Page down no painel Sources e Console. (1278461, 1285662)

• Feche a caixa de diálogo de edição do breakpoint na remoção do breakpoint no painel Fontes. (922513)

{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}