Novidades do DevTools (Chrome 86)

Painel "Nova mídia"

O DevTools agora mostra informações dos players de mídia no painel de mídia.

Antes do novo painel de mídia no DevTools, as informações de registro e depuração sobre players de vídeo podiam ser encontradas em chrome://media-internals.

O novo painel "Mídia" oferece uma maneira mais fácil de ver eventos, registros, propriedades e uma linha do tempo de decodificações de frames na mesma guia do navegador que o player de vídeo. Você pode visualizar e inspecionar problemas em tempo real com mais rapidez (por exemplo, por que há perda de frames, por que o JavaScript está interagindo com o player de maneira inesperada).

Problema do Chromium: 1018414

Fazer capturas de tela de nós pelo menu de contexto do painel "Elementos"

Agora é possível capturar capturas de tela de nós pelo menu de contexto no painel "Elementos".

Por exemplo, clique com o botão direito do mouse no elemento e selecione Capturar captura de tela do nó.

Problema do Chromium: 1100253

Atualizações da guia "Problemas"

A barra de aviso de problemas no painel do console foi substituída por uma mensagem normal.

Os problemas de cookies de terceiros agora ficam ocultos por padrão na guia "Problemas". Marque a nova caixa de seleção Incluir problemas com cookies de terceiros para conferir.

Problemas do Chromium: 1096481, 1068116, 1080589

Emular fontes locais ausentes

Abra a guia Rendering e use o novo recurso Desativar fontes locais para emular fontes local() ausentes em regras @font-face.

Por exemplo, quando a fonte "Rubik" está instalada no seu dispositivo e a regra @font-face src a usa como uma fonte local(), o Chrome usa o arquivo de fonte local do seu dispositivo.

Quando a opção Desativar fontes locais está ativada, o DevTools ignora as fontes local() e as busca na rede.

Muitas vezes, os desenvolvedores e designers usam duas cópias diferentes da mesma fonte durante o desenvolvimento:

• Uma fonte local para suas ferramentas de design e
• Uma fonte da Web para seu código

Ao desativar as fontes locais, você pode:

• Depurar e medir a performance e a otimização do carregamento de fontes da Web
• Verificar a correção das regras do CSS @font-face
• Descobrir diferenças entre fontes da Web e versões locais

Problema do Chromium: 384968

Simular usuários inativos

A API Idle Detection permite que os desenvolvedores detectem usuários inativos e reajam a mudanças no estado de inatividade. Agora é possível usar as DevTools para emular mudanças de estado de inatividade na guia Sensores para o estado do usuário e da tela, em vez de esperar que o estado de inatividade real mude. Abra a guia Sensores na gaveta.

Problema do Chromium: 1090802

Emular prefers-reduced-data

A consulta de mídia prefers-reduced-data detecta se o usuário prefere receber conteúdo alternativo que usa menos dados para renderizar a página.

Agora é possível usar o DevTools para emular a consulta de mídia prefers-reduced-data.

Problema do Chromium: 1096068

Suporte para novos recursos do JavaScript

O DevTools agora tem um suporte melhor para alguns dos recursos mais recentes da linguagem JavaScript:

• Operadores de atribuição lógica: o DevTools agora oferece suporte à atribuição lógica com os novos operadores &&=, ||= e ??= nos painéis "Console" e "Fontes".
• Impressão bonita de separadores numéricos: agora o DevTools imprime corretamente os separadores numéricos no painel "Fontes".

Problemas do Chromium: 1086817, 1080569

Lighthouse 6.2 no painel do Lighthouse

O painel do Lighthouse agora está executando o Lighthouse 6.2. Confira as notas da versão para uma lista completa de mudanças.

Novas auditorias no Lighthouse 6.2:

• Evite tarefas longas da linha de execução principal. Informa as tarefas mais longas na linha de execução principal. Útil para identificar os piores contribuidores para a latência de entrada.
• Os links são rastreáveis. Verifique se o atributo href de elementos de âncora está vinculado a um destino adequado para que os links possam ser descobertos.
• Elementos de imagem sem tamanho definido: verifique se um width e height explícitos estão definidos nos elementos de imagem. O tamanho explícito da imagem pode reduzir mudanças de layout e melhorar a CLS.
• Evite animações não compostas. Informa sobre animações não compostas que parecem instáveis e reduzem a CLS.
• Detecta os eventos unload. Informa o evento unload. Recomendamos o uso dos eventos pagehide ou visibilitychange, já que o evento unload não é acionado de forma confiável.

