Novidades do DevTools (Chrome 86)

Jecelyn Yeen

Painel "Nova mídia"

Agora, o DevTools mostra informações sobre os players de mídia no Painel de mídia.

Painel "Nova mídia"

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

O novo painel de mídia oferece uma maneira mais fácil de visualizar eventos, registros, propriedades e uma linha do tempo de decodificações de frames na mesma guia do navegador que o próprio player de vídeo. É possível visualizar e inspecionar problemas em tempo real com mais rapidez (por exemplo, por que os frames estão sendo descartados, por que o JavaScript está interagindo com o player de maneira inesperada).

Problema do Chromium: 1018414

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

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

Por exemplo, é possível fazer uma captura de tela do sumário clicando com o botão direito do mouse no elemento e selecionando Capturar captura de tela do nó.

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

Problemas na mensagem do console

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

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() 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 Disable local fonts está ativada, o DevTools ignora as fontes local() e as busca da 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;
  • Uma fonte da Web para seu código

Ao desativar as fontes locais, fica mais fácil:

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

Problema do Chromium: 384968

Emular usuários inativos

A API Idle Detection permite que os desenvolvedores detectem usuários inativos e reajam a mudanças no estado ocioso. Agora é possível usar as Ferramentas do desenvolvedor 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. É possível abrir a guia Sensores na 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 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.

Emular "prefers-reduced-data"

Problema do Chromium: 1096068

Suporte a novos recursos do JavaScript

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

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 conferir uma lista completa de mudanças.

Redimensionar imagem

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: verifique se um width e um 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 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 é confiável.

Auditorias atualizadas no Lighthouse 6.2:

  • Remover JavaScript não usado. Agora, o Lighthouse vai melhorar a auditoria se uma página tiver mapas de origem JavaScript acessíveis publicamente.

Problema do Chromium: 772558

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

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

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

Vincular a outras origens

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 Coverage. Anteriormente, 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 diz 57 kB of 604 kB (10%) used so far. 546 kB unused. depois que a filtragem de CSS foi aplicada.

Resumo da cobertura para itens filtrados

Problema do Chromium: 1061385

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

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

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

Problema do Chromium: 1093247

Detalhes do frame para janelas abertas

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

Detalhes do frame da janela aberta

Problema do Chromium: 1107766

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

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

Informações sobre segurança e isolamento

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

Problema do Chromium: 1051466

Atualizações do painel "Elementos e rede"

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

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

No exemplo abaixo, h1 tem texto de baixo contraste. Para corrigir, abra o seletor de cores da propriedade color no painel "Styles". Depois de expandir 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

Restaurar o painel Propriedades no painel "Elementos"

O painel "Propriedades" voltou, ele foi descontinuado no Chrome 84. Em uma versão futura das Ferramentas do desenvolvedor, vamos melhorar o fluxo de trabalho para inspecionar propriedades de 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 "Rede"

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

O cabeçalho HTTP X-Client-Data contém uma lista de IDs de experimentos e flags do Chrome ativadas no navegador. Os valores do cabeçalho bruto parecem strings opacas, já que são buffers de protocolo codificados em base64 e serializados. Para tornar o conteúdo mais transparente para os desenvolvedores, as Ferramentas do desenvolvedor agora mostram os valores decodificados.

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

Problema do Chromium: 1103854

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

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

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

Preenchimento automático de fontes personalizadas

Problema do Chromium: 1106221

Mostrar o tipo de recurso de forma consistente no painel de rede

Agora, o DevTools mostra de forma consistente o mesmo tipo de recurso da solicitação de rede original e adiciona / Redirect ao valor da coluna Type quando ocorre o redirecionamento (status 302).

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

Mostrar o tipo de recurso de redirecionamento

Problema do Chromium: 997694

Limpar botões nos painéis "Elements" e "Network"

As caixas de texto de filtro no painel Styles e Network, bem como a caixa de texto de pesquisa do DOM no painel Elements, agora têm botões Clear. Clicar em Limpar remove qualquer texto que você tiver inserido.

Limpar botões nos painéis "Elements" e "Network"

Problema do Chromium: 1067184

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.

Novidades no DevTools

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