Jecelyn Yeen
Novas ferramentas de depuração de CSS flexbox
O DevTools agora tem ferramentas de depuração de CSS flexbox dedicadas!
Quando um elemento HTML em sua página tem display: flex ou display: inline-flex aplicados, você
é possível ver o selo flex ao lado dele no painel Elementos. Clique no selo para alternar a exibição
sobreposição flexível na página.
No painel Styles, clique no novo ícone ao lado do display: flex ou
display: inline-flex para abrir o editor do Flexbox. O editor Flexbox fornece uma maneira rápida de editar
as propriedades flexbox. Faça um teste!
Além disso, o painel Layout tem uma seção Flexbox, que exibe todos os elementos flexbox no página. É possível alternar a sobreposição de cada elemento.
Problemas do Chromium: 1166710, 1175699
Nova sobreposição de Core Web Vitals
Visualize e meça melhor o desempenho da página com a nova sobreposição de Core Web Vitals.
As Core Web Vitals são uma iniciativa do Google para fornecer orientações unificadas para indicadores de qualidade que são essenciais para oferecer uma ótima experiência do usuário na Web.
Abra o Menu de comando, execute o comando Show Rendering e ative a opção Core Web Caixa de seleção de métricas.
A sobreposição mostra:
- Maior exibição de conteúdo (LCP): mede o desempenho do carregamento. Para oferecer um bom usuário experiência do usuário, a LCP precisa ocorrer até 2,5 segundos após o início do carregamento da página.
- First Input Delay (FID): mede a interatividade. Para oferecer uma boa experiência do usuário, as páginas precisa ter uma FID de menos de 100 milissegundos.
- Cumulative Layout Shift (CLS, na sigla em inglês): avalia a estabilidade visual. Para oferecer um bom usuário as páginas precisam manter uma CLS menor que 0, 1.
Problema do Chromium: 1152089
Atualizações da guia "Problemas"
Contagem de problemas movida para a barra de status do console
Adicionamos um novo botão de contagem de problemas à barra de status do console para melhorar a visibilidade dos emite avisos. Isso substituirá a mensagem de problema no Console.
Problema do Chromium: 1140516
Informar problemas de Atividade na Web Confiável
A guia "Problemas" agora informa os problemas da Atividade confiável na Web. O objetivo disso é ajudar os desenvolvedores entender e corrigir os problemas de Atividade Confiável na Web de seus sites, melhorando a qualidade aplicativos conteinerizados.
Abra uma Atividade na Web confiável. Depois, abra a guia Problemas clicando em Contagem de problemas. na barra de status do Console para conferir os problemas. Assista a esta palestra de Andre para saber saber mais sobre como criar e implantar atividades confiáveis na Web.
Problema do Chromium: 1147479
Formatar strings como literais de string JavaScript (válidos) no Console
Agora, o Console formata as strings como literais de string JavaScript válidos. Antes, o Console não teria escape de aspas duplas ao imprimir strings.
Problema do Chromium: 1178530
Novo painel "Tokens de confiança" no painel "Aplicativo"
O DevTools agora exibe todos os tokens de confiança disponíveis no contexto de navegação atual na nova coluna Trust Tokens, no painel Application.
O Trust Token é uma nova API para ajudar a combater fraudes e distinguir bots de pessoas reais, sem passividade monitoramento. Saiba como usar os tokens de confiança.
Problema do Chromium: 1126824
Emular o recurso de gama de cores do CSS
A consulta de mídia color-gamut permite testar o intervalo aproximado de cores com suporte.
pelo navegador e pelo dispositivo de saída. Por exemplo, se a consulta de mídia color-gamut: p3 corresponder, ela
significa que o dispositivo do usuário é compatível com o espaço de cores Display-P3.
Abra o Menu de comando, execute o comando Show Rendering e configure a opção Emulate CSS menu suspenso de gama de cores do recurso de mídia.
Problema do Chromium: 1073887
Ferramentas aprimoradas de Progressive Web Apps
O DevTools agora mostra uma mensagem de aviso mais detalhada sobre a instalação de Progressive Web Apps (PWA). no Console, com um link para a documentação.
O painel Manifest agora mostra uma mensagem de aviso se a description do manifesto exceder 324. caracteres.
Além disso, o painel Manifest agora mostra uma mensagem de aviso se a captura de tela do PWA não mostrar atendem aos requisitos. Saiba mais sobre a propriedade capturas de tela do PWA e os requisitos dela. aqui.
Problema do Chromium: 1146450, 1169689, 965802
Nova coluna Remote Address Space no painel Network
Use a nova coluna Remote Address Space no painel Network para ver o espaço do endereço IP da rede.
de cada recurso da rede.
Problema do Chromium: 1128885
Melhorias no desempenho
O desempenho dos carregamentos de página com o DevTools aberto foi aprimorado. Em alguns casos extremos, vimos 10 vezes e melhorias de desempenho.
O DevTools coleta stack traces e os anexa a mensagens do console ou tarefas assíncronas para uso posterior é consumido pelo desenvolvedor em caso de problemas. Como essa coleta precisa ser feita de forma síncrona, no mecanismo do navegador, a coleta lenta de stack trace pode atrasar significativamente a página com DevTools abertos. Conseguimos reduzir significativamente a sobrecarga da coleta de stack trace.
Não perca a postagem do blog de engenharia com mais detalhes sobre a implementação.
Problemas do Chromium: 1069425, 1077657
Exibir recursos permitidos/proibidos na visualização de detalhes do frame
A visualização de detalhes do frame agora mostra uma lista de recursos do navegador permitidos e proibidos controlados pelo Política de permissões.
A política de permissões é uma API de plataforma da Web que permite que um site permita ou bloqueie o uso de recursos do navegador em seu próprio frame ou em iframes que ele incorpora.
Problema do Chromium: 1158827
Nova coluna SameParty no painel "Cookies"
O painel "Cookies" no painel "Aplicativo" agora exibe o atributo SameParty dos cookies. A
O atributo SameParty é um novo atributo booleano que indica se um cookie precisa ser incluído em
solicitações para origens dos mesmos Conjuntos primários.
Problema do Chromium: 1161427
O suporte a fn.displayName não padrão foi descontinuado
O suporte ao fn.displayName não padrão foi descontinuado. Use fn.name.
Tradicionalmente, o Chrome oferece suporte à propriedade fn.displayName não padrão como uma forma de
os desenvolvedores controlarem nomes de depuração para funções que aparecem em error.stack e na pilha do DevTools
vestígios. No exemplo acima, a Pilha de chamadas mostrava anteriormente noLongerSupport.
Substitua fn.displayName pelo fn.name padrão, que se tornou configurável (usando o
Object.defineProperty) no ECMAScript 2015 para substituir a propriedade fn.displayName não padrão.
O suporte para fn.displayName não era confiável e não era consistente entre os mecanismos do navegador. Ela diminui
coleta de stack trace, um custo que os desenvolvedores sempre pagam, independentemente de usarem
fn.displayName ou não.
Problema do Chromium: 1177685
Descontinuação de Don't show Chrome Data Saver warning no menu "Configurações"
A configuração Don't show Chrome Data Saver warning foi removida porque a Economia de dados do Chrome foi
descontinuada.
Problema do Chromium: 1056922
Recursos experimentais
Relatório automático de problemas de baixo contraste na guia "Problemas"
O DevTools adicionou suporte experimental para informar problemas de contraste automaticamente na guia "Issues".
Texto de baixo contraste é o problema de acessibilidade detectável automaticamente mais comum na Web. Mostrar esses problemas na guia "Problemas" ajuda os desenvolvedores a descobri-los com mais facilidade.
Abra uma página com problemas de baixo contraste (por exemplo, esta demo). Em seguida, abra a guia Problemas ao Clique no botão Contagem de problemas na barra de status do console para conferir os problemas.
Problema do Chromium: 1155460
Visualização em árvore de acessibilidade completa no painel Elementos
Agora você pode alternar para ver a nova e aprimorada visualização em árvore de acessibilidade de uma página.
O painel de acessibilidade atual oferece uma exibição limitada dos nós, mostrando apenas os cadeia de ancestral direta do nó raiz para o nó inspecionado. A nova visualização em árvore de acessibilidade visa para melhorar isso e torna a árvore de acessibilidade mais explorável, útil e fácil para os desenvolvedores usar.
Depois de ativar o experimento, um novo botão vai aparecer no painel Elementos. Clique para alternar. entre a árvore DOM existente e a árvore de acessibilidade completa.
Este é um experimento em estágio inicial. Planejamos melhorar e expandir essa funcionalidade ao longo do tempo.
Problema do Chromium: 887173
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.
- O Gravador oferece suporte à exportação para o Puppeteer para Firefox
- Melhorias no painel de desempenho
- Observações de métricas em tempo real
- Solicitações de pesquisa na faixa de rede
- Confira os stack traces das chamadas performance.mark e performance.measure.
- Usar dados de endereço de teste no painel de preenchimento automático
- Melhorias no painel "Elements"
- Forçar mais estados para elementos específicos
- Elementos > Os estilos agora preenchem automaticamente mais propriedades de grade
- Lighthouse versão 12.2.0
- Destaques diversos
- Os insights do console do Gemini serão disponibilizados na maioria dos países europeus
- Atualizações do painel de desempenho
- Rastreamento de rede aprimorada
- Personalizar dados de desempenho com a API de extensibilidade
- Detalhes em "Tempos"
- Copiar todas as solicitações listadas no painel "Rede"
- Snapshots de heap mais rápidos com tags HTML nomeadas e menos confusão
- Abrir o painel "Animações" para capturar animações e editar @frames-chave em tempo real
- Lighthouse versão 12.1.0
- Melhorias na acessibilidade
- Destaques diversos
- Inspecionar o posicionamento da âncora de CSS no painel Elementos
- Melhorias no painel "Fontes"
- "Nunca pause aqui" aprimorado
- Novos listeners de eventos de ajuste de rolagem
- Melhorias no painel Network
- Predefinições de limitação de rede atualizadas
- Informações do service worker em campos personalizados do formato HAR
- Enviar e receber eventos WebSocket no painel "Desempenho"
- Destaques diversos
- Melhorias no painel de desempenho
- Mover e ocultar faixas com o modo de configuração de faixa atualizado
- Ignorar scripts no Flame Chart
- Limitar a CPU em 20 vezes
- O painel de insights de desempenho será descontinuado
- Encontre o uso excessivo da memória com novos filtros em snapshots de heap
- Inspecione buckets de armazenamento em Aplicativo > Armazenamento
- Desativar avisos de self-XSS com uma flag de linha de comando
- Lighthouse versão 12.0.0
- Destaques diversos
- Entenda melhor os erros e avisos no console com o Gemini
- Suporte para regras@position-try em Elementos > Estilos
- Melhorias no painel "Fontes"
- Configurar estilos de formatação automáticos e fechamento de colchetes
- Promessas rejeitadas processadas são reconhecidas como capturadas
- Causas de erro no console
- Melhorias no painel Network
- Inspecionar cabeçalhos das dicas iniciais
- Ocultar a coluna "Cascata"
- Melhorias no painel de desempenho
- Capturar estatísticas do seletor de CSS
- Mudar a ordem e ocultar faixas
- Ignorar retenções no painel Memória
- Lighthouse 11.7.1 (link em inglês)
- Destaques diversos
- Novo painel de preenchimento automático
- Limitação aprimorada de rede para WebRTC
- Suporte para animações de rolagem no painel "Animações"
- Suporte para aninhamento de CSS aprimorado em Elementos > Estilos
- Painel de desempenho aprimorado
- Ocultar funções e os filhos delas no Flame Chart
- Setas de iniciadores selecionados para os eventos que eles iniciaram
- Lighthouse versão 11.6.0
- Dicas para categorias especiais em Memória > Instantâneos de heap
- Aplicativo > Atualizações de armazenamento
- Bytes usados para armazenamento compartilhado
- O Web SQL foi totalmente descontinuado
- Melhorias no painel de cobertura
- O painel "Camadas" pode ter sido descontinuado
- Descontinuação do JavaScript Profiler: fase 4, final
- Destaques diversos
- Encontre um easter egg
- Atualizações do painel Elements
- Emule uma página em foco em Elementos > Estilos
- Seletor de cores, Relógio Ângulo e Editor de Easing nos substitutos do
var() - A ferramenta de comprimento de CSS foi descontinuada
- Pop-over para o resultado de pesquisa selecionado na página Desempenho > Música principal
- Atualizações do painel Network
- Botão "Limpar" e "Filtro de pesquisa" em Rede > Guia EventStream
- Dicas com motivos de isenção para cookies de terceiros em Rede > Cookies
- Ativar e desativar todos os pontos de interrupção em origens
- Ver os scripts carregados no DevTools para Node.js
- Lighthouse versão 11.5.0
- Melhorias na acessibilidade
- Destaques diversos
- A coleção oficial de extensões do Gravador está disponível
- Melhorias na rede
- Motivo da falha na coluna "Status"
- Submenu "Copiar" aprimorado
- Melhorias no desempenho
- Navegação estrutural na linha do tempo
- Iniciadores de eventos na faixa principal
- Menu seletor de instâncias de VM JavaScript para DevTools do Node.js
- Novo atalho e comando em Origens
- Melhorias nos elementos
- O pseudoelemento de transição de visualização agora pode ser editado em Estilos
- Compatibilidade com a propriedade align-content para contêineres de bloco
- Suporte de postura para dispositivos dobráveis emulados
- Temas dinâmicos
- Avisos de descontinuação gradual de cookies de terceiros nos painéis "Rede" e "Aplicativo"
- Lighthouse versão 11.4.0
- Melhorias na acessibilidade
- Destaques diversos
- Melhorias nos elementos
- Barra de filtro simplificada no painel "Network"
- Suporte do
@font-palette-values - Caso compatível: propriedade personalizada como substituta de outra
- Suporte aprimorado a mapas de origem
- Melhorias no painel de desempenho
- Faixa de interações aprimoradas
- Filtragem avançada nas guias "De baixo para cima", "Árvore de chamadas" e "Log de eventos"
- Marcadores de recuo no painel "Sources"
- Dicas úteis para cabeçalhos e conteúdo modificados no painel "Rede"
- Novas opções do menu de comando para adicionar e remover padrões de bloqueio de solicitações
- O experimento de violações da CSP foi removido
- Lighthouse versão 11.3.0
- Melhorias na acessibilidade
- Destaques diversos
- Desativação de cookies de terceiros
- Analisar os cookies do seu site com a Ferramenta de análise de dados do Sandbox de privacidade
- ignorar lista aprimorada
- Padrão de exclusão padrão para node_modules
- As exceções capturadas agora interrompem a execução se capturadas ou transmitidas por código não ignorado
x_google_ignoreListrenomeado comoignoreListnos mapas de origem- Novo botão para ativar/desativar o modo de entrada durante a depuração remota
- O painel Elementos agora mostra URLs para nós de #documentos
- Política efetiva de segurança de conteúdo no painel de aplicativos
- Depuração de animação aprimorada
- "Você confia neste código?" Caixa de diálogo em "Sources and self-XSS" no console
- Pontos de interrupção de listener de eventos em workers da Web e worklets
- O novo selo de mídia para
<audio>e<video> - Pré-carregamento renomeado para carregamento especulativo
- Lighthouse versão 11.2.0
- Melhorias na acessibilidade
- Destaques diversos
- Seção @property aprimorada em Elementos > Estilos
- Regra @propriedade editável
- Foram relatados problemas com regras @property inválidas
- Lista atualizada de dispositivos a serem emulados
- JSON in-line de estilo atraente em tags de script no Source
- Preencher campos particulares automaticamente no console
- Lighthouse versão 11.1.0
- Melhorias na acessibilidade
- Descontinuação do Web SQL
- Validação da proporção da captura de tela em Aplicativo > Manifesto
- Destaques diversos
- Nova seção para propriedades personalizadas em Elementos > Estilos
- Mais melhorias nas substituições locais
- Pesquisa aprimorada
- Painel "Origens" aprimorado
- Espaço de trabalho simplificado no painel "Origens"
- Reordenar painéis em Origens
- Destaque de sintaxe e estilos de formatação para mais tipos de script
- Emular o recurso de mídia "prefers-reduced-transparency"
- Farol 11
- Melhorias na acessibilidade
- Destaques diversos
- Melhorias no painel Network
- Substituir o conteúdo da Web localmente com ainda mais rapidez
- Substituir o conteúdo de XHR e solicitações de busca
- Ocultar solicitações de extensões do Chrome
- Códigos de status HTTP legíveis por humanos
Desempenho: confira as mudanças na prioridade de busca para eventos de rede
- Configurações de origens ativadas por padrão: dobramento de código e revelação automática de arquivos
- Depuração aprimorada de problemas de cookies de terceiros
- Novas cores
- Lighthouse versão 10.4.0
- Depurar o pré-carregamento no painel "Aplicativo"
- A extensão de depuração C/C++ WebAssembly para DevTools agora é de código aberto
- Destaques diversos
- (Experimental) Nova emulação de renderização: prefers-reduced-transparency
- (Experimental) Monitoramento do protocolo aprimorado
- Depuração aprimorada de folhas de estilo ausentes
- Compatibilidade com tempo linear em Elementos > Estilos > Editor de easing
- Suporte para buckets de armazenamento e visualização de metadados
- Lighthouse versão 10.3.0
- Acessibilidade: comandos do teclado e leitura de tela aprimorada
- Destaques diversos
- Melhorias nos elementos
- Novo selo de subgrade de CSS
- Especificidade do seletor nas dicas
- Valores de propriedades CSS personalizadas em dicas
- Melhorias nas fontes
- Destaque da sintaxe CSS
- Atalho para definir pontos de interrupção condicionais
- Aplicativo > Mitigações de rastreio por redirecionamento
- Lighthouse versão 10.2.0
- Ignorar scripts de conteúdo por padrão
- Rede > Melhorias nas respostas
- Destaques diversos
- Suporte para depuração do WebAssembly
- Melhorias no comportamento de caminhar em apps Wasm
- Depurar o preenchimento automático usando o painel "Elementos" e a guia "Problemas"
- Declarações no Gravador
- Lighthouse 10.1.1 (link em inglês)
- Melhorias no desempenho
- performance.mark() mostra o tempo ao passar o cursor em "Performance" > Prazos
- o comando profile() preenche Desempenho > Principal
- Aviso sobre interações lentas do usuário
- Atualizações das Métricas da Web
- Descontinuação do JavaScript Profiler: fase 3
- Destaques diversos
- Substituir cabeçalhos de resposta da rede
- Melhorias na depuração de Nuxt, Vite e Rollup
- Melhorias de CSS em Elementos > Estilos
- Propriedades e valores CSS inválidos
- Links para os frames-chave na propriedade abreviada da animação
- Configuração do novo console: preenchimento automático ao pressionar Enter
- O menu de comando enfatiza arquivos criados
- Descontinuação do JavaScript Profiler: estágio dois
- Destaques diversos
- Atualizações do Gravador
- Extensões de repetição do Gravador
- Gravar com seletores de pierce
- Exportar gravações como scripts do Puppeteer com a análise do Lighthouse
- Instalar extensões do Gravador
- Elementos > Atualizações de estilo
- Documentação de CSS no painel "Estilos"
- Suporte para aninhamento de CSS
- Marcação de logpoints e pontos de interrupção condicionais no Console
- Ignorar scripts irrelevantes durante a depuração
- Descontinuação do JavaScript Profiler iniciada
- Emular contraste reduzido
- Farol 10
- Destaques diversos
- Depurar a cor em alta definição com o painel "Estilos"
- UX aprimorada do ponto de interrupção
- Atalhos do Gravador personalizáveis
- Melhor destaque de sintaxe para o Angular
- Reorganizar caches no painel "Aplicativo"
- Destaques diversos
- Como limpar o Painel de desempenho ao recarregar
- Atualizações do Gravador
- Conferir e destacar o código do fluxo do usuário no Gravador
- Personalizar os tipos de seletor de uma gravação
- Editar o fluxo do usuário durante a gravação
- Impressão automática no local
- Destaque de sintaxe aprimorado e visualização inline para Vue, SCSS e muito mais
- Preenchimento automático ergonômico e consistente no console
- Destaques diversos
- Gravador: copiar como opções para etapas, repetição na página, menu de contexto da etapa
- Mostrar os nomes reais das funções nas gravações da apresentação
- Novos atalhos do teclado no console e Painel de fontes
- Depuração de JavaScript aprimorada
- Destaques diversos
- [Experimental] UX aprimorada no gerenciamento de pontos de interrupção
- [Experimental] Impressão automática no local
- Dicas para propriedades CSS inativas
- Detectar automaticamente seletores XPath e de texto no painel Gravador
- Usar expressões separadas por vírgulas
- Melhoria na configuração "Lista de ignorados"
- Destaques diversos
- Personalizar atalhos de teclado no DevTools
- Alternar temas claros e escuros com o atalho do teclado
- Destacar objetos C/C++ no Memory Inspector
- Suporte a informações completas do iniciador para importação HAR
- Iniciar a pesquisa do DOM depois de pressionar
Enter - Mostrar ícones
starteendpara as propriedades flexbox do CSSalign-content - Destaques diversos
- Agrupar arquivos por Criado / Implantado no painel Origens
- Stack traces vinculados para operações assíncronas
- Ignorar automaticamente scripts de terceiros conhecidos
- Pilha de chamadas aprimorada durante a depuração
- Como ocultar fontes da lista de ignorados no painel Fontes
- Como ocultar arquivos da lista de ignorados no menu de comando
- Nova faixa de interações no painel "Desempenho"
- Detalhamento de tempos de LCP no painel de insights de desempenho
- Gerar automaticamente o nome padrão das gravações no painel do Gravador
- Destaques diversos
- Repetir passo a passo no Gravador
- Suporte para evento de passagem de mouse no painel do Gravador
- Maior exibição de conteúdo (LCP) no painel de insights de desempenho
- Identificar trechos de texto (FOIT, FOUT) como possíveis causas de mudanças de layout
- Manipuladores de protocolo no painel "Manifesto"
- Selo de camada superior no painel Elementos
- Anexar informações de depuração do Wasm durante a execução
- Suporte à edição em tempo real durante a depuração
- Conferir e editar as regras do @scope no painel "Styles"
- Melhorias no mapa de origem
- Destaques diversos
- Reiniciar o frame durante a depuração
- Opções de repetição lenta no painel do Gravador
- Criar uma extensão para o painel do Gravador
- Agrupar arquivos por Criado / Implantado no painel Origens
- Novo acompanhamento de velocidade do usuário no painel de insights de desempenho
- Revelar o espaço atribuído de um elemento
- Simular a simultaneidade de hardware para as gravações de performance
- Visualizar um valor sem cor ao preencher automaticamente as variáveis CSS
- Identificar frames de bloqueio no painel de cache de avanço e retorno
- Sugestões aprimoradas de preenchimento automático para objetos JavaScript
- Melhorias nos mapas de origem
- Destaques diversos
- Capturar eventos de clique duplo e de clique com o botão direito do mouse no painel Gravador
- Novo modo de período e de resumo no painel do Lighthouse
- Controle de zoom melhorado no painel "Insights de desempenho"
- Confirmar a exclusão de uma gravação de performance
- Reordenar painéis no painel Elementos
- Escolher uma cor fora do navegador
- Melhor visualização do valor inline durante a depuração
- Suporte a blobs grandes para autenticadores virtuais
- Novos atalhos do teclado no painel Origens
- Melhorias nos mapas de origem
- Recurso de pré-lançamento: novo painel de insights de desempenho
- Novos atalhos para emular temas claros e escuros
- Segurança aprimorada na guia "Visualização da rede"
- Melhoria no recarregamento no ponto de interrupção
- Atualizações do console
- Cancelar o registro do fluxo do usuário no início
- Exibir pseudoelementos de destaque herdados no painel "Estilos"
- Destaques diversos
- [Experimental] Copiar mudanças de CSS
- [Experimental] Escolher cores fora do navegador
- Importar e exportar fluxos de usuários registrados como um arquivo JSON
- Conferir camadas em cascata no painel "Styles"
- Suporte para a função de cor
hwb() - Melhoria na exibição de propriedades particulares
- Destaques diversos
- [Experimental] Novo modo de resumo e período no painel do Lighthouse
- Conferir e editar @supports em regras no painel "Estilos"
- Suporte para seletores comuns por padrão
- Personalizar o seletor da gravação
- Renomear uma gravação
- Visualizar propriedades da classe/função ao passar o cursor
- Frames parcialmente apresentados no painel "Desempenho"
- Destaques diversos
- Como limitar solicitações do WebSocket
- Novo painel da API Reporting no painel "Aplicativo"
- Suporte à espera até que o elemento esteja visível/clicável no painel Gravador
- Console com estilo, formatação e filtragem aprimorados
- Depurar a extensão do Chrome com arquivos de mapa de origem
- Árvore de pastas de origem aprimorada no painel Origens
- Exibir arquivos de origem do worker no painel "Sources"
- Atualizações automáticas do tema escuro do Chrome
- Seletor de cores sensível ao toque e painel de divisão
- Destaques diversos
- Recurso de pré-lançamento: árvore de acessibilidade de página inteira
- Mudanças mais precisas na guia "Mudanças"
- Definir um tempo limite maior para o registro de fluxo do usuário
- Verificar se as páginas podem ser armazenadas em cache com a guia "Cache de avanço e retorno"
- Novo filtro do painel "Propriedades"
- Emular o recurso de mídia de cores forçadas do CSS
- Mostrar réguas ao passar o cursor
- Suporte a
row-reverseecolumn-reverseno editor Flexbox - Novos atalhos do teclado para reproduzir o XHR e abrir todos os resultados da pesquisa
- Lighthouse 9 no painel do Lighthouse
- Painel "Origens" aprimorado
- Destaques diversos
- [Experimental] Endpoints no painel da API Reporting
- Recurso de pré-lançamento: novo painel do Gravador
- Atualizar lista de dispositivos no Device Mode
- Preencher automaticamente com "Editar como HTML"
- Experiência aprimorada de depuração de código
- Sincronizar as configurações do DevTools em vários dispositivos
- Recurso de pré-lançamento: novo painel de visão geral de CSS
- Experiência de cópia e edição do tamanho de CSS restaurada e aprimorada
- Emular o recurso de mídia de preferência de contraste do CSS
- Emular o recurso de tema escuro automático do Chrome
- Copiar declarações como JavaScript no painel "Estilos"
- Nova guia "Payload" no painel "Network"
- Melhoria na exibição de propriedades no painel "Propriedades"
- Opção para ocultar erros do CORS no console
- Visualização e avaliação adequadas dos objetos
Intlno console - Stack traces assíncronos consistentes
- Manter a barra lateral do console
- Painel de cache do aplicativo descontinuado no painel "Aplicativo"
- [Experimental] Painel da nova API Reporting no painel "Application"
- Novas ferramentas de criação de tamanho de CSS
- Ocultar problemas na guia "Problemas"
- Melhoria na exibição de propriedades
- Lighthouse 8.4 no painel do Lighthouse
- Classificar snippets no painel Origens
- Novos links para notas da versão traduzidas e informar um bug de tradução
- Melhorias na interface do menu de comando do DevTools
- Use o DevTools no seu idioma preferido
- Novos dispositivos Nest Hub na lista de dispositivos
- Testes de origem na visualização de detalhes do frame
- Novo selo de consultas de contêineres do CSS
- Nova caixa de seleção para inverter os filtros de rede
- Em breve: descontinuação da barra lateral do console
- Mostrar cabeçalhos
Set-Cookiesbrutos na guia "Problemas" e no painel "Rede" - Acessadores nativos de exibição consistentes como propriedades próprias no console
- Stack traces de erros adequados para scripts inline com #sourceURL.
- Mudar o formato de cor no painel "Calculado"
- Substituir dicas personalizadas por dicas em HTML nativo
- [Experimental] Ocultar problemas na guia "Problemas"
- Consultas editáveis de contêiner CSS no painel "Estilos"
- Visualização do pacote da Web no painel "Rede"
- Depuração da API Attribution Reporting
- Processamento de strings aprimorado no console
- Depuração de CORS aprimorada
- Lighthouse 8.1 (link em inglês)
- Novo URL de nota no painel "Manifest"
- Seletores de correspondência de CSS fixos
- Respostas JSON de aparência impressionante no painel Network
- Editor de grade do CSS
- Suporte para declarações de
constno Console - Visualizador de pedidos da origem
- Novo atalho para ver os detalhes do frame
- Suporte aprimorado para depuração de CORS
- Renomear o rótulo XHR como Fetch/XHR
- Filtrar o tipo de recurso Wasm no painel Network
- Dicas de cliente HTTP do user agent para dispositivos na guia "Condições de rede"
- Informar problemas do modo quirks na guia "Problemas".
- Incluir intersecções de computação no painel de desempenho
- Lighthouse 7.5 no painel do Lighthouse
- A opção "Reiniciar frame" foi descontinuada menu de contexto na pilha de chamadas
- [Experimental] Monitor de protocolo
- [Experimental] Gravador do Puppeteer
- Pop-up de informações sobre as Métricas da Web
- Novo inspetor de memória
- Visualizar o efeito de rolagem do CSS
- Novo painel de configurações de selos
- Prévia aprimorada de imagens com informações de proporção
- Novo botão de condições de rede com opções para configurar
Content-Encodings - atalho para visualizar o valor calculado
- Palavra-chave
accent-color(link em inglês) - Categorizar tipos de problemas com cores e ícones
- Excluir tokens de confiança
- Recursos bloqueados na visualização de detalhes do frame
- Filtrar experimentos na configuração "Experimentos"
- Nova coluna
Vary Headerno painel Armazenamento em cache - Suporte à verificação de marca particular do JavaScript
- Suporte aprimorado para depuração de pontos de interrupção
- Suporte à visualização ao passar o cursor com a notação
[] - Descrição aprimorada de arquivos HTML
- Stack traces de erros adequados para depuração do Wasm.
- Novas ferramentas de depuração de CSS flexbox
- Nova sobreposição de Core Web Vitals
- Contagem de problemas movida para a barra de status do console
- Denunciar problemas na Atividade confiável na Web
- Formatar strings como literais de string JavaScript (válidos) no console
- Novo painel "Tokens de confiança" no painel "Aplicativo"
- Emular o recurso de gama de cores do CSS
- Ferramentas aprimoradas dos Progressive Web Apps
- Nova coluna
Remote Address Spaceno painel Network - Melhorias no desempenho
- Exibir recursos permitidos/proibidos na visualização de detalhes do frame
- Nova coluna
SamePartyno painel "Cookies" - O suporte a
fn.displayNamenão padrão foi descontinuado - Descontinuação de
Don't show Chrome Data Saver warningno menu "Configurações" - [Experimental] Relatório automático de problemas de baixo contraste na guia "Problemas"
- [Experimental] Visualização em árvore de acessibilidade completa no painel "Elementos"
- Depuração de suporte para violações de Tipos confiáveis
- Fazer uma captura de tela do nó além da janela de visualização
- Nova guia de tokens de confiança para solicitações de rede
- Lighthouse 7 no painel do Lighthouse
- Suporte para forçar o estado
:targetdo CSS - Novo atalho para duplicar o elemento
- Seletores de cores para propriedades CSS personalizadas
- Novos atalhos para copiar propriedades de CSS
- Nova opção para mostrar cookies decodificados pelo URL
- Limpar apenas cookies visíveis
- Nova opção para limpar cookies de terceiros no painel "Armazenamento"
- Editar dicas de cliente HTTP do user agent para dispositivos personalizados
- Manter o "registro de registro da rede" configuração
- Ver as conexões WebTransport no painel "Network"
- "On-line" foi renomeada como "Sem limitação"
- Novas opções de cópia no Console, no painel Fontes e no painel Estilos
- Novas informações sobre service workers na visualização de detalhes do frame
- Medir as informações da memória na visualização de detalhes do frame
- Enviar feedback pela guia "Problemas"
- Frames descartados no painel "Desempenho"
- Emular telas dobráveis e duplas no Device Mode
- [Experimental] Automatizar testes do navegador com o Puppeteer Recorder
- [Experimental] Editor de fontes no painel "Estilos"
- [Experimental] Ferramentas de depuração de flexbox CSS
- [Experimental] Nova guia "Violações da CSP"
- [Experimental] Novo cálculo de contraste de cores: algoritmo de contraste perceptivo avançado (APCA, na sigla em inglês)
- Inicialização mais rápida do DevTools
- Novas ferramentas de visualização de ângulo de CSS
- Emular tipos de imagem não compatíveis
- Simular o tamanho da cota de armazenamento no painel "Armazenamento"
- Nova faixa das Métricas da Web no Painel de desempenho
- Relatar erros de CORS no painel Network
- Informações de isolamento de origem cruzada na visualização de detalhes do frame
- Novas informações sobre Web Workers na visualização de detalhes do frame
- Mostrar detalhes do frame de abertura para janelas abertas
- Abrir o painel Network no painel Service Workers
- Copiar valor da propriedade
- Copiar stack trace para o iniciador da rede
- Visualizar o valor da variável Wasm ao passar o mouse
- Avaliar a variável Wasm no console
- Unidades consistentes de medida para tamanhos de arquivo/memória
- Destacar pseudoelementos no painel Elementos
- [Experimental] Ferramentas de depuração do CSS Flexbox
- [Experimental] Personalizar atalhos de teclado de acordes
- Novas ferramentas de depuração de grade CSS
- Nova guia WebAuthn
- Mover ferramentas entre o painel superior e o inferior
- Novo painel de barra lateral computado no painel "Estilos"
- Como agrupar propriedades CSS no painel Compute
- Lighthouse 6.3 no painel do Lighthouse
- Eventos
performance.mark()na seção "Tempos" - Novos filtros
resource-typeeurlno painel Rede - Atualizações da visualização de detalhes do frame
- Descontinuação de
Settingsno menu "Mais ferramentas" - [Experimental] Verificar e corrigir problemas de contraste de cores no painel "Visão geral do CSS"
- [Experimental] Personalizar atalhos de teclado no DevTools
- Painel "New Media"
- Faça capturas de tela dos nós usando o menu de contexto do painel "Elementos"
- Atualizações da guia "Problemas"
- Emular fontes locais ausentes
- Emular usuários inativos
- Emular
prefers-reduced-data - Suporte para novos recursos do JavaScript
- Lighthouse 6.2 no painel do Lighthouse
- Descontinuação de "outras origens" Listagem no painel "Service Workers"
- Mostrar o resumo da cobertura dos itens filtrados
- Nova visualização de detalhes do frame no painel "Application"
- Sugestão de cor acessível no painel "Estilos"
- Restabelecer o painel Propriedades no painel Elementos
- Valores do cabeçalho
X-Client-Datalegíveis por humanos no painel Network - Preencher automaticamente fontes personalizadas no painel "Estilos"
- Mostrar o tipo de recurso de forma consistente no painel "Network"
- Limpar botões nos painéis "Elementos" e "Rede"
- Edição de estilo para frameworks CSS-in-JS
- Lighthouse 6 no painel do Lighthouse
- Descontinuação da First Meaningful Paint (FMP)
- Suporte para novos recursos do JavaScript
- Novos avisos de atalho de apps no painel de manifesto
- Eventos
respondWithdo service worker na guia "Timing" - Exibição consistente do painel Computed
- Deslocamentos de bytecode para arquivos WebAssembly
- Copiar e recortar por linha no painel Origens
- Atualizações nas configurações do console
- Atualizações do painel de desempenho
- Novos ícones para pontos de interrupção, pontos de interrupção condicionais e logpoints
- Corrigir erros do site com a nova guia "Problemas"
- Conferir informações de acessibilidade na dica do modo de inspeção
- Atualizações do painel de desempenho
- Terminologia de promessa mais precisa no Console
- Atualizações do painel Estilos
- Descontinuação do painel Propriedades no painel Elementos
- Suporte a atalhos de apps no painel "Manifest"
- Emular deficiências visuais
- Emular localidades
- Depuração da política de incorporador entre origens (COEP, na sigla em inglês)
- Novos ícones para pontos de interrupção, pontos de interrupção condicionais e logpoints
- Visualizar solicitações de rede que definem um cookie específico
- Deslize para a esquerda a partir do menu de comando
- A opção "Configurações" no menu principal mudou de lugar
- O painel "Auditorias" agora é o painel do Lighthouse
- Excluir todas as substituições locais em uma pasta
- Atualização da interface de tarefas longas
- Suporte para ícones mascaráveis no painel "Manifest"
- Suporte para o Moto G4 no Device Mode
- Atualizações relacionadas a cookies
- Ícones de manifesto de app da Web mais precisos
- Passe o cursor sobre as propriedades
contentdo CSS para ver os valores sem escape - Erros do mapa de origem no console
- Configuração para desativar a rolagem após o fim de um arquivo
- Suporte para as declarações
leteclassno Console - Depuração WebAssembly aprimorada
- Solicitar cadeias de iniciadores na guia "Iniciador"
- Destaque a solicitação de rede selecionada na Visão geral
- Colunas de URL e caminho no painel "Rede"
- Strings do user agent atualizadas
- Nova interface de configuração do painel de auditorias
- Modos de cobertura de código por função ou por bloco
- A cobertura de código agora precisa ser iniciada pelo recarregamento da página
- Depurar por que um cookie foi bloqueado
- Ver os valores dos cookies
- Simular diferentes preferências-color-scheme e prefers-reduced-motion.
- Atualizações da cobertura de código
- Depurar por que um recurso de rede foi solicitado
- Os painéis "Console" e "Sources" respeitam as preferências de recuo novamente
- Novos atalhos para a navegação com o cursor
- Suporte para múltiplos clientes no painel de auditorias
- Depuração do gerenciador de pagamentos
- Lighthouse 5.2 no painel "Auditorias"
- Maior exibição de conteúdo no painel de desempenho
- Registre problemas do DevTools no menu principal
- Copiar estilos de elementos
- Visualizar mudanças de layout
- Lighthouse 5.1 no painel "Auditorias"
- Sincronização de temas do SO
- Atalho de teclado para abrir o editor de pontos de interrupção
- Fazer uma pré-busca do cache no painel Network
- Propriedades particulares ao visualizar objetos
- Notificações e mensagens push no painel "Aplicativo"
- Preencher automaticamente com valores CSS
- Uma nova interface para as configurações de rede
- Mensagens do WebSocket em exportações HAR
- Botões de importação e exportação do HAR
- Uso de memória em tempo real
- Números de porta de registro do service worker
- Inspecionar eventos de busca em segundo plano e sincronização em segundo plano
- Puppeteer para Firefox (em inglês)
- Predefinições significativas ao preencher automaticamente funções CSS
- Limpar dados do site no menu de comando
- Ver todos os bancos de dados do IndexedDB
- Conferir o tamanho descompactado de um recurso ao passar o cursor
- Pontos de interrupção inline no painel "Pontos de interrupção"
- Contagens de recursos do IndexedDB e do Cache
- Configuração para desativar a dica detalhada de inspeção
- Configuração para alternar o recuo da guia no Editor
- Destaque todos os nós afetados pela propriedade CSS
- Lighthouse v4 no painel "Auditorias"
- Visualizador de mensagens binárias do WebSocket
- Fazer uma captura de tela da área no menu de comando
- Filtros de service worker no painel Network
- Atualizações do painel de desempenho
- Tarefas longas nas gravações do painel de performance
- First paint na seção "Timing"
- Dica bônus: Atalho para visualizar códigos de cores RGB e HSL (vídeo)
- Logpoints (em inglês)
- Dicas detalhadas no modo de inspeção
- Dados de cobertura do código de exportação
- Navegar no console com um teclado
- Linha da taxa de contraste AAA no seletor de cores
- Salvar substituições de geolocalização personalizadas
- Dobramento de código
- Guia "Frames" renomeada para a guia "Mensagens"
- Dica bônus: filtragem do painel de rede por propriedade (vídeo)
- Visualizar métricas de desempenho no painel "Desempenho"
- Destacar nós de texto na árvore do DOM
- Copiar o caminho do JS para um nó do DOM
- Atualizações do painel de auditorias, incluindo uma nova auditoria que detecta bibliotecas JS e novas palavras-chave para acessar o painel "Auditorias" no menu de comando
- Dica bônus: use o Modo dispositivo para inspecionar consultas de mídia (vídeo)
- Passe o cursor sobre o resultado de uma expressão em tempo real para destacar um nó DOM
- Armazenar nós do DOM como variáveis globais
- Informações sobre iniciadores e prioridades agora nas importações e exportações HAR
- Acessar o menu de comando no menu principal
- Pontos de interrupção do modo picture-in-picture
- Dica bônus: use
monitorEvents()para registrar eventos acionados de um nó na Console (vídeo) - Expressões ao vivo no console
- Destacar nós do DOM durante a avaliação antecipada
- Otimizações do painel de desempenho
- Depuração mais confiável
- Ativar a limitação de rede no menu de comando
- Preencher automaticamente pontos de interrupção condicionais
- Interromper nos eventos do AudioContext
- Depurar apps Node.js com ndb
- Dica bônus: avalie as interações reais dos usuários com a API User Timing
- Avaliação antecipada
- Dicas de argumentos
- Preenchimento automático de função
- Palavras-chave do ES2017
- Lighthouse 3.0 no painel "Auditorias"
- Suporte do BigInt
- Como adicionar caminhos de propriedade ao painel "Watch"
- "Mostrar marcações de tempo" movidos para "Configurações"
- Dica bônus: métodos de console menos conhecidos (vídeo)
- Pesquisar em todos os cabeçalhos da rede
- Visualizações do valor das variáveis CSS
- Copiar como busca
- Novas auditorias, opções de configuração para computadores e visualização de traces
- Interromper loops infinitos
- Velocidade do usuário nas guias "Desempenho"
- Instâncias de VM JavaScript listadas claramente no painel "Memória"
- Guia "Rede" renomeada como "Página"
- Atualizações do tema escuro
- Informações de Transparência dos certificados no painel "Segurança"
- Recursos de isolamento de sites no painel "Desempenho"
- Dica bônus: painel Layers + Animations Inspector (vídeo)
- Blackboxing no painel Network
- Ajuste de zoom automático no Modo dispositivo
- Boa aparência nas guias "Preview" e "Response"
- Visualizar conteúdo HTML na guia "Visualização"
- Suporte a substituições locais para estilos dentro de HTML
- Dica bônus: oculte scripts de framework para tornar os pontos de interrupção do listener de eventos mais úteis
- Substituições locais
- Novas ferramentas de acessibilidade
- Guia "Mudanças"
- Novas auditorias de SEO e performance
- Várias gravações no painel de desempenho
- Código confiável com workers em código assíncrono
- Dica bônus: Automatize as ações do DevTools com o Puppeteer (vídeo)
- Monitor de desempenho
- Barra lateral do console
- Agrupar mensagens semelhantes do Console
- Dica bônus: alternar a pseudoclasse ao passar o cursor (vídeo)
- Suporte à depuração remota de vários clientes
- Workspaces 2.0
- 4 novas auditorias
- Simular notificações push com dados personalizados
- Acionar eventos de sincronização em segundo plano com tags personalizadas
- Dica bônus: pontos de interrupção de listener de eventos (vídeo)
- Uma espera de alto nível no console
- Novos fluxos de trabalho de capturas de tela
- Destaque em grade CSS
- Uma nova API Console para consultar objetos
- Novos filtros do console
- Importações HAR no painel Network
- Recursos de cache visualizáveis
- Depuração de cache mais previsível
- Cobertura de código no nível de bloqueio
- Simulação de limitação de dispositivos móveis
- Consultar o uso do armazenamento
- Ver quando um service worker armazena respostas em cache
- Ativar o medidor de QPS no menu de comando
- Definir o comportamento da roda do mouse para aplicar zoom ou rolar
- Suporte para depuração de módulos ES6
- Novo painel de auditorias
- Selos de terceiros
- Um novo gesto para "Continuar até aqui"
- Entrar no modo assíncrono
- Visualizações de objetos mais informativas no console
- Seleção de contexto mais informativa no console
- Atualizações em tempo real na guia "Cobertura"
- Opções de limitação de rede mais simples
- Pilhas assíncronas ativadas por padrão
- Cobertura de código CSS e JS
- Capturas de tela de página inteira
- Bloquear solicitações
- Substituir a espera assíncrona
- Menu de comando unificado