Auditorias atualizadas no Lighthouse 6.2:

• Remova o JavaScript não usado. O Lighthouse vai aprimorar a auditoria se uma página tiver mapas de origem JavaScript acessíveis publicamente.

Problema do Chromium: 772558

Descontinuação da listagem "outras origens" no painel "Service Workers"

O DevTools agora oferece um link para conferir a lista completa de service workers de outras origens em uma nova guia do navegador: chrome://serviceworker-internals/?devtools.

Antes, o DevTools mostrava uma lista aninhada no painel Application > Service workers.

Problema do Chromium: 807440

Mostrar resumo da cobertura para itens filtrados

Agora, o DevTools recalcula e mostra um resumo das informações de cobertura de forma dinâmica quando os filtros são aplicados na guia Cobertura. Antes, a guia Cobertura sempre mostrava um resumo de todas as informações de cobertura.

No exemplo abaixo, observe como o resumo inicialmente diz 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. e depois 57 kB of 604 kB (10%) used so far. 546 kB unused. após a aplicação da filtragem de CSS.

Problema do Chromium: 1061385

Nova visualização de detalhes do frame no painel "Aplicativo"

Agora, o DevTools mostra uma visualização detalhada de cada frame. Para acessar, clique em um frame no menu Frames do painel Application.

Problema do Chromium: 1093247

Detalhes do frame para janelas abertas

O DevTools agora também mostra janelas / pop-ups abertos na árvore de frames. A visualização de detalhes do frame das janelas abertas inclui mais informações de segurança.

Problema do Chromium: 1107766

Informações de segurança e isolamento (COEP / COOP)

Agora, o DevTools mostra o contexto seguro, a Cross-Origin-Embedder-Policy (COEP) e a Cross-Origin-Opener-Policy (COOP) nos detalhes do frame.

Mais informações de segurança serão adicionadas em breve à visualização de detalhes do frame.

Problema do Chromium: 1051466

Atualizações nos painéis Elementos e Rede

Sugestão de cores acessíveis no painel "Estilos"

O DevTools agora oferece sugestões de cores para textos com baixo contraste.

No exemplo abaixo, h1 tem texto de baixo contraste. Para corrigir isso, abra o seletor de cores da propriedade color no painel "Estilos". Depois de abrir a seção Taxa de contraste, o DevTools oferece sugestões de cores AA e AAA. Clique na cor sugerida para aplicá-la.

Problema do Chromium: 1093227

Restabelecer o painel Propriedades no painel "Elementos"

O painel "Propriedades" está de volta. Ele foi descontinuado no Chrome 84. Em uma versão futura do DevTools, vamos melhorar o fluxo de trabalho para inspecionar propriedades de elementos.

Problema do Chromium: 1105205, 1116085

Valores de cabeçalho X-Client-Data legíveis para humanos no painel "Rede"

Ao inspecionar um recurso de rede no painel "Rede", o DevTools agora formata todos os valores de cabeçalho X-Client-Data no painel "Cabeçalhos" como código.

O cabeçalho HTTP X-Client-Data contém uma lista de IDs de experimentos e flags do Chrome ativadas no seu navegador. Os valores de cabeçalho brutos parecem strings opacas porque são codificados em base64 e serializados buffers de protocolo. Para tornar o conteúdo mais transparente para os desenvolvedores, o DevTools agora mostra os valores decodificados.

Problema do Chromium: 1103854

Preenchimento automático de fontes personalizadas no painel "Estilos"

As famílias tipográficas importadas agora são adicionadas à lista de preenchimento automático de CSS ao editar a propriedade font-family no painel Estilos.

Neste exemplo, 'Noto Sans' é uma fonte personalizada instalada na máquina local. Ela aparece na lista de conclusão do CSS. Antes, não era.

Problema do Chromium: 1106221

Mostrar o tipo de recurso de forma consistente no painel "Rede"

Agora, o DevTools mostra consistentemente o mesmo tipo de recurso que a solicitação de rede original e adiciona / Redirect ao valor da coluna Tipo quando ocorre um redirecionamento (status 302).

Antes, o DevTools mudava o tipo para Other às vezes.

Problema do Chromium: 997694

Botões de limpeza nos painéis "Elementos" e "Rede"

As caixas de texto de filtro no painel Estilos e no painel Rede, bem como a caixa de texto de pesquisa do DOM no painel Elementos, agora têm botões Limpar. Ao clicar em Limpar, todo o texto inserido é removido.

Problema do Chromium: 1067184

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.