Novidades do DevTools (Chrome 86)

Painel "Nova mídia"

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

Painel "Nova 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 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 ao vivo e inspecionar possíveis problemas mais rapidamente. Por exemplo, por que os frames perdidos estão ocorrendo, 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 fazer capturas de tela dos nós usando o menu de contexto no painel "Elementos".

Por exemplo, é possível fazer uma captura de tela da tabela de conteúdo clicando com o botão direito do mouse no elemento e selecionar 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 com cookies de terceiros agora ficam ocultos por padrão na guia "Problemas". Ative a nova caixa de seleção Incluir problemas de cookies de terceiros para conferir essas informações.

caixa de seleção para problemas com cookies de terceiros

Problemas do Chromium: 1096481, 1068116 e 1080589

Emular fontes locais ausentes

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

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

Quando a opção Desativar fontes locais está ativada, o DevTools ignora as fontes local() e as busca 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

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

  • Depurar e medir o desempenho e a otimização de carregamento de fontes da Web
  • Verifique se as regras @font-face do CSS estão corretas
  • Descobrir as diferenças entre 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 de estado inativo. Agora você pode usar o DevTools para emular mudanças de estado inativo na guia Sensores para o estado do usuário e da tela, em vez de esperar que o estado inativo real mude. Abra 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 use 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 "prefers-reduced-data"

Problema do Chromium: 1096068

Suporte a 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 "Origens".
  • Separadores numéricos de boa impressão: o DevTools agora imprime corretamente 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 conferir uma lista completa das mudanças.

Diminuir o tamanho da 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, úteis para identificar as piores contribuições para o atraso de entrada.
  • Os links são rastreáveis. Verifique se o atributo href dos 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 uma height explícitos estão definidos nos elementos da imagem. Um tamanho de imagem explícito pode reduzir as mudanças de layout e melhorar a CLS.
  • Evite animações não compostas. Informa animações não compostas que aparecem instáveis e reduzem o CLS.
  • Escuta os eventos unload. Informa o evento unload. Considere usar os eventos pagehide ou visibilitychange, já que o evento unload não é disparado de modo confiável.

Atualização de auditorias no Lighthouse 6.2:

  • Remova o JavaScript não usado. O Lighthouse agora vai aprimorar a auditoria se uma página tiver mapas de origem JavaScript com acesso público.

Problema do Chromium: 772558

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

O DevTools agora fornece um link para visualizar a lista completa de service workers de outras origens em uma nova 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 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 mostra 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. depois que a filtragem CSS é aplicada.

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. Acesse-o clicando em um frame no menu Frames no painel Aplicativo.

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

Problema do Chromium: 1093247

Detalhes de frames para janelas abertas

O DevTools também exibe janelas / pop-ups abertos abaixo da á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)

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 à 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 "Estilos"

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

No exemplo abaixo, h1 tem texto de baixo contraste. Para corrigir o problema, abra o seletor de cores da propriedade color no painel Styles. Depois de expandir a seção Taxa de contraste, o DevTools fornece sugestões de cores AA e AAA. Clique na cor sugerida para aplicar a cor.

Problema do Chromium: 1093227

Restabelecer o painel Propriedades no painel Elementos

O painel "Propriedades" está de volta. Seu uso foi suspenso no Chrome 84. Em uma versão futura do DevTools, melhoraremos o fluxo de trabalho para inspecionar propriedades de elementos.

Painel "Propriedades" no painel "Elementos"

Problema do Chromium: 1105205, 1116085

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

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 sinalizações do Chrome que estão ativadas no navegador. Os valores brutos do cabeçalho parecem strings opacas, já que são buffers de protocolo serializados e codificados em base64. Para tornar o conteúdo mais transparente para os desenvolvedores, o DevTools agora mostra os valores decodificados.

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

Problema do Chromium: 1103854

Preencher automaticamente fontes personalizadas no painel "Estilos"

As faces de fonte 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. e aparece na lista de conclusão do CSS. Antes, não era.

Preenchimento automático de fontes personalizadas

Problema do Chromium: 1106221

sempre mostrar o tipo de recurso no painel "Rede"

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

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

Tipo de recurso de redirecionamento de exibição

Problema do Chromium: 997694

Botões Limpar nos painéis Elementos e Rede

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

Botões Limpar 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59