O que há de novo no DevTools (Chrome 98)
Published on • Updated on
Tradução realizada por Alvaro Camillo Neto. Revisão por Lucas Santos
Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.
Prévia de funcionalidade: Árvore de acessibilidade da página
A nova Árvore de acessibilidade da página facilita a obtenção de uma visão geral da árvore de acessibilidade da página e irá ajudar a entender melhor como seu conteúdo da web é exposto à tecnologia assistiva.
No painel Elementos, abra o painel Acessibilidade e marque a caixa de seleção Ativar árvore de acessibilidade da página. Em seguida, recarregue o DevTools e você verá um novo botão de acessibilidade no painel Elementos.
Clique nele para alternar para a visualização Árvore de acessibilidade da página. Você pode expandir os nós ou clicar para ver os detalhes no painel Acessibilidade.
Anteriormente, a árvore de acessibilidade estava disponível no painel Acessibilidade. A visualização era limitada, apenas permitindo explorar um único nó e seus ancestrais.
Nossa equipe ainda está trabalhando ativamente neste recurso de visualização. Queremos seu feedback para mais melhorias!
![Árvore de acessibilidade da página](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/o4BY07JabERFd6OieU8b.png?auto=format)
Issue Relacionada: 887173
Alterações mais precisas na guia Alterações
As alterações de código na guia Alterações são impressas automaticamente.
Anteriormente, era difícil rastrear as mudanças reais do código-fonte minificado porque todo o código era mostrado em uma única linha.
![Guia Alterações](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/aup2bT490dkvuBu3o4DS.png?auto=format)
Issues Relacionadas: 1238818, 1268754 , 1086491
Defina um tempo limite mais longo para a gravação do fluxo do usuário
Agora você pode ajustar as configurações de Tempo limite no Gravador para todas as etapas ou uma etapa específica. Isso é útil especialmente para páginas com solicitações de rede lentas e animações longas.
Por exemplo, foi gravado um fluxo de usuário nesta página de demonstração para carregar e clicar no item do menu. No entanto, o carregamento dos itens do menu é lento (demora 6 segundos). O replay deste fluxo de usuário falhou porque excede 5 segundos (o tempo limite padrão).
Podemos usar as novas configurações de Tempo limite para corrigir isso. Expanda a etapa em que clicamos no item de menu. Edite a etapa Adicione tempo limite e defina-o como 6000 milissegundos (igual a 6s).
Opcionalmente, você pode ajustar o Tempo limite nas Configurações de repetição para todas as etapas. Expanda as Configurações de repetição e edite o valor de Tempo limite.
Issue Relacionada: 1257499
Verifique se suas páginas podem ser armazenadas em cache com a guia Cache Voltar/Avançar
Cache de retorno/avanço (ou bfcache) é uma otimização do navegador que permite a navegação instantânea de retorno e avanço.
A nova guia Cache de retorno/avanço pode ajudar você a testar suas páginas para garantir que elas sejam otimizadas para bfcache e identificar quaisquer problemas que possam estar impedindo que elas sejam qualificadas.
Para testar uma página específica, navegue até ela no Chrome e, em DevTools, vá para Aplicação > Cache de retorno/avanço. Em seguida, clique no botão Testar cache de retorno/avanço e o DevTools tentará navegar para fora e para trás para determinar se a página pode ser restaurada do bfcache.
Como desenvolvedores da web, é fundamental saber como otimizar suas páginas para bfcache em todos os navegadores, pois isso melhorará significativamente a experiência de navegação dos usuários, especialmente aqueles com redes ou dispositivos mais lentos.
![Cache de retorno/avanço](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/4OrWjuRgG1bB0AupcMmS.png?auto=format)
Issue Relacionada: 1110752
Novo filtro do painel Propriedades
Se quiser se concentrar em uma propriedade específica no painel Propriedades, digite o nome ou valor dessa propriedade na nova caixa de texto Filtro.
Por padrão, as propriedades cujo valor é null
ou undefined
não são mostradas. Ative a caixa de seleção Mostrar tudo para visualizar todas as propriedades.
Estas melhorias permitem chegar mais rapidamente às propriedades de que está analisando e, assim, melhorar a sua produtividade!
![Filtro do painel Propriedades](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ewmNloO4ohRxlWRNuEW1.png?auto=format)
Issue Relacionada: 1269674
Emular o recurso de mídia CSS cores forçadas
O recurso de mídia CSS cores forçadas é usado para detectar se o agente do usuário ativou um modo de cores forçadas (por exemplo, modo de alto contraste do Windows) onde impõe uma paleta de cores limitada escolhida pelo usuário na página.
Abra o Menu de comando, execute o comando Mostrar renderização e defina a lista suspensa Emular cores forçadas do recurso de mídia CSS.
![Recurso de mídia de cores forçadas CSS](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/75qGjkzfbXfOEJUhML5i.png?auto=format)
Issue Relacionada: 1130859
Mostrar réguas no comando hover
Agora você pode abrir o Menu de comando e execute o comando Mostrar réguas ao passar o cursor. As réguas de página facilitam a medição da largura e altura de um elemento.
Anteriormente, você só poderia ativar as réguas de página por meio da caixa de seleção Configurações > Mostrar réguas.
![Mostrar réguas no comando hover](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/FLF6RWO2bm5SMksdayLv.png?auto=format)
Issue Relacionada: 1270562
row-reverse
e column-reverse
no editor Flexbox
Suporte O editor Flexbox adicionou dois novos botões para suportar row-reverse
e column-reverse
em flex-direction
.
![Editor Flexbox](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/JHI4frP4MqaydXk19sq2.png?auto=format)
Issue Relacionada: 1263866
Novos atalhos de teclado para reproduzir XHR e expandir todos os resultados da pesquisa
Atalhos de teclado para reproduzir XHR no painel Rede
Selecione uma solicitação de XHR no painel Rede e pressione R no teclado para reproduzir o XHR. Anteriormente, você só podia reproduzir o XHR através do menu de contexto (clique com o botão direito do mouse > Replay XHR)
![Replay XHR](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/M3s35wS3A0OoKMeubzMx.png?auto=format)
Issue Relacionada: 1050021
Keyboard shortcut to expand all search results
Atalho de teclado para expandir todos os resultados da pesquisa
Um novo atalho é adicionado à guia Pesquisar, permitindo expandir e recolher todos os resultados da pesquisa. Anteriormente, você só podia expandir e recolher os resultados da pesquisa clicando em um arquivo por vez.
Abra a guia de pesquisa no menu Esc > 3 pontos > Pesquisar. Insira uma string de pesquisa (por exemplo, função) e pressione Enter para ver a lista de resultados da pesquisa. Analise nos resultados da pesquisa e use o seguinte atalho para expandir/recolher os arquivos de pesquisa:
- Windows / Linux -
Ctrl
+Shift
+{
or}
- MacOS -
Cmd
+Options
+{
or}
Acesse os atalhos de teclado para referência de atalhos de teclado no Chrome DevTools.
Issue Relacionada: 1255073
Lighthouse 9 no painel Lighthouse
O painel Lighthouse agora está executando o Lighthouse 9. O Lighthouse agora listará todos os elementos que compartilham o mesmo id.
ID de elemento não exclusivo é um problema de acessibilidade comum. Por exemplo, o id referenciado em um atributo aria-labelledby
é usado em vários elementos.
Confira O que há de novo no Lighthouse 9.0 para mais detalhes sobre as atualizações.
Issue Relacionada: 772558
Painel de fontes melhorado
Muitas melhorias de estabilidade no painel Sources conforme atualizamos para usar o CodeMirror 6. Aqui estão algumas melhorias notáveis:
- Significativamente mais rápido ao abrir arquivos grandes (por exemplo, WASM, JavaScript)
- Não há mais rolagem aleatória ao percorrer o código
- Sugestões de preenchimento automático aprimoradas para fontes editáveis (por exemplo, snippets, substituição local)
Issue Relacionada: 1241848
Destaques diversos
Estas são algumas correções dignas de nota nesta versão:
- Exibindo corretamente o diagrama em cascata de solicitações de rede. Anteriormente, o estilo estava quebrado. (1275501)
- O destaque do código foi quebrado ao pesquisar em documentos com linhas muito longas no painel Fontes. Agora está corrigido. (1275496)
- Não há mais guia duplicada Carga nas solicitações de rede. (1273972)
- Corrigidos os detalhes de mudanças de layout ausentes na seção Resumo do painel Desempenho. (1259606)
- Suporta caracteres arbitrários (por exemplo,
,
,.
), em consultas de Pesquisa de rede. (1267196)
[Experimental] Endpoints no painel API de relatórios
Para ativar a experiência, marque a caixa de seleção Ativar painel da API de relatórios no painel do aplicativo em Configurações > Experiências.
O painel experimental API de relatórios foi introduzido no Chrome 96 para ajudar você a monitorar os relatórios gerados em sua página e o status deles.
A seção Endpoints já está disponível. Ele fornece uma visão geral de todos os endpoints configurados no cabeçalho Reporting-Endpoints
.
Aprenda a usar a API de relatórios para monitorar violações de segurança, chamadas de API obsoletas e muito mais.
![Painel API de relatórios](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/D1fUz4zuS1xwDbszgft1.png?auto=format)
Issue Relacionada: 1200732
Baixe os canais de prévia
Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!
Entre em contato com a equipe Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.
- Envie uma sugestão ou comentários para nós pelo crbug.com.
- Relate um problema de DevTools usando o More options
> Help > Report a DevTools issues em DevTools.
- Mande um tweet para @ChromeDevTools.
- Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.
Mais recursos do DevTools
Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.
Chrome 112
- Atualizações do Gravador
- Extensões de replay no Gravador
- Gravação com seletores pierce
- Exportar gravações como um script Puppeteer com análise Lighthouse
- Obter extensões
- Elementos > Atualizações de estilos
- Documentação CSS no painel Estilos
- Suporte de aninhamento de CSS
- Destaque de logpoints e breakpoints condicionais no Console
- Ignorar scripts irrelevantes durante a depuração
- Início da descontinuação do JavaScript Profiler
- Emulação de contraste reduzido
- Lighthouse 10
- Outras novidades
Chrome 111
- Debugging de cores HD no painel de Estilos
- Melhorias na UX dos breakpoints
- Atalhos customizáveis no Gravador
- Melhor syntax highlighting para Angular
- Reorganize caches no painel de Aplicação
- Outras novidades
Chrome 110
- Limpeza do painel Performance ao recarregar
- Novidades no Gravador
- Veja e realçe códigos do fluxo do usuário no Gravador
- Customize os tipos de seletores de uma gravação
- Edição de fluxo de usuário durante a gravação
- Auto formatação de código na mesma aba
- Melhor syntax highlight para Vue, SCSS e mais
- Autocomplete ergonômico e consistente no Console
- Outras novidades
Chrome 109
- Gravador: opção "copiar como" para etapas, reprodução na página, no menu de contexto da etapa
- Mostra os nomes das funções reais nas gravações da performance
- Novos atalhos de teclado no painel Console e fontes
- Depuração de JavaScript aprimorada
- Outros destaques
- [Experimental] UX aprimorado no gerenciamento de breakpoints
- [Experimental] Formatação automática (pretty print) no mesmo painel
Chrome 108
- Hints para propriedades CSS inativas
- Detectação automática de XPath e seletores de texto no painel Gravador
- Percorrer expressões separadas por vírgulas
- Configuração de lista de ignorados aprimorada
- Destaques diversos
Chrome 107
- Personalize atalhos de teclado no DevTools
- Alternar temas claros e escuros com atalho de teclado
- Highlight de objetos C/C++ no Inspetor de Memória
- Suporte a informações completas do Initiator para importação HAR
- Inicie a pesquisa DOM depois de pressionar
Enter
- Exibir ícones
start
eend
para propriedades flexbox CSSalign-content
- Destaques diversos
Chrome 106
- Agrupamento de arquivos por Original / Publicado no painel de fontes
- Stack traces completos para operações assíncronas
- Ignore os scripts de terceiros conhecidos automaticamente
- Melhorias no call stack durante o debugging
- Escondendo fontes na lista de ignorados do painel de Fontes
- Escondendo arquivos ignorados no Command Menu
- Nova trilha de interações no painel de performance
- Detalhamento de tempos de LCP no painel de Performance Insights
- Nomes padrão auto-gerados para as gravações do painel do Gravador
- Outras novidades
Chrome 105
- Replay passo a passo no Recorder
- Suporte ao evento do mouse over no painel do Recorder
- Largest Contentful Paint (LCP) no painel de insights de desempenho
- Identificação de flashes de texto (FOIT, FOUT) como possíveis causas-raiz para mudanças de layout
- Handlers de protocolo no painel Manifesto
- Selo da camada superior no painel Elementos
- Anexar informações de depuração do Wasm em tempo de execução
- Suporta edição ao vivo durante a depuração
- Visualize e edite @scope em regras no painel Estilos
- Melhorias no Source map
- Outras mudanças
Chrome 104
- Reinicialização de frame durante o debugging
- Opção de replay lento no painel de gravação
- Construa uma extensão para o painel de gravação
- Agrupar arquivos por Autoral/Publicado no painel Sources
- Nova trilha de Tempos de Usuários no painel de Performance insights
- Revelar o slot atribuído de um elemento
- Simular a concorrência de hardware para gravações de desempenho
- Visualize valores de non-color ao preencher automaticamente as variáveis CSS
- Identifique os quadros de bloqueio no painel de Back/forward cache
- Melhorias nas sugestões de autocomplete para objetos JavaScript
- Melhorias em source maps
- Outras melhorias
Chrome 103
- Gravação de eventos de clique duplo e clique com o botão direito do mouse
- Novo intervalo de tempo e modo de instantâneo no painel Lighthouse
- Controle de zoom aprimorado no painel Performance Insights
- Confirmação para excluir uma gravação de apresentação
- Reordenar painéis no painel Elementos
- Escolhendo uma cor fora do navegador
- Visualização aprimorada do valor inline durante a depuração
- Suporte a blobs grandes para autenticadores virtuais
- Novos atalhos de teclado no painel Sources
- Melhorias nos source maps
Chrome 102
- Prévia de funcionalidade: Novo painel de insights de performance
- Novos atalhos para emular temas claros e escuros
- Melhorias na segurança da aba de Visualização de Rede
- Melhorias no reload em breakpoints
- Atualizações no Console
- Cancelamento de gravações de fluxo de usuário no início
- Veja pseudo-elementos herdados de seleção no painel de Estilos
- Outras novidades
- [Experimental] Copie mudanças de CSS
- [Experimental] Escolhendo cores fora do browser
Chrome 101
- Importe e exporte fluxos de usuário gravados como um arquivo JSON
- Visualize cascade layers no painel Estilos
- Suporte para a função de cor hwb()
- Melhoria na exibição de propriedades privadas
- Destaques diversos
- [Experimental] Novos modos timespan e snapshot no painel Lighthouse
Chrome 100
- Visualize e edite @supports em rules no painel Estilos
- Suporte a seletores comuns por padrão
- Personalize o seletor de gravação
- Renomeação de gravação
- Visualização de propriedades de classe/função ao passar o mouse
- Quadros parcialmente apresentados no painel Desempenho
- Destaques diversos
Chrome 99
- Limitando requests de WebSocket
- Novo painel API de relatórios no painel Aplicativo
- Suporte para esperar até que o elemento esteja visível/clicável no painel Gravação
- Melhor estilização, formatação e filtragem no console
- Debug de extensões do Chrome com arquivos de source map
- Árvore de pastas aprimorada no painel Fontes
- Exibição arquivos fontes de workers no painel Origens
- Atualizações na funcionalidade de tema escuro automático do Chrome
- Seletor de cores amigável ao toque e painel dividido
- Destaques diversos
Chrome 98
- Prévia de funcionalidade: Árvore de acessibilidade da página
- Alterações mais precisas na guia Alterações
- Defina um tempo limite mais longo para a gravação do fluxo do usuário
- Verifique se suas páginas podem ser armazenadas em cache com a guia Cache Voltar/Avançar
- Novo filtro do painel Propriedades
- Emular o recurso de mídia CSS cores forçadas
- Mostrar réguas no comando hover
- Suporte
row-reverse
ecolumn-reverse
no editor Flexbox - Novos atalhos de teclado para reproduzir XHR e expandir todos os resultados da pesquisa
- Lighthouse 9 no painel Lighthouse
- Painel de fontes melhorado
- Destaques diversos
- [Experimental] Endpoints no painel API de relatórios
Chrome 97
- Prévia de funcionalidade: Novo painel de Gravação
- Atualização da lista de dispositivos no modo de Dispositivo
- Preenchimento automático do Editar como HTML
- Melhoria na experiência de Debug
- Sincronizando as configurações do DevTools entre dispositivos
Chrome 96
- Prévia de funcionalidade: novo painel de visão geral CSS
- Experiência de edição e cópia de comprimento de CSS foi restaurada e aprimorada
- Emule o recurso de prefers-contrast para CSS media
- Emule o recurso Auto Dark Theme do Chrome
- Copie as declarações como JavaScript no painel Estilos
- Nova guia Payload no painel Rede
- Melhoria na exibição de propriedades no painel Propriedades
- Opção para ocultar erros CORS no console
- Visualização e avaliação adequadas de objetos
Intl
no Console - Consistência em stack traces assíncronos
- Mantida a barra lateral do console
- Obsolescência do Painel de cache no painel do Aplicativo
- [Experimental] Novo painel da API de relatórios no painel do aplicativo
Chrome 95
- Nova ferramenta de edição de comprimentos CSS
- Ocultar problemas na guia Issues
- Melhorias na exibição de propriedades
- Lighthouse 8.4 no painel Lighthouse
- Ordenação dos snippets no painel Sources
- Novos links para notas de versão traduzidas e relatar um bug de tradução
- Melhoria de UI para o menu de comandos do DevTools
Chrome 94
- Utilize o DevTools em seu idioma preferido
- Novos dispositivos Nest Hub na lista de dispositivos
- Origin trials na visão Frame Detail
- Novo ícone de consultas de contêiner CSS
- Nova caixa de seleção para inverter os filtros de rede
- Depreciação da barra lateral do Console
- Exibição dos cabeçalhos
Set-Cookie
na guia Issues e no painel Network - Exibição consistente dos acessores nativos como propriedades no Console
- Adequação dos stacks traces para scripts inline com #sourceURL
- Alteração do formato da configuração da cor no painel Computed
- Substituição dos tooltips customizados por tooltips nativos do HTML
- Experimental - Ocultar problemas na guia Issues
Chrome 93
- Consultas de contêiner CSS editáveis no painel Styles
- Prévia do web-bundle no painel Network
- Depuração da Attribution Reporting API
- Melhor manejo de string no console
- Depuração CORS aprimorada
- Lighthouse 8.1
- Exibir o novo URL da nota no painel Manifest
- Seletores de correspondência de CSS corrigidos
- Respostas JSON Pretty-printing no painel Network
Updated on • Improve article