Novidades do DevTools (Chrome 107)

Jecelyn Yeen

Personalizar atalhos de teclado nas Ferramentas do desenvolvedor

Agora você pode personalizar os atalhos do 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. Você também pode criar acordes (também conhecidos como atalhos de várias teclas).

Personalize os atalhos de teclado nas Ferramentas do desenvolvedor.

Problemas do Chromium: 1335274, 174309

Alternar temas claros e escuros com atalho de teclado

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

Alternar temas claros e escuros com atalho de teclado.

Problemas do Chromium: 1280398, 1226363

Destacar objetos C/C++ no Inspetor de memória

O Memory Inspector destaca todos os bytes de um objeto de memória C/C++.

Reconhecer os bytes de um objeto entre a memória do WebAssembly foi um problema. Você precisa saber o tamanho do objeto e contar os bytes a partir do início dele.

Com esse recurso, você pode diferenciá-los da memória ao redor. Consulte Como estender o Memory Inspector para depuração em C/C++ 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 de HAR

As informações completas do Iniciador já estão disponíveis para importação de HAR. Antes, 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 de HAR.

Problema do Chromium: 1343185

Iniciar a pesquisa do DOM após pressionar Enter

Agora é possível desativar a configuração Pesquisar enquanto você digita para sempre iniciar a pesquisa do DOM depois de pressionar Enter.

No painel Elementos, ative a barra de pesquisa com Ctrl ou Command + F. Conforme você digita uma consulta na caixa de texto de pesquisa, a árvore DOM pula para o primeiro elemento correspondente e o destaca por padrão.

Para os usuários, especialmente os testadores que sempre trabalham com consultas de pesquisa longas, esse comportamento nã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 um movimento desnecessário.

Pesquisa de DOM.

Acesse Configurações > Preferências e desative a opção Pesquisar conforme digito. Com essa mudança, a pesquisa só vai começar depois que você pressionar Enter.

Configurações de pesquisa enquanto você digita.

Problema do Chromium: 1344526

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

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

Propriedades de flexbox de align-content.

Problema do Chromium: 1139945

Destaques diversos

  • Mostre a contagem correta de mensagens na barra lateral do Console. Antes, as contagens não eram atualizadas ao limpar mensagens do console. (1343311).

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.