O que há de novo no DevTools (Chrome 107)

Published on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

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.

Personalize atalhos de teclado no DevTools

Agora você pode personalizar atalhos de teclado para seus comandos favoritos no DevTools.

Vá para Configurações > Atalhos, passe o cursor sobre um comando e clique no botão Editar (ícone de caneta) para personalizar o atalho de teclado. Você também pode criar chords (também conhecidos como atalhos para pressionar várias teclas).

Personalize atalhos de teclado no DevTools.

Issues no Chromium: 1335274, 174309

Alternar temas claros e escuros com atalho de teclado

Configure um atalho de teclado para alternar temas claros e escuros convenientemente. Por padrão, a ação não mapeia para nenhum atalho de teclado.

Alterne os temas claros e escuros com atalho de teclado.

Issues no Chromium: 1280398, 1226363

Highlight de objetos C/C++ no Inspetor de Memória

O Inspetor de Memória destaca todos os bytes de um objeto de memória C/C++.

Reconhecer os bytes de um objeto entre a memória do WebAssembly era um ponto problemático. Você precisava saber o tamanho do objeto e contar bytes desde o início do objeto.

Com esse recurso, ele ajuda você a diferenciá-los da memória circundante. Consulte Estendendo o Inspetor de Memória para depuração C/C++ para saber mais sobre as alterações.

Highlight de objetos C/C++ no Inspetor de Memória.

Issue no Chromium: 1336568

Suporte a informações completas do Initiator para importação HAR

Informações completas do Initiator estão disponíveis agora para importação HAR. Anteriormente, o painel Rede mostrava apenas informações parciais do iniciador durante a importação.

As informações do initiator ajudam os desenvolvedores a rastrear a origem de uma solicitação de rede e identificar problemas relacionados à rede.

Suporte a informações completas do Initiator para importação HAR.

Issue no Chromium: 1343185

Inicie a pesquisa DOM depois de pressionar Enter

Agora você pode desativar a configuração Pesquisar enquanto digita para sempre iniciar a pesquisa DOM depois de pressionar Enter.

No painel Elementos, alterne a barra de pesquisa com Control ou Comando + F. À medida que você digita uma consulta na caixa de texto de pesquisa, a árvore DOM salta para o primeiro elemento correspondente e o destaca por padrão.

Para usuários, especialmente testadores que sempre trabalham com longas consultas de pesquisa, esse comportamento não é o ideal. A árvore DOM pode pular várias vezes enquanto você digita uma consulta de pesquisa longa (por exemplo, //div[@id="example"]). Esse comportamento cria movimento desnecessário.

Pesquisa no DOM.

Vá para Configurações > Preferências, desative Pesquisar enquanto digita. Com esta mudança, a busca começará somente depois que você pressionar Enter.

Configuração da pesquisa enquanto digita.

Issue no Chromium: 1344526

Exibir ícones start e end para propriedades flexbox CSS align-content

No painel Estilos, edite as propriedades align-content em uma classe CSS com display: flex ou display: inline-flex. O start e o end são exibidos no menu suspenso de preenchimento automático com ícones.

propriedades do flexbox do align-content.

Issue no Chromium: 1139945

Destaques diversos

  • Exiba as contagens de mensagens corretas na barra lateral do Console. Anteriormente, as contagens não eram atualizadas ao limpar as mensagens do console. (1343311)

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   More   > 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 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.