Sofia Emelianova
Melhorias no painel Network
Modifique o conteúdo da Web localmente com ainda mais rapidez
O recurso de substituições locais agora foi simplificado para que você possa simular facilmente cabeçalhos de resposta e conteúdo da Web de recursos remotos no painel Rede sem precisar acessar eles.
Para substituir o conteúdo da Web, abra o painel Rede, clique com o botão direito do mouse em uma solicitação e selecione Substituir conteúdo.
Se você tiver substituições locais configuradas, mas desativadas, o DevTools as ativará. Se você ainda não os configurou, o DevTools exibe a barra de ações na parte superior. Selecione uma pasta para armazenar as substituições e permita o acesso do DevTools a ela.
Depois que as substituições forem configuradas, o DevTools direcionará você para Sources > Substituições > Editor para substituir o conteúdo da Web.
Os recursos substituídos são indicados com 
no painel Network. Passe o cursor sobre o ícone para ver o que foi substituído.
Problemas do Chromium: 1465785, 1470532 e 1469359.
Substituir o conteúdo de XHR e solicitações de busca
Agora é possível substituir o conteúdo de solicitações XHR e de busca, além dos cabeçalhos de resposta. Com essas substituições, é possível simular as respostas da API para depurar sua página da Web, mesmo que o back-end e a API ainda não estejam prontos.
Atualmente, o DevTools oferece suporte a substituições de conteúdo para os seguintes tipos de solicitação: imagens (por exemplo, avif, png), fontes, busca e XHR, scripts (css e js) e documentos (html). O DevTools agora esmaece a opção Substituir conteúdo para tipos não compatíveis.
Problemas do Chromium: 792101, 1469776.
Ocultar solicitações de extensão do Chrome
Para ajudar a se concentrar no código que você cria e filtrar solicitações irrelevantes enviadas por extensões que você pode ter instalado no Chrome, o painel Rede recebe um novo filtro.
Para filtrar todas as solicitações enviadas a URLs do chrome-extension://, marque 
Ocultar URLs de extensão.
Problemas do Chromium: 1257885, 1458803.
Códigos de status HTTP legíveis por humanos
O código de status no cabeçalho da solicitação agora mostra um texto legível ao lado dos códigos de status HTTP. Assim, você pode descobrir o que aconteceu com a solicitação mais rapidamente.
Também é possível passar o cursor sobre o código de status na tabela de solicitações para ver o mesmo texto.
Problema do Chromium: 1153956.
Respostas de estilo de formatação para subtipos JSON
A guia Resposta de uma solicitação com um subtipo MIME application/[subtype]+json (por exemplo, ld+json, hal+json e outros) agora analisa a resposta corretamente e permite que ela seja aprimorada.
Problema do Chromium: 406900.
Desempenho: veja as alterações na prioridade de busca para eventos de rede
O painel Desempenho agora mostra dois campos de prioridade no Resumo de um evento no rastreamento Rede: Prioridade inicial e Prioridade (final) em vez de apenas Prioridade. Com esse campo adicional, você pode ver se a prioridade de busca do evento muda e ajustar a ordem dos downloads. Para mais informações, consulte Como otimizar o carregamento de recursos com a API Fetch Priority.
Além disso, você encontra as mesmas informações na coluna Prioridade do painel Rede, com a configuração 
Linhas de solicitação grande ativada.
Problemas do Chromium: 1463901, 1380964.
Configurações de origens ativadas por padrão: dobramento de código e revelação automática de arquivos
Em 
Configurações > Preferências > 
A opção Dobra de código agora está ativada por padrão. Essa opção permite dobrar blocos de código.
Para dobrar um bloco de código, passe o cursor sobre o número da linha ao lado do início do bloco e clique no ícone de recolhimento 
. Clique em {...} para expandir o bloco novamente.
Além disso, as 
Configurações > Preferências > 
Revelar arquivos automaticamente na barra lateral agora também está ativado por padrão.
Essa configuração define a árvore de arquivos na tabela Sources > Página: selecione o arquivo atual aberto no Editor ao trocar de guia.
Problemas do Chromium: 1459193, 1336599.
Depuração aprimorada de problemas de cookies de terceiros
Para ajudar a criar uma Web com mais privacidade e em paralelo com as atualizações de outros navegadores, o Chrome lançou a iniciativa Sandbox de privacidade. Essa iniciativa melhora fundamentalmente a privacidade na Web e pode manter uma Web saudável com anúncios de uma forma que vai deixar os cookies de terceiros obsoletos. O Sandbox de privacidade tem um cronograma de descontinuação gradual para facilitar a adaptação às mudanças.
Você já pode testar como o Chrome se comporta após a descontinuação dos cookies de terceiros. Para fazer isso, execute o Chrome na linha de comando com a flag --test-third-party-cookies-phaseout. Para saber o que essa flag faz, consulte Depuração de cookies.
Independentemente de como você executa o Chrome (com ou sem a sinalização), a guia Problemas agora tem a caixa de seleção 
Incluir problemas de cookies de terceiros ativada por padrão para todos os novos usuários do Chrome e, como resultado, informa:
- Um aviso de alteração interruptiva sobre a descontinuação gradual.
- Problemas relacionados a cookies de terceiros.
Se você quiser receber avisos de cookie sobre a descontinuação futura de um usuário atual do Chrome, marque esta caixa de seleção.
Para testar isso, inspecione os cookies nesta página de demonstração.
Além disso, o filtro 
Cookies de resposta bloqueados no painel Rede foi reformulado para deixar claro que ele mostra apenas os cookies de resposta bloqueados.
Problemas do Chromium: 1458839, 1462693 e 1466310.
Depurar o pré-carregamento no painel "Aplicativo"
A equipe do Chrome está usando a pré-renderização completa de páginas futuras em que um usuário provavelmente vai navegar. Para permitir a depuração, o DevTools adiciona a seção Pré-carregamento ao painel Aplicativo. A nova pré-busca e pré-renderização (coletivamente conhecidas como "pré-carregamento de navegação") usa a API Speculation Rules em vez das dicas de recursos baseadas em links.
Nesta página de demonstração, em Aplicativo > Pré-carregando, você pode inspecionar:
- Regras de especulação, que lista todos os conjuntos de regras encontrados na página atual.
- Pré-carrega que lista todos os URLs pré-buscados e pré-renderizados dos conjuntos de regras.
- Esta página lista o status pré-renderizado da página atual.
Para mais informações, consulte a postagem dedicada à depuração de regras de especulação.
Problema do Chromium: 1410709.
Novas cores
Você já deve ter notado que o DevTools agora tem um visual atualizado que se alinha melhor ao Chrome. Um fator que contribui para isso é o novo esquema de cores.
Esta versão (117) traz mais melhorias de UX para o DevTools, ambas já mencionadas e listadas mais adiante, incluindo vários textos de interface aprimorados.
Problema do Chromium: 1456677.
Lighthouse versão 10.4.0
O painel Lighthouse agora executa o Lighthouse 10.4.0. O mais importante é que essa versão adiciona novas auditorias de acessibilidade para:
Exemplo:
Veja também a lista completa de mudanças. Para aprender os conceitos básicos do uso do painel Lighthouse no DevTools, consulte Lighthouse: otimizar a velocidade do site.
Problema do Chromium: 772558.
A extensão de depuração C/C++ WebAssembly para DevTools agora é de código aberto
A extensão de depuração C/C++ WebAssembly para DevTools agora é de código aberto e reside no repositório de front-end do DevTools. Essa extensão ativa recursos de depuração no DevTools para programas C++ compilados no WebAssembly. Para saber mais, consulte Depurar o WebAssembly C/C++.
Saiba como criar, executar e testar a extensão e fique à vontade para contribuir.
Problema do Chromium: 1410709.
Destaques diversos
Estas são algumas correções e melhorias importantes feitas nesta versão:
- Aninhamento de CSS: o painel Elementos agora mostra toda a cadeia de seletores dos filhos aninhados (1172985).
- Aplicativo > Manifest agora tem uma seção Window Controls Overlay que verifica se há um valor
display_overrideno manifesto e fornece links para a documentação relevante. - No menu Fontes > A árvore de páginas agora faz o seguinte, incluindo, mas não se limitando a (1442863):
- Esmaece as pastas com todo o conteúdo na lista de ignorados.
- Colore as pastas em laranja se todo o conteúdo delas for de um mapa de origem.
- Desempenho: as Configurações de captura agora são ocultadas automaticamente quando você inicia a gravação (1455498).
- Fontes > O Editor restaurou o comportamento de Ctrl + seta (Win) e Opt + Seta (MacOs) (1468208).
- Animações > O botão Pausar tudo agora mantém o estado nos carregamentos de página (1446046).
- Aplicativo > Armazenamento > Armazenamento em cache movido para Aplicativo > Armazenamento > Seção de cache (1462622).
- Alguns textos e dicas da interface foram aprimorados: dica de simultaneidade de hardware, textos de filtro de rede e uma opção de menu principal, letras maiúsculas na visualização em árvore do aplicativo, rede > Textos dos cabeçalhos, Fontes > Substituições e textos do sistema de arquivos.
Novos recursos experimentais
Nova emulação de renderização: prefers-reduced-transparency
Os usuários do seu site podem ativar o novo recurso de mídia CSS prefers-reduced-transparency experimental nos dispositivos para indicar que preferem reduzir os efeitos transparentes. Considere essa preferência para aumentar a acessibilidade do seu site. Para ajudar você, a guia da gaveta Renderização agora pode emular a configuração prefers-reduced-transparency: reduce. Assim, é possível prototipar uma solução e testar como seu site se comporta nesse caso.
Para testar este recurso no Chrome, ative os recursos experimentais da plataforma da Web em chrome://flags.
Problema do Chromium: 1424879.
Monitor do protocolo aprimorado
O Chrome DevTools usa o protocolo Chrome DevTools (CDP, na sigla em inglês) para instrumentar, inspecionar, depurar e criar o perfil dos navegadores Chrome. Se você é um desenvolvedor do Chromium ou DevTools, o monitor de protocolo oferece uma maneira de visualizar todas as solicitações e respostas do CDP feitas pelo DevTools e enviar comandos do CDP.
O monitor de protocolo recebe uma nova interface para facilitar a construção e o envio de comandos do CDP. Agora você não precisa procurar comandos e seus parâmetros na documentação, o DevTools irá sugeri-los para você.
No canto inferior direito da guia da gaveta Monitor de protocolo, clique em 
Mostrar editor de comando do CDP, selecione um destino, comece a digitar um comando, selecione uma das sugestões (se necessário), especifique valores de parâmetro e clique em 
Enviar comando (Ctrl/Cmd + Enter).
Problema do Chromium: 1469345.
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