Sofia Emelianova
Melhorias no painel de rede
Substituir o conteúdo da Web localmente com ainda mais rapidez
O recurso de substituições locais foi simplificado para que você possa simular facilmente cabeçalhos de resposta e conteúdo da Web de recursos remotos no painel Rede sem ter acesso a eles.
Para substituir o conteúdo da Web, abra o painel Network, clique com o botão direito do mouse em uma solicitação e selecione Override content.
Se você tiver substituições locais configuradas, mas desativadas, o DevTools vai ativá-las. Se você ainda não tiver configurado, o DevTools vai pedir para você fazer isso na barra de ações na parte de cima. Selecione uma pasta para armazenar as substituições e permita que as Ferramentas do desenvolvedor acessem essa pasta.
Depois que as substituições forem configuradas, as DevTools vão levar você a Fontes > Substituições > Editor para que você possa substituir o conteúdo da Web.
Os recursos substituídos são indicados com 
no painel Network. Passe o cursor sobre o ícone para saber o que foi substituído.
Problemas do Chromium: 1465785, 1470532, 1469359.
Substituir o conteúdo de solicitações XHR e de busca
Agora é possível substituir o conteúdo de XHR e buscar solicitações, além dos cabeçalhos de resposta. Com essas substituições, você pode simular as respostas da API para depurar a página da Web, mesmo que o back-end e a API ainda não estejam prontos.
Atualmente, as Ferramentas do desenvolvedor oferecem suporte a substituições de conteúdo para os seguintes tipos de solicitação: imagens (por exemplo, avif, png), fontes, fetch e XHR, scripts (css e js) e documentos (html). As Ferramentas do desenvolvedor agora esmaecem a opção Substituir conteúdo para tipos sem suporte.
Problemas do Chromium: 792101, 1469776.
Ocultar solicitações de extensão do Chrome
Para ajudar você a se concentrar no código que você criou 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 para URLs 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 texto legível por humanos ao lado dos códigos de status HTTP. Assim, você pode descobrir o que aconteceu com a solicitação mais rapidamente.
Você também pode passar o cursor sobre o código de status na tabela de solicitações para conferir o mesmo texto.
Problema do Chromium: 1153956.
Respostas de impressão bonita 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 você a formate.
Problema do Chromium: 406900.
Desempenho: confira as mudanças na prioridade de busca para eventos de rede
O painel Performance agora mostra dois campos de prioridade no Resumo de um evento na faixa Rede: Prioridade inicial e Prioridade (final), em vez de apenas a Prioridade. Com esse campo extra, agora é possível saber 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ê pode encontrar as mesmas informações na coluna Prioridade do painel Rede, com a configuração 
Linhas de solicitações grandes ativada.
Problemas do Chromium: 1463901, 1380964.
Configurações de origem ativadas por padrão: dobramento de código e exibição automática de arquivos
A opção 
Settings > Preferences > 
Code folding agora está ativada por padrão. Essa opção permite dobrar blocos de código.
Para ocultar 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 retração 
. Clique em {...} para abrir o bloco novamente.
Além disso, a opção 
Settings > Preferences > 
Automatically reveal files in the sidebar agora também está ativada por padrão.
Essa configuração faz com que a árvore de arquivos em Origens > Página selecione o arquivo aberto no Editor quando você alterna as guias.
Problemas do Chromium: 1459193, 1336599.
Melhoria na depuração de problemas com cookies de terceiros
Para ajudar a criar uma Web mais privada e em paralelo com as atualizações de outros navegadores, o Chrome lançou a iniciativa Sandbox de privacidade. Essa iniciativa melhora a privacidade na Web e pode manter uma Web saudável e com anúncios de maneira que os cookies de terceiros se tornem obsoletos. O Sandbox de privacidade tem um cronograma de desativação gradual para que você se adapte às mudanças com conforto.
Já é possível testar o comportamento do Chrome após a desativação gradual de 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 Como depurar cookies.
Independentemente de como você executa o Chrome (com ou sem a flag), a caixa de seleção 
Incluir problemas de cookies de terceiros na guia Problemas agora está ativada por padrão para todos os novos usuários do Chrome e, como resultado, informa:
- Um aviso de mudança interruptiva sobre a desativação futura.
- Problemas relacionados a cookies de terceiros.
Se você quiser receber avisos sobre cookies sobre a desativação futura como um usuário do Chrome, marque esta caixa de seleção.
Para testar isso, inspecione os cookies na 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, 1466310.
Depurar o pré-carregamento no painel "Application"
A equipe do Chrome está trazendo de volta a pré-renderização completa de páginas futuras que um usuário provavelmente vai acessar. Para depurar isso, o DevTools adiciona a seção Preloading ao painel Application. O novo pré-carregamento e a pré-renderização (conhecidos coletivamente como "pré-carregamento de navegação") usam a API Speculation Rules em vez das dicas de recursos baseadas em links.
Na página de demonstração, na seção Application > Preloading, é possível inspecionar:
- Regras de especulação, que lista todos os conjuntos de regras encontrados na página atual.
- Preloads, que lista todos os URLs pré-carregados e pré-renderizados dos conjuntos de regras.
- Esta página, que lista o status de pré-renderização da página atual.
Para mais informações, consulte a postagem dedicada sobre depuração de regras de especulação.
Problema do Chromium: 1410709.
Novas cores
Talvez você já tenha notado que o DevTools agora tem uma aparência atualizada que se alinha melhor com o Chrome. Um dos fatores que contribui para isso é o novo esquema de cores.
Essa versão (117) traz mais melhorias de UX para as DevTools, já mencionadas e listadas, incluindo vários textos de interface aprimorados.
Problema do Chromium: 1456677.
Lighthouse 10.4.0
O painel Lighthouse agora executa o Lighthouse 10.4.0. Mais especificamente, esta versão adiciona novas auditorias de acessibilidade para:
Exemplo:
Consulte também a lista completa de mudanças. Para aprender os conceitos básicos de uso do painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.
Problema do Chromium: 772558.
A extensão de depuração de WebAssembly C/C++ para o DevTools agora é de código aberto
A extensão de depuração do WebAssembly para C/C++ do DevTools agora é de código aberto e está no repositório do front-end do DevTools. Essa extensão ativa os recursos de depuração no DevTools para programas C++ compilados para WebAssembly. Para mais informações, consulte Depurar C/C++ WebAssembly.
Saiba como criar, executar e testar a extensão e sinta-se à vontade para contribuir.
Problema do Chromium: 1410709.
Destaques diversos
Confira algumas correções e melhorias importantes desta versão:
- Aninhamento de CSS: o painel Elements agora mostra toda a cadeia de seletores para filhos aninhados (1172985).
- A seção Application > Manifest agora tem uma seção Window Controls Overlay que verifica se um valor
display_overrideestá presente no manifesto e fornece links para a documentação relevante. - A árvore Origens > Página agora faz o seguinte, incluindo, mas não se limitando a (1442863):
- Desativa as pastas se todo o conteúdo delas estiver na lista de ignorados.
- Colore as pastas em laranja se todo o conteúdo delas for de um mapa de origem.
- Performance: as Configurações de captura agora são ocultas automaticamente quando você inicia a gravação (1455498).
- Origens > Editor restaurou o comportamento Ctrl + seta (Win) e Opção + seta (MacOs) (1468208).
- A opção Animations > Pause all agora mantém o estado em todos os carregamentos de página (1446046).
- Aplicativo > Armazenamento > Armazenamento de cache movido para a Aplicativo > Armazenamento > Seção de cache (1462622).
- Alguns textos e dicas de ferramentas da interface foram aprimorados: Dica de ferramentas de simultaneidade de hardware, Textos de filtro de rede e uma opção de menu principal, maiúsculas na Visualização de árvore de aplicativos, Rede > Textos de cabeçalhos, Origens > 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 começar a ativar o novo recurso experimental de prefers-reduced-transparency CSS media nos dispositivos para indicar a preferência de redução de efeitos transparentes. Considere essa preferência para aumentar a acessibilidade do seu site. Para ajudar você, a guia da gaveta Rendering agora pode emular a configuração prefers-reduced-transparency: reduce. Assim, você pode criar um protótipo de solução e testar o comportamento do seu site nesse caso.
Para testar este recurso no Chrome, ative a opção Recursos experimentais da plataforma da Web em chrome://flags.
Problema do Chromium: 1424879.
Monitor de protocolo aprimorado
O Chrome DevTools usa o Chrome DevTools Protocol (CDP) para instrumentar, inspecionar, depurar e criar perfis de navegadores Chrome. Se você é um desenvolvedor do Chromium ou do DevTools, o Protocol Monitor 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 tem uma nova interface para você criar e enviar comandos CDP com mais facilidade. Agora você não precisa mais procurar comandos e os respectivos parâmetros na documentação. O DevTools vai sugerir isso para você.
No canto inferior direito da guia da gaveta Protocol monitor, clique em 
Show CDP command editor, selecione um destino, comece a digitar um comando, selecione um dos sugeridos, se necessário, e especifique os valores dos parâmetros. Em seguida, clique em 
Send command (Ctrl/Cmd + Enter).
Problema do Chromium: 1469345.
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.
Entre em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.
- Envie feedback e solicitações de recursos para crbug.com.
- Informe um problema do DevTools usando a opção Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
- Envie um tweet para @ChromeDevTools.
- Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.
Novidades no DevTools
Uma lista de tudo o que foi abordado na série Novidades no DevTools.
- Depurar solicitações de rede, arquivos de origem e rastros de desempenho com o Gemini
- Acessar o histórico de chat da IA
- Gerenciar o armazenamento da extensão em "Aplicativo" > "Armazenamento"
- Melhorias de desempenho
- Fases de interação nas métricas em tempo real
- Renderizar informações de bloqueio na guia "Resumo"
- Suporte para eventos scheduler.postTask e as setas de ativação deles
- Painel "Animations" e elementos > melhorias na guia "Styles"
- Ir de "Elements > Styles" para "Animations"
- Atualizações em tempo real na guia "Computed"
- Emulador de pressão de computação em sensores
- Objetos JS com o mesmo nome agrupados por origem no painel "Memória"
- Nova aparência das configurações
- O painel de insights de desempenho foi descontinuado e removido do DevTools
- Destaques diversos
- Depurar CSS com o Gemini
- Controlar os recursos de IA em uma guia de configurações dedicada
- Melhorias no painel de desempenho
- Anexar e compartilhar os resultados de performance
- Receber insights de desempenho no painel "Performance"
- Detectar com mais facilidade mudanças excessivas no layout
- Encontrar animações não compostas
- A simultaneidade de hardware é movida para "Sensores"
- Ignorar scripts anônimos e se concentrar no código em rastreamentos de pilha
- Elementos > Estilos: suporte a modos de gravação sideways-* para sobreposições de grade e palavras-chave em todo o CSS
- Auditorias do Lighthouse para páginas que não são HTTP nos modos de período e resumo
- Melhorias na acessibilidade
- Destaques diversos
- Melhorias no painel de rede
- Repensando os filtros de rede
- As exportações de HAR agora excluem dados sensíveis por padrão
- Melhorias no painel de elementos
- Valores de preenchimento automático para propriedades text-emphasis-*
- Overflows de rolagem marcados com um selo
- Melhorias no painel de desempenho
- Recomendações em métricas ao vivo
- Navegar pela navegação estrutural
- Melhorias no painel de memória
- Novo perfil "Elementos separados"
- Nomeação aprimorada de objetos JS simples
- Desativar a aplicação de temas dinâmicos
- Experimento do Chrome: compartilhamento de processos
- Farol 12.2.1
- Destaques diversos
- O Recorder oferece suporte à exportação para o Puppeteer no Firefox
- Melhorias no painel de desempenho
- Observações de métricas em tempo real
- Solicitações de pesquisa na faixa de rede
- Conferir os rastros de pilha de chamadas performance.mark e performance.measure
- Usar dados de endereço de teste no painel de preenchimento automático
- Melhorias no painel de elementos
- Forçar mais estados para elementos específicos
- "Elements > Styles" agora preenche automaticamente mais propriedades de grade
- Farol 12.2.0
- Destaques diversos
- Os insights do console do Gemini vão ser lançados na maioria dos países europeus
- Atualizações do painel de desempenho
- Pista de rede aprimorada
- Personalizar dados de performance com a API de extensibilidade
- Detalhes na faixa "Tempos"
- Copiar todas as solicitações listadas no painel "Rede"
- Snapshots de pilha mais rápidos com tags HTML nomeadas e menos desordem
- Abrir o painel "Animações" para capturar animações e editar @keyframes em tempo real
- Lighthouse 12.1.0
- Melhorias na acessibilidade
- Destaques diversos
- Inspecionar o posicionamento de âncora do CSS no painel "Elementos"
- Melhorias no painel de origens
- Função "Nunca pausar aqui" aprimorada
- Novos listeners de eventos de ajuste de rolagem
- Melhorias no painel de rede
- Predefinições atualizadas de limitação de rede
- Informações do worker de serviço em campos personalizados do formato HAR
- Enviar e receber eventos do WebSocket no painel "Performance"
- Destaques diversos
- Melhorias no painel de desempenho
- Mover e ocultar faixas com o modo de configuração atualizado
- Ignorar scripts no gráfico de chama
- Limitar a CPU em 20 vezes
- O painel de insights de performance será descontinuado
- Encontrar uso excessivo de memória com novos filtros em snapshots de heap
- Inspecionar buckets de armazenamento em "Application > Storage"
- Desativar avisos de auto-XSS com uma flag de linha de comando
- Farol 12.0.0
- Destaques diversos
- Entenda melhor os erros e avisos no console com o Gemini
- Suporte a regras@position-try em Elementos > Estilos
- Melhorias no painel de origens
- Configurar a impressão bonita e o fechamento de colchetes automáticos
- As promessas rejeitadas tratadas são reconhecidas como capturadas
- Causas de erros no console
- Melhorias no painel de rede
- Inspecionar cabeçalhos de dicas iniciais
- Ocultar a coluna de cascata
- Melhorias no painel de desempenho
- Capturar estatísticas do seletor de CSS
- Mudar a ordem e ocultar faixas
- Ignorar retentores no painel "Memória"
- Farol 11.7.1
- Destaques diversos
- Novo painel de preenchimento automático
- Limitação de rede aprimorada para WebRTC
- Suporte a animações de rolagem no painel "Animações"
- Melhoria no suporte a aninhamento de CSS em Elementos > Estilos
- Painel "Enhanced Performance"
- Ocultar funções e filhos delas no gráfico de chamas
- Setas dos iniciadores selecionados para os eventos que eles iniciaram
- Farol 11.6.0
- Dicas de categorias especiais em Memória > Snapshots de pilha
- 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 ser descontinuado
- Descontinuação do criador de perfil do JavaScript: fase quatro, final
- Destaques diversos
- Encontre o ovo de Páscoa
- Atualizações do painel de elementos
- Emulação de uma página em foco em Elementos > Estilos
- Seletor de cores, relógio de ângulo e editor de suavização em substitutos de
var() - A ferramenta de comprimento do CSS foi descontinuada
- Pop-up para o resultado da pesquisa selecionado em "Performance > Faixa principal"
- Atualizações do painel de rede
- Botão "Limpar" e filtro de pesquisa na guia "Rede" / "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"
- Conferir scripts carregados nas Ferramentas do desenvolvedor para Node.js
- Farol 11.5.0
- Melhorias na acessibilidade
- Destaques diversos
- A coleção oficial de extensões do Recorder está disponível
- Melhorias na rede
- Motivo da falha na coluna "Status"
- Submenu "Improved Copy"
- Melhorias de desempenho
- Rastro de breadcrumbs na linha do tempo
- Iniciadores de eventos na faixa principal
- Menu do seletor de instâncias de VM JavaScript para as ferramentas de desenvolvimento do Node.js
- Novo atalho e comando em "Fontes"
- Melhorias nos elementos
- O pseudoelemento ::view-transition agora pode ser editado nos Estilos
- Suporte da propriedade align-content para contêineres de bloco
- Suporte à postura para dispositivos dobráveis emulados
- Temas dinâmicos
- Avisos de desativação de cookies de terceiros nos painéis "Rede" e "Aplicativo"
- Farol 11.4.0
- Melhorias na acessibilidade
- Destaques diversos
- Melhorias nos elementos
- Barra de filtro simplificada no painel de rede
- Suporte a
@font-palette-values - Caso com suporte: propriedade personalizada como substituto de outra propriedade personalizada
- Melhoria no suporte a mapas de origem
- Melhorias no painel de desempenho
- Acompanhamento de interações aprimoradas
- Filtragem avançada nas guias "Bottom-Up", "Call Tree" e "Event Log"
- Marcadores de recuo no painel "Origens"
- Dicas úteis sobre cabeçalhos e conteúdo substituídos no painel de 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
- Farol 11.3.0
- Melhorias na acessibilidade
- Destaques diversos
- Encerramento gradual do uso de cookies de terceiros
- Analisar os cookies do seu site com a Ferramenta de análise de dados do Sandbox de privacidade
- Listagem de ignorados aprimorada
- Padrão de exclusão padrão para node_modules
- As exceções capturadas agora param a execução se forem capturadas ou transmitidas por um código não ignorado
x_google_ignoreListfoi renomeado comoignoreListnos mapas de origem- Novo botão de modo de entrada durante a depuração remota
- O painel "Elements" agora mostra URLs para nós #document
- Política de Segurança de Conteúdo eficaz no painel "Application"
- Depuração de animação aprimorada
- Caixa de diálogo "Você confia neste código?" em "Sources" e aviso de auto-XSS no console
- Pontos de interrupção do listener de eventos em workers e worklets da Web
- O novo selo de mídia para
<audio>e<video> - O carregamento prévio foi renomeado para carregamento especulativo
- Lighthouse 11.2.0
- Melhorias na acessibilidade
- Destaques diversos
- Seção @property aprimorada em Elementos > Estilos
- Regra @property editável
- Os problemas com regras de @property inválidas são informados
- Lista atualizada de dispositivos para emular
- Mostrar JSON inline em tags de script nas origens
- Preenchimento automático de campos particulares no console
- Lighthouse 11.1.0
- Melhorias na acessibilidade
- Descontinuação do Web SQL
- Validação da proporção da captura de tela em "Application > Manifest"
- 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"
- Reorganizar painéis em "Origens"
- Destaque de sintaxe e impressão bonita para mais tipos de script
- Emulador do recurso de mídia "prefers-reduced-transparency"
- Farol 11
- Melhorias na acessibilidade
- Destaques diversos
- Melhorias no painel de rede
- Substitua o conteúdo da Web localmente com ainda mais rapidez
- Substituir o conteúdo de XHR e fazer solicitações de busca
- Ocultar solicitações de extensões do Chrome
- Códigos de status HTTP legíveis por humanos
Performance: confira as mudanças na prioridade de busca para eventos de rede
- Configurações de fontes ativadas por padrão: dobramento de código e revelação automática de arquivos
- Depuração aprimorada de problemas com cookies de terceiros
- Novas cores
- Farol 10.4.0
- Depurar o pré-carregamento no painel "Application"
- A extensão de depuração de WebAssembly C/C++ para o DevTools agora é de código aberto
- Destaques diversos
- (Experimental) Nova emulação de renderização: prefers-reduced-transparency
- Monitoramento de protocolo avançado(experimental)
- Melhoria na depuração de folhas de estilos ausentes
- Suporte a temporização linear em Elementos > Estilos > Editor de transição suave
- Suporte a buckets de armazenamento e visualização de metadados
- Farol 10.3.0
- Acessibilidade: comandos de teclado e leitura de tela aprimorada
- Destaques diversos
- Melhorias nos elementos
- Novo selo de subgrade do CSS
- Especificidade do seletor em dicas
- Valores de propriedades CSS personalizadas em dicas de ferramentas
- Melhorias nas fontes
- Destaque de sintaxe do CSS
- Atalho para definir pontos de interrupção condicionais
- Aplicação > Mitigações de rastreio por redirecionamento
- Lighthouse 10.2.0
- Ignorar scripts de conteúdo por padrão
- Rede > Melhorias na resposta
- Destaques diversos
- Suporte a depuração do WebAssembly
- Melhoria no comportamento de execução em apps Wasm
- Depurar o preenchimento automático usando a guia "Elementos" e "Problemas"
- Afirmações no Gravador
- Farol 10.1.1
- Melhorias de desempenho
- performance.mark() mostra o tempo ao passar o cursor em Performance > Tempos
- O comando profile() preenche a Performance > Main
- Aviso de interações lentas do usuário
- Atualizações das Métricas da Web
- Descontinuação do criador de perfil do JavaScript: terceira fase
- Destaques diversos
- Substituir cabeçalhos de resposta de rede
- Melhorias na depuração do Nuxt, do Vite e do Rollup
- Melhorias no CSS em Elementos > Estilos
- Propriedades e valores CSS inválidos
- Links para frames-chave na propriedade abreviada de animação
- Nova configuração do console: preenchimento automático ao pressionar Enter
- O menu de comando enfatiza arquivos criados
- Descontinuação do criador de perfil do JavaScript: segunda fase
- Destaques diversos
- Atualizações do gravador
- Extensões de reprodução do gravador
- Gravar com os seletores de perfuração
- Exportar gravações como scripts do Puppeteer com a análise do Lighthouse
- Instalar extensões para o Gravador
- Elementos > Atualizações de estilos
- Documentação do CSS no painel "Styles"
- Suporte a aninhamento de CSS
- Como marcar logpoints e pontos de interrupção condicionais no console
- Ignorar scripts irrelevantes durante a depuração
- A descontinuação do criador de perfil do JavaScript começou
- Emulir contraste reduzido
- Farol 10
- Destaques diversos
- Como depurar a cor HD com o painel "Styles"
- UX de ponto de interrupção aprimorado
- Atalhos personalizáveis do Gravador
- Melhor destaque de sintaxe para o Angular
- Reorganizar caches no painel "Aplicação"
- Destaques diversos
- Como limpar o Painel de desempenho na recarga
- Atualizações do gravador
- Conferir e destacar o código do fluxo de usuários no gravador
- Personalizar os tipos de seletor de uma gravação
- Editar o fluxo de usuários durante a gravação
- Impressão bonita automática no local
- Melhor destaque de sintaxe 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 de performance
- Novos atalhos de teclado no painel "Console e fontes"
- Depuração de JavaScript aprimorada
- Destaques diversos
- [Experimental] UX aprimorada no gerenciamento de pontos de interrupção
- [Experimental] Impressão bonita automática no local
- Dicas para propriedades CSS inativas
- Detecção automática de XPath e seletores de texto no painel do gravador
- Passar por expressões separadas por vírgulas
- Configuração da lista de ignorados aprimorada
- Destaques diversos
- Personalizar atalhos de teclado no DevTools
- Alternar entre os temas claro e escuro com atalho de teclado
- Destacar objetos C/C++ no Memory Inspector
- Suporte a informações completas do iniciador para importação de HAR
- Iniciar a pesquisa do DOM depois de pressionar
Enter - Exibir ícones
starteendpara propriedades flexbox CSSalign-content - Destaques diversos
- Agrupar arquivos por "Criado" / "Implantado" no painel "Origens"
- Rastreamento de pilha vinculado para operações assíncronas
- Ignorar automaticamente scripts conhecidos de terceiros
- Pilha de chamadas aprimorada durante a depuração
- Como ocultar fontes na lista de ignorados no painel "Origens"
- Como ocultar arquivos ignorados no Command Menu
- Nova métrica "Interações" no painel "Performance"
- Detalhes dos tempos de LCP no painel "Performance Insights"
- Gerar automaticamente o nome padrão para gravações no painel do gravador
- Destaques diversos
- Reprodução detalhada no gravador
- Suporte a evento de passagem do mouse no painel do Gravador
- Maior exibição de conteúdo (LCP) no painel de insights de desempenho
- Identificar flashes de texto (FOIT, FOUT) como possíveis causas raiz de mudanças de layout
- Gerenciadores de protocolo no painel "Manifest"
- Selo da camada superior no painel "Elementos"
- Anexar informações de depuração do Wasm no momento da execução
- Suporte para edição em tempo real durante a depuração
- Acessar e editar regras de @scope no painel Estilos
- Melhorias no mapa de origem
- Destaques diversos
- Reiniciar 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"
- Nova métrica "Tempo do usuário" no painel "Insights de performance"
- Revelar o slot atribuído de um elemento
- Simular a simultaneidade de hardware para gravações de performance
- Visualizar o valor não colorido ao preencher automaticamente variáveis CSS
- Identificar frames de bloqueio no painel "Cache de avanço e retorno"
- Sugestões de preenchimento automático aprimoradas para objetos JavaScript
- Melhorias nos mapas de origem
- Destaques diversos
- Registrar eventos de clique duplo e clique com o botão direito no painel do gravador
- Novo período e modo de snapshot no painel do Lighthouse
- Controle de zoom aprimorado no painel de insights de desempenho
- Confirmar a exclusão de uma gravação de performance
- Reorganizar painéis no painel "Elementos"
- Escolher uma cor fora do navegador
- Visualização de valor inline aprimorada durante a depuração
- Suporte a blobs grandes para autenticadores virtuais
- Novos atalhos do teclado no painel de fontes
- Melhorias nos mapas de origem
- Recurso em visualização: novo painel "Insights de performance"
- Novos atalhos para emular temas claros e escuros
- Segurança aprimorada na guia "Pré-visualização de rede"
- Recarregamento aprimorado no ponto de interrupção
- Atualizações do console
- Cancelar a gravação do fluxo de usuários no início
- Mostrar pseudoelementos de destaque herdados no painel "Styles"
- Destaques diversos
- [Experimental] Copiar mudanças de CSS
- [Experimental] Como escolher uma cor fora do navegador
- Importar e exportar fluxos de usuários gravados como um arquivo JSON
- Conferir camadas em cascata no painel "Styles"
- Suporte à função de cor
hwb() - Melhoria na exibição de propriedades particulares
- Destaques diversos
- [Experimental] Novo período e modo de resumo no painel do Lighthouse
- Acessar e editar regras @supports no painel Estilos
- Suporte a seletores comuns por padrão
- Personalizar o seletor de gravação
- Renomear uma gravação
- Visualizar propriedades de classe/função ao passar o cursor
- Frames mostrados parcialmente no painel "Performance"
- Destaques diversos
- Limitar solicitações do WebSocket
- Novo painel da API Reporting no painel "Application"
- Suporte para esperar até que o elemento fique visível/clicável no painel do gravador
- Melhor estilo, formatação e filtragem do console
- Depurar a extensão do Chrome com arquivos de mapa de origem
- Árvore de pastas de origem aprimorada no painel "Origens"
- Mostrar arquivos de origem do worker no painel "Sources"
- Atualizações do tema escuro automático do Chrome
- Seletor de cores e painel dividido com suporte a toque
- Destaques diversos
- Recurso de visualização: árvore de acessibilidade de página inteira
- Mudanças mais precisas na guia "Mudanças"
- Definir um tempo limite maior para a gravação do fluxo de usuários
- Verificar se as páginas podem ser armazenadas em cache com a guia "Cache de avanço e retorno"
- Filtro do painel "Novas propriedades"
- Emula o recurso de mídia "forced-colors" do CSS
- Mostrar réguas ao passar o cursor
- Suporte a
row-reverseecolumn-reverseno editor Flexbox - Novos atalhos de teclado para reproduzir XHR e expandir 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 visualização: novo painel do Gravador
- Atualizar a lista de dispositivos no modo de dispositivo
- Preenchimento automático com "Editar como HTML"
- Experiência de depuração de código aprimorada
- Sincronizar as configurações do DevTools entre dispositivos
- Recurso em visualização: novo painel "Visão geral de CSS"
- A experiência de edição e cópia de comprimento do CSS foi restaurada e melhorada
- Emula o recurso de mídia "prefers-contrast" do CSS
- Emulir o recurso de tema escuro automático do Chrome
- Copiar declarações como JavaScript no painel "Styles"
- Nova guia "Payload" no painel "Rede"
- Melhoria na exibição de propriedades no painel "Propriedades"
- Opção para ocultar erros do CORS no console
- Visualização e avaliação adequadas de objetos
Intlno console - Stack traces assíncronos consistentes
- Manter a barra lateral do console
- Painel "Application cache" descontinuado no painel "Application"
- [Experimental] Novo painel da API Reporting no painel "Application"
- Novas ferramentas de criação de comprimento do CSS
- Ocultar problemas na guia "Issues"
- 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 denúncia de um bug de tradução
- Melhorias na interface do menu de comando do DevTools
- Usar o DevTools no seu idioma preferido
- Novos dispositivos Nest Hub na lista de dispositivos
- Testes de origem na visualização de detalhes do frame
- Selo de novas consultas de contêiner do CSS
- Nova caixa de seleção para inverter os filtros de rede
- Descontinuação da barra lateral do Console
- Mostrar cabeçalhos
Set-Cookiesbrutos na guia "Issues" e no painel "Network" - Exibir consistentemente os acessórios nativos como propriedades próprias no console
- Rastreamento de erros adequado para scripts inline com #sourceURL
- Mudar o formato de cor no painel Computed
- Substituir as dicas de ferramentas personalizadas por dicas de ferramentas HTML nativas
- [Experimental] Ocultar problemas na guia "Issues"
- Consultas editáveis de contêiner de CSS no painel "Estilos"
- Visualização do pacote da Web no painel "Network"
- Depuração da API Attribution Reporting
- Melhor gerenciamento de strings no console
- Depuração aprimorada do CORS
- Farol 8.1
- URL da nova nota no painel "Manifest"
- Seletores de correspondência de CSS corrigidos
- Como mostrar respostas JSON no painel de rede
- Editor de grade CSS
- Suporte para redeclarações de
constno console - Visualizador da ordem de origem
- Novo atalho para conferir detalhes do frame
- Suporte aprimorado à depuração do CORS
- Renomear o rótulo XHR para Fetch/XHR
- Filtrar o tipo de recurso Wasm no painel "Rede"
- Dicas de cliente HTTP do user agent para dispositivos na guia "Condições de rede"
- Informar problemas do modo Quirks na guia "Issues"
- Incluir interseções de computação no painel "Performance"
- Farol 7.5 no painel do Lighthouse
- Menu de contexto "Reiniciar frame" descontinuado na pilha de chamadas
- [Experimental] Monitor de protocolo
- [Experimental] Puppeteer Recorder
- Pop-up de informações das Métricas da Web
- Novo inspetor de memória
- Visualizar a quebra de rolagem do CSS
- Novo painel de configurações do ícone
- Visualização de imagem aprimorada com informações de proporção
- Novo botão de condições de rede com opções para configurar
Content-Encodings - atalho para conferir 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 "Detalhes do frame"
- Filtrar experimentos na configuração "Experimentos"
- Nova coluna
Vary Headerno painel "Armazenamento de cache" - Suporte à verificação de marca privada do JavaScript
- Suporte aprimorado para depuração de pontos de interrupção
- Suporte à visualização de passar o cursor com a notação
[] - Resumo aprimorado dos arquivos HTML
- Traces de pilha de erros adequados para depuração do Wasm
- Novas ferramentas de depuração do flexbox do CSS
- Nova sobreposição de Core Web Vitals
- A contagem de problemas foi movida para a barra de status do console
- Denunciar problemas com a Atividade confiável na Web
- Formatar strings como literais de string JavaScript (válidos) no console
- Novo painel "Trust Tokens" no painel "Application"
- Emulador do recurso de mídia CSS "color-gamut"
- Melhorias nas ferramentas de Progressive Web Apps
- Nova coluna
Remote Address Spaceno painel "Rede" - Melhorias de desempenho
- Mostrar recursos permitidos/proibidos na visualização de detalhes do frame
- Nova coluna
SamePartyno painel "Cookies" - Suporte
fn.displayNamenão padrão 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 "Issues"
- [Experimental] Visualização completa da árvore de acessibilidade no painel "Elements"
- Suporte a depuração para violações de Tipos confiáveis
- Capturar captura de tela do nó além da viewport
- Nova guia "Trust Tokens" para solicitações de rede
- Lighthouse 7 no painel do Lighthouse
- Suporte para forçar o estado
:targetdo CSS - Novo atalho para duplicar elementos
- Seletores de cores para propriedades CSS personalizadas
- Novos atalhos para copiar propriedades CSS
- Nova opção para mostrar cookies decodificados por 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
- Persistência da configuração "Gravar registro de rede"
- Conferir as conexões do WebTransport no painel "Rede"
- "Online" foi renomeado como "Sem limitação"
- Novas opções de cópia no console, no painel "Origens" e no painel "Estilos"
- Novas informações sobre service workers na visualização de detalhes do frame
- Medir informações de memória na visualização de detalhes do frame
- Enviar feedback na guia "Issues"
- Frames descartados no painel "Performance"
- Emulação de dispositivos dobráveis e de tela dupla no modo de dispositivo
- [Experimental] Automatizar testes de navegador com o Puppeteer Recorder
- [Experimental] Editor de fontes no painel "Styles"
- [Experimental] Ferramentas de depuração de flexbox do CSS
- [Experimental] Nova guia "Violações da CSP"
- [Experimental] Novo cálculo de contraste de cores: algoritmo avançado de contraste perceptivo (APCA, na sigla em inglês)
- Início mais rápido das DevTools
- Novas ferramentas de visualização de ângulo do CSS
- Emulação de tipos de imagem sem suporte
- Simular o tamanho da cota de armazenamento no painel "Armazenamento"
- Nova faixa das Core Web Vitals no painel "Performance"
- Informar erros do CORS no painel de rede
- Informações sobre o isolamento entre origens na visualização de detalhes do frame
- Novas informações sobre Web Workers na visualização de detalhes do frame
- Mostrar detalhes do frame do abridor para janelas abertas
- Abrir o painel "Network" no painel "Service Workers"
- Copiar valor da propriedade
- Copiar stacktrace para o iniciador de rede
- Visualizar o valor da variável Wasm ao passar o cursor do mouse
- Avaliar a variável Wasm no console
- Unidades de medida consistentes 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 da grade CSS
- Nova guia da WebAuthn
- Mover ferramentas entre o painel de cima e de baixo
- Novo painel "Computed" no painel "Styles"
- Como agrupar propriedades CSS no painel "Computed"
- Lighthouse 6.3 no painel do Lighthouse
- Eventos
performance.mark()na seção "Tempo" - Novos filtros
resource-typeeurlno painel "Rede" - Atualizações na visualização de detalhes do frame
- Descontinuação de
Settingsno menu "Mais ferramentas" - [Experimental] Conferir e corrigir problemas de contraste de cores no painel "CSS Overview"
- [Experimental] Personalizar atalhos de teclado no DevTools
- Painel "New Media"
- Fazer capturas de tela do nó usando o menu de contexto do painel "Elements"
- Atualizações da guia "Issues"
- Emulador de fontes locais ausentes
- Emulação de usuários inativos
- Emulador
prefers-reduced-data - Suporte a novos recursos do JavaScript
- Lighthouse 6.2 no painel do Lighthouse
- Descontinuação da listagem de "outras origens" no painel de Service Workers
- Mostrar resumo da cobertura para itens filtrados
- Nova visualização de detalhes do frame no painel "Application"
- Sugestão de cor acessível no painel "Styles"
- Restaure o painel Properties no painel "Elements"
- Valores de cabeçalho
X-Client-Datalegíveis por humanos no painel "Rede" - Preenchimento automático de fontes personalizadas no painel "Estilo"
- Exibir o tipo de recurso de forma consistente no painel de rede
- Botões "Limpar" nos painéis "Elementos" e "Rede"
- Edição de estilo para frameworks CSS-in-JS
- Lighthouse 6 no painel do Lighthouse
- Suspensão do uso da primeira exibição significativa (FMP)
- Suporte a novos recursos do JavaScript
- Novos avisos de atalho de app no painel de manifesto
- Eventos
respondWithdo worker de serviço na guia "Temporização" - Exibição consistente do painel "Computed"
- Deslocamentos de bytecode para arquivos do WebAssembly
- Copiar e cortar por linha no painel de fontes
- 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 pontos de registro
- Corrigir problemas do site com a nova guia "Issues"
- 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 de estilos
- Descontinuação do painel Properties no painel "Elements"
- Suporte a atalhos de apps no painel "Manifest"
- Emular deficiências visuais
- Emulando localidades
- Como depurar a política de incorporador entre origens (COEP)
- Novos ícones para pontos de interrupção, pontos de interrupção condicionais e pontos de registro
- Conferir as solicitações de rede que definem um cookie específico
- Anexar à esquerda do Command Menu
- A opção "Settings" no menu principal foi movida
- O painel "Audits" agora é o painel do Lighthouse
- Excluir todas as substituições locais em uma pasta
- Atualização da interface de tarefas longas
- Suporte a ícones mascaráveis no painel "Manifest"
- Suporte para o Moto G4 no modo dispositivo
- 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 não escapados - Erros de mapa de origem no console
- Configuração para desativar a rolagem após o fim de um arquivo
- Suporte para redeclarações de
leteclassno console - Melhorias na depuração do WebAssembly
- Solicitar cadeias de iniciador na guia "Iniciador"
- Destacar a solicitação de rede selecionada na seção "Visão geral"
- Colunas de URL e caminho no painel "Network"
- 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 por uma atualização de página
- Depurar por que um cookie foi bloqueado
- Conferir os valores dos cookies
- Simule diferentes preferências de prefers-color-scheme e prefers-reduced-motion
- Atualizações de cobertura de código
- Depurar por que um recurso de rede foi solicitado
- Os painéis do console e das fontes respeitam as preferências de recuo novamente
- Novos atalhos para navegação com o cursor
- Suporte a vários clientes no painel "Audits"
- Depuração do gerenciador de pagamentos
- Lighthouse 5.2 no painel "Audits"
- Maior exibição de conteúdo no painel "Performance"
- Registrar problemas do DevTools no menu principal
- Copiar estilos de elementos
- Visualizar deslocamentos de layout
- Lighthouse 5.1 no painel "Audits"
- Sincronização do tema do SO
- Atalho de teclado para abrir o editor de pontos de interrupção
- Cache de pré-busca no painel "Rede"
- Propriedades particulares ao visualizar objetos
- Notificações e mensagens push no painel "Application"
- Preenchimento automático com valores CSS
- Uma nova interface para as configurações de rede
- Mensagens WebSocket em exportações de HAR
- Botões de importação e exportação de HAR
- Uso da memória em tempo real
- Números de porta de registro do worker do serviço
- Inspecionar eventos de busca e sincronização em segundo plano
- Puppeteer para Firefox
- Predefinições significativas ao preencher automaticamente funções CSS
- Remover dados do site do Command Menu
- Conferir todos os bancos de dados IndexedDB
- Mostrar o tamanho não compactado de um recurso ao passar o cursor sobre ele
- Pontos de interrupção inline no painel "Pontos de interrupção"
- Contagem de recursos do IndexedDB e do cache
- Configuração para desativar a dica de ferramenta detalhada da Inspeção
- Configuração para alternar o recuo de tabulação no editor
- Destacar todos os nós afetados pela propriedade CSS
- Lighthouse v4 no painel "Audits"
- Visualizador de mensagens binárias do WebSocket
- Fazer captura de tela da área no menu de comandos
- Filtros de service worker no painel "Rede"
- Atualizações do painel de desempenho
- Tarefas longas em gravações do painel de desempenho
- First Paint na seção "Tempo"
- Dica extra: atalho para conferir códigos de cores RGB e HSL (vídeo)
- Pontos de registro
- Dicas detalhadas no modo de inspeção
- Exportar dados de cobertura de código
- Navegar pelo console com um teclado
- Linha de taxa de contraste AAA no seletor de cores
- Salvar substituições de localização geográfica personalizadas
- Dobramento de código
- A guia "Frames" foi renomeada para "Mensagens"
- Dica extra: Como filtrar o painel de rede por propriedade (vídeo)
- Visualizar as métricas de desempenho no painel "Performance"
- Destacar nós de texto na árvore do DOM
- Copiar o caminho JS para um nó DOM
- Atualizações do painel de auditorias, incluindo uma nova auditoria que detecta bibliotecas JS e novas palavras-chave para acessar o painel de auditorias no menu de comando
- Dica extra: usar o modo de dispositivo para inspecionar consultas de mídia (vídeo)
- Passe o cursor sobre um resultado da expressão em tempo real para destacar um nó do DOM.
- Armazenar nós do DOM como variáveis globais
- Informações sobre iniciador e prioridade agora nas importações e exportações de HAR
- Acessar o menu de comando pelo menu principal
- Pontos de interrupção picture-in-picture
- Dica extra: use
monitorEvents()para registrar os eventos disparados de um nó no 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 otimização de rede no Command Menu
- Pontos de interrupção condicionais de preenchimento automático
- Interrupção em eventos AudioContext
- Depurar apps Node.js com o ndb
- Dica extra: medir interações reais do usuário com a API User Timing
- Avaliação estrita
- Dicas de argumentos
- Preenchimento automático de funções
- Palavras-chave da ES2017
- Lighthouse 3.0 no painel "Audits"
- Suporte a BigInt
- Como adicionar caminhos de propriedade ao painel "Watch"
- "Mostrar carimbos de data/hora" movida para "Configurações"
- Dica extra: Métodos menos conhecidos do console (vídeo)
- Pesquisar em todos os cabeçalhos de rede
- Prévias de valor de variável CSS
- Copiar como busca
- Novas auditorias, opções de configuração para computadores e visualização de rastros
- Interromper loops infinitos
- Tempo do usuário nas guias "Performance"
- Instâncias de VM JavaScript listadas claramente no painel "Memória"
- A guia "Rede" foi renomeada para "Página"
- Atualizações do tema escuro
- Informações de transparência dos certificados no painel de segurança
- Recursos de isolamento de sites no painel "Performance"
- Dica extra: Painel de camadas + inspetor de animações (vídeo)
- Blackboxing no painel de rede
- Ajustar automaticamente o zoom no modo de dispositivo
- Impressão bonita nas guias "Visualizar" e "Resposta"
- Visualizar conteúdo HTML na guia "Prévia"
- A substituição local oferece suporte a estilos no HTML
- Dica extra: scripts de framework de caixa-preta 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 desempenho
- Várias gravações no painel "Performance"
- Passo a passo de código confiável com workers em código assíncrono
- Dica extra: Automatize ações do DevTools com o Puppeteer (vídeo)
- Monitor de desempenho
- Barra lateral do console
- Agrupar mensagens semelhantes do console
- Dica extra: Alternar a pseudoclasse de passar o cursor (vídeo)
- Suporte a depuração remota de vários clientes
- Espaços de trabalho 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 do listener de eventos (vídeo)
- Aguardar no nível superior no console
- Novos fluxos de trabalho de captura de tela
- Destaque da grade CSS
- Uma nova API do console para consultar objetos
- Novos filtros do Search Console
- Importações de HAR no painel "Rede"
- Recursos de cache com visualização
- Depuração de cache mais previsível
- Cobertura de código no nível do bloco
- Simulação de limitação de dispositivos móveis
- Conferir o uso do armazenamento
- Conferir quando um service worker armazenou em cache as respostas
- Ativar o medidor de QPS no Command Menu
- Definir o comportamento da roda do mouse para aplicar zoom ou rolar
- Suporte à depuração para módulos ES6
- Novo painel "Audits"
- Selos de terceiros
- Um novo gesto para a opção "Continuar aqui"
- Entrar em um programa 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
- Passar por await assíncrono
- Menu de comando unificado