Kayce Basques
Novos recursos e mudanças chegando ao DevTools no Chrome 62:
- Suporte para operadores
awaitde nível superior no Console. - Capturas de tela de uma parte da janela de visualização e capturas de tela de nós HTML específicos.
- Destaque em grade CSS.
- Uma nova API Console para consultar objetos.
- Filtros negativos e filtros de URL no Console.
- Importações HAR no painel Network.
- Recursos de cache que podem ser visualizados.
- Depuração de cache mais previsível.
- Cobertura de código no nível de bloqueio.
Operadores de espera de nível superior no console
O Console agora oferece suporte a operadores await de nível superior.
Figura 1. Como usar os operadores await de nível superior no Console
Novos fluxos de trabalho de captura de tela
Agora é possível fazer uma captura de tela de uma parte da janela de visualização ou de um nó HTML específico.
Capturas de tela de uma parte da janela de visualização
Para capturar a tela de uma parte da janela de visualização:
- Clique em Inspect
ou pressione
Command + Shift + C (Mac) ou
Control + Shift + C (Windows e Linux) para entrar no modo Inspecionar elementos. - Segure Command (Mac) ou Control (Windows e Linux) e selecione a parte da janela de visualização que você quer capturar.
- Solte o mouse. O DevTools faz o download de uma captura de tela da parte selecionada.
Figura 2. Como capturar a tela de uma parte da janela de visualização
Capturas de tela de nós HTML específicos
Para capturar a tela de um nó HTML específico:
Selecione um elemento no painel Elementos.
Figura 3. Neste exemplo, o objetivo é fazer uma captura de tela do cabeçalho azul que contém o texto
Tools. Esse nó já está selecionado na Árvore DOM do painel Elementos.Abra o Menu de comando.
Comece a digitar
nodee selecioneCapture node screenshot. O DevTools faz o download de uma captura de tela do nó selecionado.
Figura 4. O resultado do comando
Capture node screenshot
Destaque em grade CSS
Para visualizar a grade CSS que está afetando um elemento, passe o cursor sobre um elemento na Árvore DOM do painel Elementos. Uma borda tracejada aparece ao redor de cada um dos itens da grade. Isso só funciona quando a
display:grid é aplicada ao item selecionado ou ao item pai dele.
Figura 5. Como destacar uma grade CSS
Confira o vídeo abaixo para aprender os conceitos básicos da grade CSS em menos de 2 minutos.
Uma nova API para consultar objetos de heap
Chame queryObjects(Constructor) no Console para retornar uma matriz de objetos que foram
criados com o construtor especificado. Exemplo:
queryObjects(Promise). Retorna todas as promessas.queryObjects(HTMLElement). Retorna todos os elementos HTML.queryObjects(foo), em quefooé o nome de uma função. Retorna todos os objetos que foram instanciados vianew foo().
O escopo do queryObjects() é o contexto de execução selecionado no Console. Consulte Como selecionar o contexto de execução.
Filtros do novo console
O Console agora é compatível com filtros negativos e de URL.
Filtros negativos
Digite -<text> na caixa Filtro para filtrar qualquer mensagem do Console que inclua <text>.
Figura 6. A primeira instrução registra one, two, three e four no Console. two está oculto porque -two está inserido na caixa Filtro
O DevTools filtra uma mensagem se <text> for encontrado:
- No texto da mensagem.
- No nome de arquivo a partir do qual a mensagem foi originada.
- No texto do stack trace.
O filtro negativo também funciona com expressões regulares, como -/[4-5]*ms/.
Filtros de URL
Digite url:<text> na caixa Filtro para mostrar apenas mensagens originadas de um script com URL que inclua <text>.
O filtro usa correspondência difusa. Se <text> aparecer em qualquer lugar no URL, o DevTools mostrará a
mensagem.
Figura 7. Usar a filtragem de URL para mostrar apenas mensagens originadas de scripts com um URL que inclua hymn. Ao passar o mouse sobre o nome do script, é possível ver que o nome do host inclui este texto
Importações HAR no painel Network
Arraste e solte um arquivo HAR no painel Rede para importá-lo.
Figura 8. Importar um arquivo HAR
Recursos de cache que podem ser visualizados no painel "Aplicativo"
Clique em uma linha em uma tabela de Armazenamento em cache para conferir uma prévia desse recurso abaixo da tabela.
Figura 9. Como visualizar um recurso de cache
Depuração de cache mais responsiva
No Chrome 61 e versões anteriores, a depuração de caches criados com a API Cache é... difícil. Por exemplo, quando uma página cria um novo cache, você precisa atualizar a página ou as DevTools manualmente para ver o novo cache.
No Chrome 62, a guia Armazenamento em cache agora é atualizada em tempo real sempre que você cria, atualiza ou exclui um cache ou um recurso. Assista ao vídeo abaixo para ver um exemplo.
Veja a Demonstração de armazenamento em cache para fazer um teste.
Cobertura de código no nível de bloqueio
No Chrome 61 e versões anteriores, a guia Cobertura marca todo o código em uma função como usado, desde que a função seja chamada.
Figura 10. Um exemplo da guia Cobertura no Chrome 61. A linha 4 é marcada como usada, mesmo que nunca seja executada
A partir do Chrome 62, a guia Cobertura informa qual código de uma função é chamado.
Figura 11. Um exemplo da guia Cobertura no Chrome 62. A linha 4 está marcada como não utilizada
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-visualização dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!
Entrar em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.
- Envie uma sugestão ou feedback pelo site crbug.com.
- Para informar um problema do DevTools, use Mais opções
> Ajuda > Informar problemas do DevTools no DevTools. - Tuíte em @ChromeDevTools.
- Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.
Novidades no DevTools
Uma lista de tudo que foi abordado na série Novidades no DevTools.
Chrome 127
- Inspecionar o posicionamento da âncora de CSS no painel Elementos
- Melhorias no painel "Fontes"
- "Nunca pause aqui" aprimorado
- Novos listeners de eventos de ajuste de rolagem
- Melhorias no painel Network
- Predefinições de limitação de rede atualizadas
- Informações do service worker em campos personalizados do formato HAR
- Enviar e receber eventos WebSocket no painel "Desempenho"
- Destaques diversos
Chrome 126
- Melhorias no painel de desempenho
- Mover e ocultar faixas com o modo de configuração de faixa atualizado
- Ignorar scripts no Flame Chart
- Limitar a CPU em 20 vezes
- O painel de insights de desempenho será descontinuado
- Encontre o uso excessivo da memória com novos filtros em snapshots de heap
- Inspecionar buckets de armazenamento em Aplicativo > Armazenamento
- Desativar avisos de self-XSS com uma flag de linha de comando
- Lighthouse versão 12.0.0
- Destaques diversos
Chrome 125
- Entenda melhor os erros e avisos no console com o Gemini
- Suporte para regras@position-try em Elementos > Estilos
- Melhorias no painel "Fontes"
- Configurar estilos de formatação automáticos e fechamento de colchetes
- Promessas rejeitadas processadas são reconhecidas como capturadas
- Causas de erro no console
- Melhorias no painel Network
- Inspecionar cabeçalhos das dicas iniciais
- Ocultar a coluna "Cascata"
- Melhorias no painel de desempenho
- Capturar estatísticas do seletor de CSS
- Mudar a ordem e ocultar faixas
- Ignorar retenções no painel Memória
- Lighthouse 11.7.1 (link em inglês)
- Destaques diversos
Chrome 124
- Novo painel de preenchimento automático
- Limitação aprimorada de rede para WebRTC
- Suporte para animações de rolagem no painel "Animações"
- O suporte ao aninhamento de CSS foi melhorado em Elementos > Estilos.
- Painel de desempenho aprimorado
- Ocultar funções e os filhos delas no Flame Chart
- Setas de iniciadores selecionados para os eventos que eles iniciaram
- Lighthouse versão 11.6.0
- Dicas para categorias especiais em Memória > Instantâneos de heap
- Aplicativo > Atualizações de armazenamento
- Bytes usados para armazenamento compartilhado
- O Web SQL foi totalmente descontinuado
- Melhorias no painel de cobertura
- O painel "Camadas" pode ter sido descontinuado
- Descontinuação do JavaScript Profiler: fase 4, final
- Destaques diversos
Chrome 123
- Encontre um easter egg
- Atualizações do painel Elements
- Emule uma página em foco em Elementos > Estilos.
- Seletor de cores, Relógio Ângulo e Editor de Easing nos substitutos do
var() - A ferramenta de comprimento de CSS foi descontinuada
- Pop-over para o resultado da pesquisa selecionado em "Performance > Música principal"
- Atualizações do painel Network
- Botão "Limpar" e "Filtro de pesquisa" em Rede > guia Fluxo de eventos
- Dicas com motivos de isenção para cookies de terceiros em Rede > Cookies
- Ativar e desativar todos os pontos de interrupção em origens
- Ver os scripts carregados no DevTools para Node.js
- Lighthouse versão 11.5.0
- Melhorias na acessibilidade
- Destaques diversos
Chrome 122
- A coleção oficial de extensões do Gravador está disponível
- Melhorias na rede
- Motivo da falha na coluna "Status"
- Submenu "Copiar" aprimorado
- Melhorias no desempenho
- Navegação estrutural na linha do tempo
- Iniciadores de eventos na faixa principal
- Menu seletor de instâncias de VM JavaScript para DevTools do Node.js
- Novo atalho e comando em Origens
- Melhorias nos elementos
- O pseudoelemento de transição de visualização agora pode ser editado em Estilos
- Compatibilidade com a propriedade align-content para contêineres de bloco
- Suporte de postura para dispositivos dobráveis emulados
- Temas dinâmicos
- Avisos de descontinuação gradual de cookies de terceiros nos painéis "Rede" e "Aplicativo"
- Lighthouse versão 11.4.0
- Melhorias na acessibilidade
- Destaques diversos
Chrome 121
- Melhorias nos elementos
- Barra de filtro simplificada no painel "Network"
- Suporte do
@font-palette-values - Caso compatível: propriedade personalizada como substituta de outra
- Suporte aprimorado a mapas de origem
- Melhorias no painel de desempenho
- Faixa de interações aprimoradas
- Filtragem avançada nas guias "De baixo para cima", "Árvore de chamadas" e "Log de eventos"
- Marcadores de recuo no painel "Sources"
- Dicas úteis para cabeçalhos e conteúdo modificados no painel "Rede"
- Novas opções do menu de comando para adicionar e remover padrões de bloqueio de solicitações
- O experimento de violações da CSP foi removido
- Lighthouse versão 11.3.0
- Melhorias na acessibilidade
- Destaques diversos
Chrome 120
- Desativação de cookies de terceiros
- Analisar os cookies do seu site com a Ferramenta de análise de dados do Sandbox de privacidade
- ignorar lista aprimorada
- Padrão de exclusão padrão de node_modules
- As exceções capturadas agora interrompem a execução se capturadas ou transmitidas por código não ignorado
x_google_ignoreListrenomeado comoignoreListnos mapas de origem- Novo botão para ativar/desativar o modo de entrada durante a depuração remota
- O painel Elementos agora mostra URLs para nós de #documentos
- Política efetiva de segurança de conteúdo no painel de aplicativos
- Depuração de animação aprimorada
- Caixa de diálogo "Você confia neste código?" em "Sources" e aviso XSS no console.
- Pontos de interrupção de listener de eventos em workers da Web e worklets
- O novo selo de mídia para
<audio>e<video> - Pré-carregamento renomeado para carregamento especulativo
- Lighthouse versão 11.2.0
- Melhorias na acessibilidade
- Destaques diversos
Chrome 119
- Seção @property aprimorada em Elementos > Estilos
- Regra @propriedade editável
- Foram relatados problemas com regras @property inválidas
- Lista atualizada de dispositivos a serem emulados
- JSON in-line de estilo atraente em tags de script no Source
- Preencher campos particulares automaticamente no console
- Lighthouse versão 11.1.0
- Melhorias na acessibilidade
- Descontinuação do Web SQL
- Validação da proporção da captura de tela em Aplicativo > Manifesto
- Destaques diversos
Chrome 118
- Nova seção para propriedades personalizadas em Elementos > Estilos
- Mais melhorias nas substituições locais
- Pesquisa aprimorada
- Painel "Origens" aprimorado
- Espaço de trabalho simplificado no painel "Origens"
- Reordenar painéis em Origens
- Destaque de sintaxe e estilos de formatação para mais tipos de script
- Emular o recurso de mídia "prefers-reduced-transparency"
- Farol 11
- Melhorias na acessibilidade
- Destaques diversos
Chrome 117
- Melhorias no painel Network
- Substituir o conteúdo da Web localmente com ainda mais rapidez
- Substituir o conteúdo de XHR e solicitações de busca
- Ocultar solicitações de extensões do Chrome
- Códigos de status HTTP legíveis por humanos
Desempenho: confira as mudanças na prioridade de busca para eventos de rede
A extensão de depuração C/C++ WebAssembly para DevTools agora é de código aberto
(Experimental) Nova emulação de renderização: prefers-reduced-transparency
Chrome 116
- Depuração aprimorada de folhas de estilo ausentes
- Suporte para tempo linear em Elementos > Estilos > Editor de easing
- Suporte para buckets de armazenamento e visualização de metadados
- Lighthouse versão 10.3.0
- Acessibilidade: comandos do teclado e leitura de tela aprimorada
- Destaques diversos
Chrome 115
- 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 de resposta
- Destaques diversos
Chrome 114
- Suporte para depuração do WebAssembly
- Melhorias no comportamento de caminhar em apps Wasm
- Depurar o preenchimento automático usando o painel "Elementos" e a guia "Problemas"
- Declarações no Gravador
- Lighthouse 10.1.1 (link em inglês)
- Melhorias no desempenho
- performance.mark() mostra a marcação de tempo ao passar o cursor em "Performance > Tempos"
- O comandoprofile() preenche Desempenho > Principal
- Aviso sobre interações lentas do usuário
- Atualizações das Métricas da Web
- Descontinuação do JavaScript Profiler: fase 3
- Destaques diversos
Chrome 113
- Substituir cabeçalhos de resposta da rede
- Melhorias na depuração de Nuxt, Vite e Rollup
- Melhorias de CSS em Elementos > Estilos
- Propriedades e valores CSS inválidos
- Links para os frames-chave na propriedade abreviada da animação
- Configuração do novo console: preenchimento automático ao pressionar Enter
- O menu de comando enfatiza arquivos criados
- Descontinuação do JavaScript Profiler: estágio dois
- Destaques diversos
Chrome 112
- Atualizações do Gravador
- Extensões de repetição do Gravador
- Gravar com seletores de pierce
- Exportar gravações como scripts do Puppeteer com a análise do Lighthouse
- Instalar extensões do Gravador
- Elementos > Atualizações de estilo
- Documentação de CSS no painel "Estilos"
- Suporte para aninhamento de CSS
- Marcação de logpoints e pontos de interrupção condicionais no Console
- Ignorar scripts irrelevantes durante a depuração
- Descontinuação do JavaScript Profiler iniciada
- Emular contraste reduzido
- Farol 10
- Destaques diversos
Chrome 111
- Depurar a cor em alta definição com o painel "Estilos"
- UX aprimorada do ponto de interrupção
- Atalhos do Gravador personalizáveis
- Melhor destaque de sintaxe para o Angular
- Reorganizar caches no painel "Aplicativo"
- Destaques diversos
Chrome 110
- Como limpar o Painel de desempenho ao recarregar
- Atualizações do Gravador
- Conferir e destacar o código do fluxo do usuário no Gravador
- Personalizar os tipos de seletor de uma gravação
- Editar o fluxo do usuário durante a gravação
- Impressão automática no local
- Destaque de sintaxe aprimorado e visualização inline para Vue, SCSS e muito mais
- Preenchimento automático ergonômico e consistente no console
- Destaques diversos
Chrome 109
- Gravador: copiar como opções para etapas, repetição na página, menu de contexto da etapa
- Mostrar os nomes reais das funções nas gravações da apresentação
- Novos atalhos do teclado no painel "Console e origens"
- Depuração de JavaScript aprimorada
- Destaques diversos
- [Experimental] UX aprimorada no gerenciamento de pontos de interrupção
- [Experimental] Impressão automática no local
Chrome 108
- Dicas para propriedades CSS inativas
- Detectar automaticamente seletores XPath e de texto no painel Gravador
- Usar expressões separadas por vírgulas
- Melhoria na configuração "Lista de ignorados"
- Destaques diversos
Chrome 107
- Personalizar atalhos de teclado no DevTools
- Alternar temas claros e escuros com o atalho do teclado
- Destacar objetos C/C++ no Memory Inspector
- Suporte a informações completas do iniciador para importação HAR
- Iniciar a pesquisa do DOM depois de pressionar
Enter - Mostrar ícones
starteendpara as propriedades flexbox do CSSalign-content - Destaques diversos
Chrome 106
- Agrupar arquivos por Criado / Implantado no painel Origens
- Stack traces vinculados para operações assíncronas
- Ignorar automaticamente scripts de terceiros conhecidos
- Pilha de chamadas aprimorada durante a depuração
- Como ocultar fontes da lista de ignorados no painel Fontes
- Como ocultar arquivos da lista de ignorados no menu de comando
- Nova faixa de interações no painel de desempenho
- Detalhamento de tempos de LCP no painel de insights de desempenho
- Gerar automaticamente o nome padrão das gravações no painel do Gravador
- Destaques diversos
Chrome 105
- Repetir passo a passo no Gravador
- Suporte para evento de passagem de mouse no painel do Gravador
- Maior exibição de conteúdo (LCP) no painel de insights de desempenho
- Identificar trechos de texto (FOIT, FOUT) como possíveis causas de mudanças de layout
- Manipuladores de protocolo no painel "Manifesto"
- Selo de camada superior no painel Elementos
- Anexar informações de depuração do Wasm durante a execução
- Suporte à edição em tempo real durante a depuração
- Conferir e editar as regras do @scope no painel "Styles"
- Melhorias no mapa de origem
- Destaques diversos
Chrome 104
- Reiniciar o frame durante a depuração
- Opções de repetição lenta no painel do Gravador
- Criar uma extensão para o painel do Gravador
- Agrupar arquivos por Criado / Implantado no painel Origens
- Novo acompanhamento de velocidade do usuário no painel de insights de desempenho
- Revelar o espaço atribuído de um elemento
- Simular a simultaneidade de hardware para as gravações de performance
- Visualizar um valor sem cor ao preencher automaticamente as variáveis CSS
- Identificar frames de bloqueio no painel de cache de avanço e retorno
- Sugestões aprimoradas de preenchimento automático para objetos JavaScript
- Melhorias nos mapas de origem
- Destaques diversos
Chrome 103
- Capturar eventos de clique duplo e de clique com o botão direito do mouse no painel Gravador
- Novo modo de período e de resumo no painel do Lighthouse
- Controle de zoom melhorado no painel "Insights de desempenho"
- Confirmar a exclusão de uma gravação de performance
- Reordenar painéis no painel Elementos
- Escolher uma cor fora do navegador
- Melhor visualização do valor inline durante a depuração
- Suporte a blobs grandes para autenticadores virtuais
- Novos atalhos do teclado no painel Origens
- Melhorias nos mapas de origem
Chrome 102
- Recurso de pré-lançamento: novo painel de insights de desempenho
- Novos atalhos para emular temas claros e escuros
- Segurança aprimorada na guia "Visualização da rede"
- Melhoria no recarregamento no ponto de interrupção
- Atualizações do console
- Cancelar o registro do fluxo do usuário no início
- Exibir pseudoelementos de destaque herdados no painel "Estilos"
- Destaques diversos
- [Experimental] Copiar mudanças de CSS
- [Experimental] Escolher cores fora do navegador
Introdução ao Chrome
- Importar e exportar fluxos de usuários registrados como um arquivo JSON
- Conferir camadas em cascata no painel "Styles"
- Suporte para a função de cor
hwb() - Melhoria na exibição de propriedades particulares
- Destaques diversos
- [Experimental] Novo modo de resumo e período no painel do Lighthouse
Chrome 100
- Conferir e editar @supports em regras no painel "Estilos"
- Suporte para seletores comuns por padrão
- Personalizar o seletor da gravação
- Renomear uma gravação
- Visualizar propriedades da classe/função ao passar o cursor
- Frames parcialmente apresentados no painel "Desempenho"
- Destaques diversos
Chrome 99
- Como limitar solicitações do WebSocket
- Novo painel da API Reporting no painel "Aplicativo"
- Suporte à espera até que o elemento esteja visível/clicável no painel Gravador
- Console com estilo, formatação e filtragem aprimorados
- Depurar a extensão do Chrome com arquivos de mapa de origem
- Árvore de pastas de origem aprimorada no painel Origens
- Exibir arquivos de origem do worker no painel "Sources"
- Atualizações automáticas do tema escuro do Chrome
- Seletor de cores sensível ao toque e painel de divisão
- Destaques diversos
Chrome 98
- Recurso de pré-lançamento: árvore de acessibilidade de página inteira
- Mudanças mais precisas na guia "Mudanças"
- Definir um tempo limite maior para o registro de fluxo do usuário
- Verificar se as páginas podem ser armazenadas em cache com a guia "Cache de avanço e retorno"
- Novo filtro do painel "Propriedades"
- Emular o recurso de mídia de cores forçadas do CSS
- Mostrar réguas ao passar o cursor
- Suporte a
row-reverseecolumn-reverseno editor Flexbox - Novos atalhos do teclado para reproduzir o XHR e abrir todos os resultados da pesquisa
- Lighthouse 9 no painel do Lighthouse
- Painel "Origens" aprimorado
- Destaques diversos
- [Experimental] Endpoints no painel da API Reporting
Chrome 97
- Recurso de pré-lançamento: novo painel do Gravador
- Atualizar lista de dispositivos no Device Mode
- Preencher automaticamente com "Editar como HTML"
- Experiência aprimorada de depuração de código
- Sincronizar as configurações do DevTools em vários dispositivos
Chrome 96
- Recurso de pré-lançamento: novo painel de visão geral de CSS
- Experiência de cópia e edição do tamanho de CSS restaurada e aprimorada
- Emular o recurso de mídia de preferência de contraste do CSS
- Emular o recurso de tema escuro automático do Chrome
- Copiar declarações como JavaScript no painel "Estilos"
- Nova guia "Payload" no painel "Network"
- Melhoria na exibição de propriedades no painel "Propriedades"
- Opção para ocultar erros do CORS no console
- Visualização e avaliação adequadas dos objetos
Intlno console - Stack traces assíncronos consistentes
- Manter a barra lateral do console
- Painel de cache do aplicativo descontinuado no painel "Aplicativo"
- [Experimental] Painel da nova API Reporting no painel "Application"
Chrome 95
- Novas ferramentas de criação de tamanho de CSS
- Ocultar problemas na guia "Problemas"
- Melhoria na exibição de propriedades
- Lighthouse 8.4 no painel do Lighthouse
- Classificar snippets no painel Origens
- Novos links para notas da versão traduzidas e informar um bug de tradução
- Melhorias na interface do menu de comando do DevTools
Chrome 94
- Use o DevTools no seu idioma preferido
- Novos dispositivos Nest Hub na lista de dispositivos
- Testes de origem na visualização de detalhes do frame
- Novo selo de consultas de contêineres do CSS
- Nova caixa de seleção para inverter os filtros de rede
- Em breve: descontinuação da barra lateral do console
- Mostrar cabeçalhos
Set-Cookiesbrutos na guia "Problemas" e no painel "Rede" - Acessadores nativos de exibição consistentes como propriedades próprias no console
- Stack traces de erros adequados para scripts inline com #sourceURL.
- Mudar o formato de cor no painel "Calculado"
- Substituir dicas personalizadas por dicas em HTML nativo
- [Experimental] Ocultar problemas na guia "Problemas"
Chrome 93
- Consultas editáveis de contêiner CSS no painel "Estilos"
- Visualização do pacote da Web no painel "Rede"
- Depuração da API Attribution Reporting
- Processamento de strings aprimorado no console
- Depuração de CORS aprimorada
- Lighthouse 8.1 (link em inglês)
- Novo URL de nota no painel "Manifest"
- Seletores de correspondência de CSS fixos
- Respostas JSON de aparência impressionante no painel Network
Chrome 92
- Editor de grade do CSS
- Suporte para declarações de
constno Console - Visualizador de pedidos da origem
- Novo atalho para ver os detalhes do frame
- Suporte aprimorado para depuração de CORS
- Renomear o rótulo XHR como Fetch/XHR
- Filtrar o tipo de recurso Wasm no painel Network
- Dicas de cliente HTTP do user agent para dispositivos na guia "Condições de rede"
- Informar problemas do modo quirks na guia "Problemas".
- Incluir intersecções de computação no painel de desempenho
- Lighthouse 7.5 no painel do Lighthouse
- Suspensão do uso do menu de contexto "Reiniciar frame" na pilha de chamadas
- [Experimental] Monitor de protocolo
- [Experimental] Gravador do Puppeteer
Chrome 91
- Pop-up de informações sobre as Métricas da Web
- Novo inspetor de memória
- Visualizar o efeito de rolagem do CSS
- Novo painel de configurações de selos
- Prévia aprimorada de imagens com informações de proporção
- Novo botão de condições de rede com opções para configurar
Content-Encodings - atalho para visualizar o valor calculado
- Palavra-chave
accent-color(link em inglês) - Categorizar tipos de problemas com cores e ícones
- Excluir tokens de confiança
- Recursos bloqueados na visualização de detalhes do frame
- Filtrar experimentos na configuração "Experimentos"
- Nova coluna
Vary Headerno painel Armazenamento em cache - Suporte 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
- Stack traces de erros adequados para depuração do Wasm.
Chrome 90
- Novas ferramentas de depuração CSS flexbox
- Nova sobreposição de Core Web Vitals
- Contagem de problemas movida para a barra de status do console
- Denunciar problemas na Atividade confiável na Web
- Formatar strings como literais de string JavaScript (válidos) no console
- Novo painel "Tokens de confiança" no painel "Aplicativo"
- Emular o recurso de gama de cores do CSS
- Ferramentas aprimoradas dos Progressive Web Apps
- Nova coluna
Remote Address Spaceno painel Network - Melhorias no desempenho
- Exibir recursos permitidos/proibidos na visualização de detalhes do frame
- Nova coluna
SamePartyno painel "Cookies" - O suporte a
fn.displayNamenão padrão foi descontinuado - Descontinuação de
Don't show Chrome Data Saver warningno menu "Configurações" - [Experimental] Relatório automático de problemas de baixo contraste na guia "Problemas"
- [Experimental] Visualização em árvore de acessibilidade completa no painel "Elementos"
Chrome 89
- Depuração de suporte para violações de Tipos confiáveis
- Fazer uma captura de tela do nó além da janela de visualização
- Nova guia de tokens de confiança para solicitações de rede
- Lighthouse 7 no painel do Lighthouse
- Suporte para forçar o estado
:targetdo CSS - Novo atalho para duplicar o elemento
- Seletores de cores para propriedades CSS personalizadas
- Novos atalhos para copiar propriedades de CSS
- Nova opção para mostrar cookies decodificados pelo URL
- Limpar apenas cookies visíveis
- Nova opção para limpar cookies de terceiros no painel "Armazenamento"
- Editar dicas de cliente HTTP do user agent para dispositivos personalizados
- Manter a configuração "gravar registro de rede"
- Ver as conexões WebTransport no painel "Network"
- "On-line" renomeado para "Sem limitação"
- Novas opções de cópia no Console, no painel Fontes e no painel Estilos
- Novas informações sobre service workers na visualização de detalhes do frame
- Medir as informações da memória na visualização de detalhes do frame
- Enviar feedback pela guia "Problemas"
- Frames descartados no painel "Desempenho"
- Emular telas dobráveis e duplas no Device Mode
- [Experimental] Automatizar testes do navegador com o Puppeteer Recorder
- [Experimental] Editor de fontes no painel "Estilos"
- [Experimental] Ferramentas de depuração de flexbox CSS
- [Experimental] Nova guia "Violações da CSP"
- [Experimental] Novo cálculo de contraste de cores: algoritmo de contraste perceptivo avançado (APCA, na sigla em inglês)
Chrome 88
- Inicialização mais rápida do DevTools
- Novas ferramentas de visualização de ângulo de CSS
- Emular tipos de imagem não compatíveis
- Simular o tamanho da cota de armazenamento no painel "Armazenamento"
- Nova faixa das Métricas da Web no Painel de desempenho
- Relatar erros de CORS no painel Network
- Informações de isolamento de origem cruzada na visualização de detalhes do frame
- Novas informações sobre Web Workers na visualização de detalhes do frame
- Mostrar detalhes do frame de abertura para janelas abertas
- Abrir o painel Network no painel Service Workers
- Copiar valor da propriedade
- Copiar stack trace para o iniciador da rede
- Visualizar o valor da variável Wasm ao passar o mouse
- Avaliar a variável Wasm no console
- Unidades consistentes de medida para tamanhos de arquivo/memória
- Destacar pseudoelementos no painel Elementos
- [Experimental] Ferramentas de depuração do CSS Flexbox
- [Experimental] Personalizar atalhos de teclado de acordes
Chrome 87
- Novas ferramentas de depuração de grade CSS
- Nova guia WebAuthn
- Mover ferramentas entre o painel superior e o inferior
- Novo painel de barra lateral computado no painel "Estilos"
- Como agrupar propriedades CSS no painel Compute
- Lighthouse 6.3 no painel do Lighthouse
- Eventos
performance.mark()na seção "Tempos" - Novos filtros
resource-typeeurlno painel Rede - Atualizações da visualização de detalhes do frame
- Descontinuação de
Settingsno menu "Mais ferramentas" - [Experimental] Verificar e corrigir problemas de contraste de cores no painel "Visão geral do CSS"
- [Experimental] Personalizar atalhos de teclado no DevTools
Chrome 86
- Painel "New Media"
- Faça capturas de tela dos nós usando o menu de contexto do painel "Elementos"
- Atualizações da guia "Problemas"
- Emular fontes locais ausentes
- Emular usuários inativos
- Emular
prefers-reduced-data - Suporte para novos recursos do JavaScript
- Lighthouse 6.2 no painel do Lighthouse
- Descontinuação da listagem "outras origens" no painel Service Workers
- Mostrar o resumo da cobertura dos itens filtrados
- Nova visualização de detalhes do frame no painel "Application"
- Sugestão de cor acessível no painel "Estilos"
- Restabelecer o painel Propriedades no painel Elementos
- Valores do cabeçalho
X-Client-Datalegíveis por humanos no painel Network - Preencher automaticamente fontes personalizadas no painel "Estilos"
- Mostrar o tipo de recurso de forma consistente no painel "Network"
- Limpar botões nos painéis Elementos e Rede
Chrome 85
- Edição de estilo para frameworks CSS-in-JS
- Lighthouse 6 no painel do Lighthouse
- Descontinuação da First Meaningful Paint (FMP)
- Suporte para novos recursos do JavaScript
- Novos avisos de atalho de apps no painel de manifesto
- Eventos
respondWithdo service worker na guia "Timing" - Exibição consistente do painel Computed
- Deslocamentos de bytecode para arquivos WebAssembly
- Copiar e recortar por linha no painel Origens
- Atualizações nas configurações do console
- Atualizações do painel de desempenho
- Novos ícones para pontos de interrupção, pontos de interrupção condicionais e logpoints
Chrome 84
- Corrigir erros do site com a nova guia "Problemas"
- Conferir informações de acessibilidade na dica do modo de inspeção
- Atualizações do painel de desempenho
- Terminologia de promessa mais precisa no Console
- Atualizações do painel Estilos
- Descontinuação do painel Propriedades no painel Elementos
- Suporte a atalhos de apps no painel "Manifest"
Chrome 83
- Emular deficiências visuais
- Emular localidades
- Depuração da política de incorporador entre origens (COEP, na sigla em inglês)
- Novos ícones para pontos de interrupção, pontos de interrupção condicionais e logpoints
- Visualizar solicitações de rede que definem um cookie específico
- Deslize para a esquerda a partir do menu de comando
- A opção "Configurações" no menu principal mudou de lugar
- O painel "Auditorias" agora é o painel do Lighthouse
- Excluir todas as substituições locais em uma pasta
- Atualização da interface de tarefas longas
- Suporte para ícones mascaráveis no painel "Manifest"
Chrome 82
Chrome 81
- Suporte para o Moto G4 no Device Mode
- Atualizações relacionadas a cookies
- Ícones de manifesto de app da Web mais precisos
- Passe o cursor sobre as propriedades
contentdo CSS para ver os valores sem escape - Erros do mapa de origem no console
- Configuração para desativar a rolagem após o fim de um arquivo
Chrome 80
- Suporte para as declarações
leteclassno Console - Depuração WebAssembly aprimorada
- Solicitar cadeias de iniciadores na guia "Iniciador"
- Destaque a solicitação de rede selecionada na Visão geral
- Colunas de URL e caminho no painel "Rede"
- Strings do user agent atualizadas
- Nova interface de configuração do painel de auditorias
- Modos de cobertura de código por função ou por bloco
- A cobertura de código agora precisa ser iniciada pelo recarregamento da página
Chrome 79
- Depurar por que um cookie foi bloqueado
- Ver os valores dos cookies
- Simular diferentes preferências-color-scheme e prefers-reduced-motion.
- Atualizações da cobertura de código
- Depurar por que um recurso de rede foi solicitado
- Os painéis "Console" e "Sources" respeitam as preferências de recuo novamente
- Novos atalhos para a navegação com o cursor
Chrome 78
- Suporte para múltiplos clientes no painel de auditorias
- Depuração do gerenciador de pagamentos
- Lighthouse 5.2 no painel "Auditorias"
- Maior exibição de conteúdo no painel de desempenho
- Registre problemas do DevTools no menu principal
Chrome 77
- Copiar estilos de elementos
- Visualizar mudanças de layout
- Lighthouse 5.1 no painel "Auditorias"
- Sincronização de temas do SO
- Atalho de teclado para abrir o editor de pontos de interrupção
- Fazer uma pré-busca do cache no painel Network
- Propriedades particulares ao visualizar objetos
- Notificações e mensagens push no painel "Aplicativo"
Chrome 76
- Preencher automaticamente com valores CSS
- Uma nova interface para as configurações de rede
- Mensagens do WebSocket em exportações HAR
- Botões de importação e exportação do HAR
- Uso de memória em tempo real
- Números de porta de registro do service worker
- Inspecionar eventos de busca em segundo plano e sincronização em segundo plano
- Puppeteer para Firefox (em inglês)
Chrome 75
- Predefinições significativas ao preencher automaticamente funções CSS
- Limpar dados do site no menu de comando
- Ver todos os bancos de dados do IndexedDB
- Conferir o tamanho descompactado de um recurso ao passar o cursor
- Pontos de interrupção inline no painel "Pontos de interrupção"
- Contagens de recursos do IndexedDB e do Cache
- Configuração para desativar a dica detalhada de inspeção
- Configuração para alternar o recuo da guia no Editor
Chrome 74
- Destaque todos os nós afetados pela propriedade CSS
- Lighthouse v4 no painel "Auditorias"
- Visualizador de mensagens binárias do WebSocket
- Fazer uma captura de tela da área no menu de comando
- Filtros de service worker no painel Network
- Atualizações do painel de desempenho
- Tarefas longas nas gravações do painel de performance
- First paint na seção "Timing"
- Dica bônus: Atalho para visualizar códigos de cores RGB e HSL (vídeo)
Chrome 73
- Logpoints (em inglês)
- Dicas detalhadas no modo de inspeção
- Dados de cobertura do código de exportação
- Navegar no console com um teclado
- Linha da taxa de contraste AAA no seletor de cores
- Salvar substituições de geolocalização personalizadas
- Dobramento de código
- Guia "Frames" renomeada para a guia "Mensagens"
- Dica bônus: filtragem do painel de rede por propriedade (vídeo)
Chrome 72
- Visualizar métricas de desempenho no painel "Desempenho"
- Destacar nós de texto na árvore do DOM
- Copiar o caminho do JS para um nó do DOM
- Atualizações do painel de auditorias, incluindo uma nova auditoria que detecta bibliotecas JS e novas palavras-chave para acessar o painel "Auditorias" no menu de comando.
- Dica bônus: use o Modo dispositivo para inspecionar consultas de mídia (vídeo)
Chrome 71
- Passe o cursor sobre o resultado de uma expressão em tempo real para destacar um nó DOM
- Armazenar nós do DOM como variáveis globais
- Informações sobre iniciadores e prioridades agora nas importações e exportações HAR
- Acessar o menu de comando no menu principal
- Pontos de interrupção do modo picture-in-picture
- Dica bônus: use
monitorEvents()para registrar eventos disparados de um nó no Console (vídeo)
Chrome 70
- Expressões ao vivo no console
- Destacar nós do DOM durante a avaliação antecipada
- Otimizações do painel de desempenho
- Depuração mais confiável
- Ativar a limitação de rede no menu de comando
- Preencher automaticamente pontos de interrupção condicionais
- Interromper nos eventos do AudioContext
- Depurar apps Node.js com ndb
- Dica bônus: avalie as interações reais dos usuários com a API User Timing
Chrome 68
- Avaliação antecipada
- Dicas de argumentos
- Preenchimento automático de função
- Palavras-chave do ES2017
- Lighthouse 3.0 no painel "Auditorias"
- Suporte do BigInt
- Como adicionar caminhos de propriedade ao painel "Watch"
- "Mostrar marcações de tempo" movida para as Configurações
- Dica bônus: métodos de console menos conhecidos (vídeo)
Chrome 67
- Pesquisar em todos os cabeçalhos da rede
- Visualizações do valor das variáveis CSS
- Copiar como busca
- Novas auditorias, opções de configuração para computadores e visualização de traces
- Interromper loops infinitos
- Velocidade do usuário nas guias "Desempenho"
- Instâncias de VM JavaScript listadas claramente no painel "Memória"
- Guia "Rede" renomeada como "Página"
- Atualizações do tema escuro
- Informações de Transparência dos certificados no painel "Segurança"
- Recursos de isolamento de sites no painel "Desempenho"
- Dica bônus: painel Layers + Animations Inspector (vídeo)
Chrome 66
- Blackboxing no painel Network
- Ajuste de zoom automático no Modo dispositivo
- Boa aparência nas guias "Preview" e "Response"
- Visualizar conteúdo HTML na guia "Visualização"
- Suporte a substituições locais para estilos dentro de HTML
- Dica bônus: oculte scripts de framework para tornar os pontos de interrupção do listener de eventos mais úteis
Chrome 65
- Substituições locais
- Novas ferramentas de acessibilidade
- Guia "Mudanças"
- Novas auditorias de SEO e performance
- Várias gravações no painel de desempenho
- Uso de código confiável com workers em código assíncrono
- Dica bônus: Automatize as ações do DevTools com o Puppeteer (vídeo)
Chrome 64
- Monitor de desempenho
- Barra lateral do console
- Agrupar mensagens semelhantes do Console
- Dica bônus: alternar a pseudoclasse ao passar o cursor (vídeo)
Chrome 63
- Suporte à depuração remota de vários clientes
- Workspaces 2.0
- 4 novas auditorias
- Simular notificações push com dados personalizados
- Acionar eventos de sincronização em segundo plano com tags personalizadas
- Dica bônus: pontos de interrupção de listener de eventos (vídeo)
Chrome 62
- Uma espera de alto nível no console
- Novos fluxos de trabalho de capturas de tela
- Destaque em grade CSS
- Uma nova API Console para consultar objetos
- Novos filtros do console
- Importações HAR no painel Network
- Recursos de cache visualizáveis
- Depuração de cache mais previsível
- Cobertura de código no nível de bloqueio
Chrome 61
- Simulação de limitação de dispositivos móveis
- Consultar o uso do armazenamento
- Ver quando um service worker armazena respostas em cache
- Ativar o medidor de QPS no menu de comando
- Definir o comportamento da roda do mouse para aplicar zoom ou rolar
- Suporte para depuração de módulos ES6
Chrome 60
- Novo painel de auditorias
- Selos de terceiros
- Um novo gesto para "Continuar até aqui"
- Entrar no modo assíncrono
- Visualizações de objetos mais informativas no console
- Seleção de contexto mais informativa no console
- Atualizações em tempo real na guia "Cobertura"
- Opções de limitação de rede mais simples
- Pilhas assíncronas ativadas por padrão