Melhorias no painel de rede
Essa versão traz várias melhorias para o painel Network.
Redes de filtros reinventadas
O painel Rede recebe novos filtros, reformulados com base no seu feedback. Os filtros específicos de tipo permanecem os mesmos: um conjunto de selos em uma barra de seleção múltipla limpa.
Para organizar a interface, as caixas de seleção para ocultar, bloquear e relacionadas a terceiros são movidas para uma lista suspensa. A lista tem um número que informa quantos filtros estão marcados no menu suspenso.
Para voltar ao design antigo do filtro, limpe
Settings > Experiments > Redesign of the filter bar in the Network panel.Conte para a gente o que você achou do design reimaginado.
Problema do Chromium: 362672528.
As exportações de HAR agora excluem dados sensíveis por padrão
Para reduzir as chances de vazamentos acidentais de informações sensíveis, o registro de rede exportado no formato HAR não conterá mais cabeçalhos Cookie
, Set-Cookie
e Authorization
por padrão.
Para exportar registros no formato HAR com dados sensíveis, ative as
Configurações > Preferências > Rede > Permitir a geração de HAR com dados sensíveis. O painel Rede marcará o botão de Exportar com uma seta. Mantenha o botão pressionado e selecione Exportar HAR (com dados confidenciais) no menu suspenso.Problema do Chromium: 361717594.
Melhorias no painel "Elementos"
Essa versão traz várias melhorias ao painel Elementos.
Preencher valores automaticamente para propriedades text-emphasis-*
O preenchimento automático na guia Estilos agora sugere valores para as seguintes propriedades CSS:
Problema do Chromium: 361471205.
Os estouros de rolagem marcados com um selo
O painel Elementos agora marca com um novo selo de rolagem os elementos que contêm conteúdo com excesso e têm overflow: scroll
ou overflow: auto
, para que você possa detectar facilmente o excesso de rolagem. Assim como os outros selos, esse símbolo reflete o DOM atual e desaparece se o conteúdo parar de estourar devido a, por exemplo, uma mudança de tamanho.
Problema do Chromium: 40670442.
Declarações vazias após regras aninhadas não "se deslocam"
Seguindo a decisão do Grupo de Trabalho do CSS de permitir que declarações simples apareçam após regras aninhadas, a guia Styles não "muda para cima" essas declarações durante a análise.
No exemplo de código abaixo, a declaração simples após a regra aninhada agora não faz com que o Chrome reordene os estilos na cascata de forma inesperada:
p {
width: 100px;
height: 100px;
@media screen {
background-color: red;
}
background-color: green;
}
Problema do Chromium: 358119261.
Melhorias no painel de desempenho
Esta versão traz várias melhorias para o painel Performance.
Recomendações em métricas ao vivo
As métricas em tempo real agora podem fornecer recomendações específicas para você configurar seu ambiente de desenvolvimento o mais próximo possível da experiência dos usuários.
Para receber recomendações, configure a busca de dados de campo no Chrome UX Report (CrUX) e expanda a seção Considerar as condições de teste locais em cada card de métricas (se houver) e Considerar ambientes de usuário reais nas Configurações de ambiente.
Siga as recomendações para aproximar a experiência dos seus usuários.
Navegar na navegação estrutural
Agora é possível navegar pela localização atual na linha do tempo de uma gravação de apresentação: "jump" navegar entre as navegações estruturais, substituir as secundárias e remover várias. Antes, quando você selecionava um breadcrumb pai, os filhos dele desapareciam.
Melhorias no painel de memória
Essa versão traz várias melhorias para o painel Memória.
Novo perfil "Elementos removidos"
O painel Memória recebe um novo tipo de perfil: Elementos desconectados. Ela mostra objetos que são retidos por uma referência JavaScript.
Problema do Chromium: 350519222.
Melhoria na nomenclatura de objetos JS simples
Para organizar e organizar a categoria Object
em snapshots de heap, os objetos JavaScript simples agora são:
- Nomeados com base nas propriedades que contêm, por exemplo,
{firstProperty, secondProperty, ..., *nthProperty}
. - Pesquisáveis por esses nomes construídos pelo DevTools.
- Agrupados se tiverem as mesmas propriedades.
Problema do Chromium: 350519222.
Desativar a aplicação de temas dinâmicos
Agora você pode desativar a correspondência automática de cores do DevTools com as cores do tema personalizado no Chrome.
Para desativar a aplicação de temas dinâmicos, limpe
Settings > Preferences > Appearance > Match Chrome color scheme e recarregue as Ferramentas do desenvolvedor.Problema do Chromium: 328472696.
Experimento do Chrome: compartilhamento de processos
Normalmente, quando você abre várias guias do mesmo site (como no app Documentos Google), o Chrome cria um processo de renderizador separado para cada uma. O experimento Compartilhamento de processo muda isso permitindo que várias guias compartilhem o mesmo processo de renderização para melhorar o desempenho.
Se a mensagem "Esta guia compartilha recursos com outras guias..." for exibida enquanto o DevTools estiver aberto, você fará parte do pequeno grupo que ativou o experimento Compartilhamento de processos.
O compartilhamento de processos pode afetar a depuração de pontos de interrupção e a análise de desempenho. Para mais informações, consulte Experimento do Chrome: compartilhamento de processos.
Lighthouse 12.2.1
O painel Lighthouse agora executa o Lighthouse 12.2.1.
Essa atualização apresenta um limite de < 20 KB
para ignorar sugestões de compactação de recursos, ajudando você a se concentrar apenas na economia significativa do tamanho do arquivo. Confira 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.
Destaques diversos
Estas são algumas correções e melhorias importantes feitas nesta versão:
- Elementos:
- Console: corrigimos um caractere & não escapado em strings de várias linhas em comandos cURL (352651673).
- Memória: foi corrigida a seleção padrão em páginas com service workers. Agora, a linha de execução principal está selecionada (40669896).
- Segurança: o esquema de URL destacado agora é atualizado corretamente à medida que o estágio de segurança de uma origem muda (359920086).
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 visualização dão acesso aos recursos mais recentes das Ferramentas do desenvolvedor, permitem testar APIs avançadas da plataforma Web e encontrar problemas no seu site antes dos usuários.
Entrar em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.
- Envie uma sugestão ou feedback para crbug.com.
- Informe um problema do DevTools usando Mais opções > Ajuda > Relate problemas no DevTools no DevTools.
- Tweete 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 que foi abordado na série Novidades no DevTools.
- Melhorias no painel de rede
- Repensando os filtros de rede
- As exportações HAR agora excluem dados sensíveis por padrão
- Melhorias no painel "Elements"
- 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 na 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
- Lighthouse 12.2.1 (link em inglês)
- Destaques diversos
- O Recorder 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 de elementos
- Forçar mais estados para elementos específicos
- "Elementos > Estilos" agora faz o preenchimento automático de mais propriedades de grade
- Farol 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
- Pista 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 12.1.0
- Melhorias na acessibilidade
- Destaques diversos
- Inspecionar o posicionamento da âncora de CSS no painel Elementos
- Melhorias no painel "Fontes"
- Função "Nunca pausar aqui" aprimorada
- Novos listeners de eventos de ajuste de rolagem
- Melhorias no painel de rede
- 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 atualizado
- Ignorar scripts no gráfico de chama
- 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
- 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 para regras@position-try em Elementos > Estilos
- Melhorias no painel "Fontes"
- Configurar o estilo de impressão automático e o fechamento de colchetes
- As promessas rejeitadas tratadas são reconhecidas como capturadas
- Causas de erros no console
- Melhorias no painel Network
- Inspecionar cabeçalhos de 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 de rede aprimorada 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 filhos delas no gráfico de chamas
- 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 ser descontinuado
- Descontinuação do criador de perfil do JavaScript: fase quatro, final
- Destaques diversos
- Encontre um easter egg
- Atualizações do painel de elementos
- Emulação de uma página em foco em Elementos > Estilos
- Seletor de cores, relógio angular e editor de suavização em substitutos de
var()
- A ferramenta de comprimento do CSS foi descontinuada
- Pop-over para o resultado de pesquisa selecionado na página Desempenho > Música principal
- Atualizações do painel de rede
- 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
- Farol 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 de desempenho
- Navegação estrutural 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 em Estilos
- Suporte da propriedade align-content para contêineres de bloco
- Suporte a postura para dispositivos dobráveis emulados
- Temas dinâmicos
- Avisos de descontinuação gradual 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 do
@font-palette-values
- Caso compatível: propriedade personalizada como substituta de outra
- Melhoria no suporte a mapas de origem
- Melhorias no painel de desempenho
- Acompanhamento 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 "Origens"
- 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
- 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
- ignorar lista 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_ignoreList
foi renomeado comoignoreList
nos mapas de origem- Novo botão de modo de entrada durante a depuração remota
- O painel Elementos agora mostra URLs para nós de #documentos
- 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 versão 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 a serem emulados
- JSON in-line de estilo atraente em tags de script no Source
- 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 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"
- Reorganizar painéis em "Origens"
- Destaque de sintaxe e impressão bonita 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
- Substitua 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
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 de 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
- (Experimental) Monitoramento do protocolo aprimorado
- Melhoria na depuração de folhas de estilo ausentes
- Suporte a temporização linear em Elementos > Estilos > Editor de transição
- Suporte a buckets de armazenamento e visualização de metadados
- Lighthouse versão 10.3.0
- Acessibilidade: comandos de 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 a 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"
- Afirmaçõ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 > 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, Vite e Rollup
- Melhorias de 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 JavaScript Profiler: estágio dois
- Destaques diversos
- Atualizações do gravador
- Extensões de repetiçã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 do Gravador
- Elementos > Atualizações de estilo
- Documentação de CSS no painel "Estilos"
- Suporte a aninhamento de CSS
- Como marcar logpoints e pontos de interrupção condicionais no console
- Ignorar scripts irrelevantes durante a depuração
- Descontinuação do JavaScript Profiler iniciada
- Emulir contraste reduzido
- Farol 10
- Destaques diversos
- Depuração de cores em HD 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
- Acessar e destacar o código do fluxo de usuários 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 da 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 automática no local
- Dicas para propriedades CSS inativas
- Detectar automaticamente seletores XPath e de texto no painel Gravador
- Passar por expressões separadas por vírgulas
- Melhoria na configuração "Lista de ignorados"
- 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 após pressionar
Enter
- Mostrar ícones
start
eend
para as propriedades flexbox do CSSalign-content
- Destaques diversos
- Agrupar arquivos por Criado / Implantado no painel Origens
- Rastreamento de pilhas vinculadas 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"
- 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
- Reprodução detalhada no gravador
- Suporte para o evento de passar o 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
- Manipuladores de protocolo no painel "Manifesto"
- 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 espaço 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
- Capturar eventos de clique duplo e de clique com o botão direito do mouse no painel Gravador
- Novo período e modo de snapshot 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
- 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 de pré-lançamento: novo painel de insights de desempenho
- Novos atalhos para emular temas claros e escuros
- Segurança aprimorada na guia "Pré-visualização de rede"
- Melhoria no recarregamento no ponto de interrupção
- Atualizações do console
- Cancelar a gravação do fluxo de usuários no início
- Exibir pseudoelementos de destaque herdados no painel "Estilos"
- 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 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 a 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
- Limitar solicitações do WebSocket
- Novo painel da API Reporting no painel "Application"
- Suporte para esperar até que o elemento esteja visível/clicável no painel do gravador
- Estilo, formatação e filtragem melhores no 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 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"
- Filtro do painel "Novas propriedades"
- Emular o recurso de mídia de cores forçadas do CSS
- Mostrar réguas ao passar o cursor
- Suporte a
row-reverse
ecolumn-reverse
no 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
- Preenchimento automático com "Editar como HTML"
- Experiência aprimorada de depuração de código
- Sincronizar as configurações do DevTools em vários dispositivos
- Recurso em visualização: novo painel "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 de objetos
Intl
no 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 "Issues"
- Melhoria na exibição de propriedades
- Lighthouse 8.4 no painel do Lighthouse
- Classificar snippets no painel Origens
- Novos links para as notas da versão traduzidas e para denunciar 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
- Descontinuação da barra lateral do Console
- Mostrar cabeçalhos
Set-Cookies
brutos na guia "Problemas" e no painel "Rede" - Acessadores nativos de exibição consistentes 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 CSS no painel "Estilos"
- Visualização do pacote da Web no painel "Rede"
- Depuração da API Attribution Reporting
- Melhor gerenciamento de strings no console
- Depuração de CORS aprimorada
- 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 do CSS
- Suporte para declarações de
const
no Console - Visualizador da ordem de origem
- Novo atalho para conferir 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 "Rede"
- 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] Puppeteer Recorder
- Pop-up de informações das Métricas da Web
- Novo inspetor de memória
- Visualizar o efeito de rolagem do CSS
- Novo painel de configurações do selo
- 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-Encoding
s - 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 de detalhes do frame
- Filtrar experimentos na configuração "Experimentos"
- Nova coluna
Vary Header
no painel "Armazenamento de cache" - Suporte para verificação de marca particular do JavaScript
- Suporte aprimorado para depuração de pontos de interrupção
- Suporte à visualização de passar o cursor com a notação
[]
- Descrição aprimorada de 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
- Contagem de problemas movida para a barra de status do console
- Denunciar problemas de Atividades confiáveis 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 Space
no painel "Rede" - Melhorias no desempenho
- Exibir recursos permitidos/proibidos na visualização de detalhes do frame
- Nova coluna
SameParty
no painel "Cookies" - Suporte
fn.displayName
não padrão descontinuado - Descontinuação de
Don't show Chrome Data Saver warning
no 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
- 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
:target
do CSS - Novo atalho para duplicar elementos
- Seletores de cores para propriedades CSS personalizadas
- Novos atalhos para copiar propriedades de 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"
- 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"
- Emulação de dispositivos dobráveis e de tela dupla no modo de dispositivo
- [Experimental] Automatizar testes do 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 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 do CSS
- Emulação de tipos de imagem sem suporte
- 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 "Rede" no painel "Workers de serviço"
- Copiar valor da propriedade
- Copiar stacktrace para o iniciador de rede
- Visualizar o valor da variável Wasm ao passar o 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 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 "Tempo" - Novos filtros
resource-type
eurl
no painel Rede - Atualizações na visualização de detalhes do frame
- Descontinuação de
Settings
no 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 "Problemas"
- Emular fontes locais ausentes
- Emular 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 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"
- Restaure o painel Propriedades no painel "Elementos"
- Valores do cabeçalho
X-Client-Data
legíveis por humanos no painel Network - Preenchimento automático de fontes personalizadas no painel "Estilo"
- Exibir o tipo de recurso de forma consistente no painel de rede
- 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
respondWith
do 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 pontos de registro
- 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 Properties no painel "Elements"
- Suporte a atalhos de apps no painel "Manifest"
- Emular deficiências visuais
- Emular 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 "Configurações" no menu principal foi movida
- 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 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
content
do CSS para ver os valores não escapados - 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
let
eclass
no Console - Depuração aprimorada 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 "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 por uma atualização de 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 do console e das origens 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 "Auditorias"
- Maior exibição de conteúdo no painel "Performance"
- Registre problemas do DevTools no menu principal
- Copiar estilos de elementos
- Visualizar mudanças de layout
- Lighthouse 5.1 no painel "Auditorias"
- 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 "Aplicativo"
- 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 service worker
- Inspecionar eventos de busca em segundo plano e sincronização em segundo plano
- Puppeteer para Firefox
- Predefinições significativas ao preencher automaticamente funções CSS
- Limpar dados do site no menu de comando
- 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"
- Contagens de recursos do IndexedDB e do Cache
- Configuração para desativar a dica detalhada de 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 "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 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)
- Logpoints (em inglês)
- Dicas detalhadas no modo de inspeção
- Dados de cobertura do código de exportação
- 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
- Guia "Frames" renomeada para a guia "Mensagens"
- Dica extra: Como filtrar o 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 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 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 DOM como variáveis globais
- Informações sobre iniciadores e prioridades agora nas importações e exportações HAR
- Acessar o menu de comando pelo menu principal
- Pontos de interrupção do modo 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
- Preencher automaticamente pontos de interrupção condicionais
- Interromper nos eventos do AudioContext
- Depurar apps Node.js com o ndb
- Dica bônus: avalie as interações reais dos usuários com a API User Timing
- Avaliação estrita
- Dicas de argumentos
- Preenchimento automático de função
- Palavras-chave da ES2017
- Lighthouse 3.0 no painel "Auditorias"
- Suporte a BigInt
- Como adicionar caminhos de propriedades ao painel "Observar"
- "Mostrar carimbos de data/hora" movida para "Configurações"
- Dica bônus: métodos de console menos conhecidos (vídeo)
- Pesquisar em todos os cabeçalhos de rede
- Visualizações 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 "Desempenho"
- Dica extra: Painel de camadas + inspetor de animações (vídeo)
- Blackboxing no painel Network
- Ajustar automaticamente o zoom no modo de 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 "Performance"
- Uso de código confiável com workers em código assíncrono
- Dica extra: Automatize ações das ferramentas do desenvolvedor 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 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)
- Uma espera de alto nível no console
- Novos fluxos de trabalho de capturas de tela
- Destaque de grade CSS
- Uma nova API do console para consultar objetos
- Novos filtros do console
- Importações HAR no painel Network
- Recursos de cache com visualização
- 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
- Conferir o uso do armazenamento
- Ver quando um service worker armazena respostas em cache
- 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 "Continuar até aqui"
- Entrar em um processo 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