Novidades do DevTools (Chrome 76)

Kayce Basques

Olá! Confira as novidades do Chrome DevTools no Chrome 76.

Preenchimento automático com valores CSS

Ao adicionar declarações de estilo a um nó do DOM, às vezes o valor da declaração é mais fácil de lembrar do que o nome dela. Por exemplo, ao colocar um nó <p> em negrito, o valor bold pode ser mais fácil de lembrar do que o nome font-weight. A interface de preenchimento automático do painel "Estilo" agora é compatível com valores de CSS. Se você se lembrar do valor da palavra-chave que quer, mas não do nome da propriedade, digite o valor. O preenchimento automático vai ajudar você a encontrar o nome que procura.

Figura 1. Depois de digitar bold, o painel "Estilos" vai completar automaticamente com font-weight: bold.

Envie feedback sobre esse novo recurso para o problema do Chromium nº 931145.

Nova interface para configurações de rede

Antes, o painel "Rede" tinha um problema de usabilidade em que opções como o menu de limitação eram inacessíveis quando a janela do DevTools estava estreita. Para corrigir esse problema e organizar o painel "Rede", algumas opções menos usadas foram movidas para trás do novo painel Configurações de rede .

Figura 2. Configurações de rede.

As seguintes opções foram movidas para Configurações de rede: Usar linhas de solicitação grandes, Agrupar por frame, Mostrar visão geral e Capturar capturas de tela. A Figura 3 mapeia os locais antigos para os novos.

Figura 3. Mapear os locais antigos para os novos.

Envie feedback sobre essa mudança na interface para o problema 892969 do Chromium.

Mensagens WebSocket em exportações HAR

Ao exportar um arquivo HAR do painel "Rede" para compartilhar registros de rede com seus colegas, o arquivo HAR agora inclui mensagens WebSocket. A propriedade _webSocketMessages começa com um sublinhado para indicar que é um campo personalizado.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Envie feedback sobre esse novo recurso para o problema #496006 do Chromium.

Botões de importação e exportação de HAR

Compartilhe registros de rede com colegas mais facilmente usando os novos botões Exportar tudo como HAR com conteúdo e Importar arquivo HAR . A importação e exportação de HAR já existem no DevTools há algum tempo. Os botões mais fáceis de encontrar são a nova mudança.

Figura 4. Os novos botões HAR.

Envie feedback sobre essa mudança na interface para Problema do Chromium nº 904585.

Uso total da memória em tempo real

O painel "Memória" agora mostra o uso total da memória em tempo real.

Figura 5. A parte de baixo do painel "Memória" mostra que a página está usando 43,4 MB de memória no total. 209 KB/s indica que o uso total da memória está aumentando 209 KB por segundo.

Consulte também o Monitor de desempenho para rastrear o uso da memória em tempo real.

Envie feedback sobre esse novo recurso para o problema 958177 do Chromium.

Números de porta de registro do service worker

O painel Service Workers agora inclui números de porta nos títulos para facilitar o acompanhamento do service worker que você está depurando.

Figura 6. Portas do service worker.

Envie feedback sobre essa mudança na interface para Chromium issue #601286.

Inspecionar eventos de busca e sincronização em segundo plano

Use a nova seção Serviços em segundo plano do painel Aplicativo para monitorar eventos de busca em segundo plano e sincronização em segundo plano. Como os eventos de busca e sincronização em segundo plano ocorrem em segundo plano, não seria muito útil se o DevTools registrasse apenas esses eventos enquanto estivesse aberto. Assim, depois que você começar a gravar, os eventos de busca e sincronização em segundo plano vão continuar sendo registrados, mesmo depois que você fechar a guia e o Chrome.

Acesse o painel Application, abra a guia Background Fetch ou Background Sync e clique em Record para começar a registrar eventos. Clique em um evento para ver mais informações sobre ele.

Figura 7. O painel "Busca em segundo plano". Demonstração de Maxim Salnikov.

Figura 8. O painel "Sincronização em segundo plano".

Envie feedback sobre esses novos recursos para o problema do Chromium nº 927726.

Puppeteer para Firefox

O Puppeteer para Firefox é um novo projeto experimental que permite automatizar o Firefox com a API Puppeteer. Em outras palavras, agora é possível automatizar o Firefox e o Chromium com a mesma API Node, conforme demonstrado no vídeo abaixo.

Depois de executar node example.js, o Firefox será aberto e o texto page será inserido na caixa de pesquisa no site de documentação do Puppeteer. Em seguida, a mesma tarefa é repetida no Chromium.

Confira a palestra sobre o Puppeteer de Joel e Andrey no Google I/O 2019 para saber mais sobre o Puppeteer e o Puppeteer para Firefox. O anúncio do Firefox acontece por volta das 4h05.

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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