Novidades do DevTools (Chrome 86)

Painel "New Media"

O DevTools agora exibe informações do player 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 encontrado em chrome://media-internals.

O novo painel "Mídia" oferece uma maneira mais fácil de visualizar eventos, registros, propriedades e uma linha do tempo de frames decodificada na mesma guia do navegador que o próprio player de vídeo. Você pode usar as imagens ao vivo e inspecionar possíveis problemas mais rapidamente (por exemplo, por que frames perdidos estão ocorrendo, por que o JavaScript está interagindo com o player de uma forma inesperada).

Problema do Chromium: 1018414

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

Agora é possível fazer capturas de tela dos nós usando o menu de contexto no painel "Elementos".

Por exemplo, você pode fazer uma captura de tela do sumário clicando com o botão direito do mouse no elemento e selecione Capturar tela do nó.

Problema do Chromium: 1100253

Atualizações da guia Problemas

A barra de aviso "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". Ative a nova opção Incluir de problemas com cookies de terceiros.

Problemas do Chromium: 1096481, 1068116, 1080589

Emular fontes locais ausentes

Abra a guia Renderização e use o novo recurso Desativar fontes locais para emular fontes local() origens nas regras @font-face.

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

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

Muitas vezes, 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

Quando você desativa as fontes locais, fica mais fácil:

• Depurar e medir a performance e a otimização de carregamento de fontes da Web
• Verifique se as regras de @font-face de CSS estão corretas
• Descobrir as diferenças entre as fontes da Web e as versões locais

Problema do Chromium: 384968

Emular usuários inativos

A API Idle Detection permite que os desenvolvedores detectem usuários inativos e reajam quando estiverem inativos. mudanças. Agora você pode usar o DevTools para emular mudanças de estado inativo na guia Sensores do o estado do usuário e o da tela, em vez de esperar que o estado de inatividade real mude. Você pode abrir A guia Sensores da Gaveta.

Problema do Chromium: 1090802

Emular prefers-reduced-data

A consulta de mídia prefers-reduced-data detecta se o usuário prefere que o conteúdo seja exibido de forma alternativa conteúdo que usa menos dados para que a página seja renderizada.

Agora você pode usar o DevTools para emular a consulta de mídia prefers-reduced-data.

Problema do Chromium: 1096068

Compatibilidade com 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 é compatível com a atribuição lógica com o novo operadores &&=, ||= e ??= nos painéis "Console" e "Origens".
• Separadores numéricos com estilo de formatação: o DevTools agora cria uma formatação adequada para os separadores numéricos. no painel Origens.

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 ter acesso lista de alterações.

Novas auditorias no Lighthouse 6.2:

• Evite tarefas de linha de execução principais longas. Informa as tarefas mais longas na linha de execução principal, útil para identificar os piores contribuintes para atrasos de entrada.
• Os links são rastreáveis. Verifique se o atributo href dos elementos de âncora está vinculado a um para que os links possam ser descobertos.
• Elementos de imagem sem tamanho: confira se width e height explícitos estão definidos nos elementos de imagem. O tamanho explícito da imagem pode reduzir as mudanças de layout e melhorar a CLS.
• Evite animações que não são compostas. Relatórios de animações não compostas que aparecem instáveis e reduzir a CLS.
• Escuta os eventos unload. Informa o evento unload. Considere usar o pagehide ou visibilitychange, já que o evento unload não é disparado de maneira confiável.

Auditorias atualizadas no Lighthouse 6.2:

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

Problema do Chromium: 772558

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

O DevTools agora fornece um link para ver a lista completa de service workers de outras origens em um novo guia do navegador: chrome://serviceworker-internals/?devtools.

Anteriormente, o DevTools exibia uma lista aninhada no painel Application > Service workers .

Problema do Chromium: 807440

Mostrar resumo da cobertura dos itens filtrados

O DevTools agora recalcula e exibe um resumo das informações de cobertura dinamicamente quando os filtros são aplicadas na guia Cobertura. Antes, a guia Cobertura sempre exibia uma resumo de todas as informações de cobertura.

No exemplo abaixo, observe como o resumo diz inicialmente 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. e depois diz 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 "Application"

O DevTools agora mostra uma visualização detalhada de cada frame. Para acessá-lo, clique em um frame na coluna Frames no painel Aplicativo.

Problema do Chromium: 1093247

Detalhes do frame para janelas abertas

O DevTools agora também exibe as janelas / pop-ups abertos abaixo da árvore de frames. Visualização de detalhes do frame das janelas abertas, inclui informações de segurança adicionais.

Problema do Chromium: 1107766

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

O DevTools agora exibe contexto seguro, Cross-Origin-Embedder-Policy (COEP) e 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

Elementos e atualizações do painel Network

Sugestão de cor acessível no painel "Estilos"

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

No exemplo abaixo, h1 tem texto de baixo contraste. Para corrigir isso, abra o seletor de cores do color. no painel "Estilos". Depois de expandir a seção Contrast rates, o DevTools fornece acesso AA e sugestões de cores AAA. Clique na cor sugerida para aplicar a cor.

Problema do Chromium: 1093227

Restabelecer o painel Propriedades no painel "Elementos"

O painel "Propriedades" voltou e foi descontinuado no Chrome 84. Em uma versão futura do DevTools, vamos melhorar o fluxo de trabalho de inspeção das propriedades dos elementos.

Problema do Chromium: 1105205, 1116085

Valores de cabeçalho X-Client-Data legíveis por humanos no painel Network

Ao inspecionar um recurso de rede no painel Network, o DevTools agora formata qualquer X-Client-Data valores de cabeçalho no painel Headers como código.

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

Problema do Chromium: 1103854

Preencher automaticamente fontes personalizadas no painel "Estilos"

Os tipos de fonte importados agora são adicionados à lista de preenchimento automático de CSS ao editar o font-family no painel Estilos.

Neste exemplo, 'Noto Sans' é uma fonte personalizada instalada na máquina local. Ele é exibido no a lista de conclusão de CSS. Antes, não era.

Problema do Chromium: 1106221

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

O DevTools agora mostra de forma consistente o mesmo tipo de recurso que a solicitação de rede original e anexa / Redirect ao valor da coluna Type quando ocorre o redirecionamento (status 302).

Anteriormente, o DevTools mudava o tipo para Other algumas vezes.

Problema do Chromium: 997694

Limpar botões nos painéis Elementos e Rede

As caixas de texto de filtro nos painéis Estilos e Rede, bem como o texto de pesquisa do DOM no painel Elementos, agora têm os botões Limpar. Clicar em Limpar remove qualquer texto que de entrada.

Problema do Chromium: 1067184

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