Novidades do DevTools (Chrome 86)

Jecelyn Yeen

Painel "New Media"

O DevTools agora exibe informações do player de mídia no Painel de mídia.

Painel "New Media"

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

Fazer capturas de tela dos nós

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.

Problemas na mensagem do console

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.

caixa de seleção 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.

Emular fontes locais ausentes

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.

Emular usuários inativos

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.

Emular dados preferenciais

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.

Remover imagem

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 identificando os piores fatores para atrasos na 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. Informa 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 .

Vincular a outras origens

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.

Resumo da cobertura para itens filtrados

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.

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

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.

Detalhes do frame da janela aberta

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.

Informações de segurança e isolamento

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.

Painel de propriedades no painel 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.

Valores do cabeçalho "X-Client-Data" legíveis por humanos

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.

Preencher automaticamente fontes personalizadas

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.

Tipo de recurso de redirecionamento de exibição

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.

Limpar botões nos painéis Elementos e Rede

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