Novidades do DevTools (Chrome 107)

Jecelyn Yeen

Personalizar atalhos de teclado no DevTools

Agora é possível personalizar atalhos de teclado para seus comandos favoritos no DevTools.

Acesse Configurações > Atalhos, passe o cursor sobre um comando e clique no botão Editar (ícone de caneta) para personalizar o atalho do teclado. Também é possível criar acordes (também conhecidos como atalhos de pressionamento de várias teclas).

Personalize atalhos de teclado no DevTools.

Problemas do Chromium: 1335274, 174309

Alternar temas claros e escuros com o atalho do teclado

Configure um atalho de teclado para alternar entre os temas claros e escuros de forma conveniente. Por padrão, a ação não é mapeada para nenhum atalho de teclado.

Alterne entre temas claros e escuros com o atalho de teclado.

Problemas do Chromium: 1280398, 1226363

Destacar 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 na memória do WebAssembly era um ponto problemático. Você precisa saber o tamanho do objeto e contar os bytes desde o início.

Com esse recurso, ele ajuda a diferenciá-los da memória ao redor. Consulte Como estender o Inspetor de memória para depuração de C/C++ (link em inglês) para saber mais sobre as mudanças.

Destaque objetos C/C++ no Inspetor de memória.

Problema do Chromium: 1336568

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

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

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

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

Problema do Chromium: 1343185

Iniciar a pesquisa do 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 Command + F. À medida que você digita uma consulta na caixa de texto de pesquisa, a árvore do DOM pula para o primeiro elemento correspondente e o destaca por padrão.

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

pesquisa do DOM.

Acesse Configurações > Preferências, desative Pesquisar enquanto você digita. Com essa mudança, a pesquisa só vai começar depois que você pressionar Enter.

Configuração "Pesquisar enquanto você digita".

Problema do Chromium: 1344526

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

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

Propriedades flexbox do align-content.

Problema do Chromium: 1139945

Destaques diversos

  • Exibir o número correto de mensagens na barra lateral do Console. Antes, as contagens não eram atualizadas ao limpar as mensagens do console. (1343311).

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é-lançamento 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.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no 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.