Novidades do DevTools (Chrome 76)

Kayce Basques
Kayce Basques
X GitHub Falha

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

Preenchimento automático com valores CSS

Ao adicionar declarações de estilo a um nó DOM, às vezes o valor da declaração é mais fácil de lembrar do que o nome da declaração. Por exemplo, ao formatar 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 de estilo agora oferece suporte a valores CSS. Se você souber o valor da palavra-chave que quer, mas não o nome da propriedade, tente digitar o valor. O preenchimento automático vai ajudar a encontrar o nome que você está procurando.

Depois de digitar &quot;bold&quot;, o painel Estilos é preenchido automaticamente como &quot;font-weight: bold&quot;.

Figura 1. Depois de digitar bold, o painel de estilos é preenchido automaticamente com font-weight: bold.

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

Uma nova interface para as configurações de rede

O painel de rede tinha um problema de usabilidade em que opções como o menu de limitação não eram acessíveis quando a janela do DevTools era estreita. Para corrigir esse problema e organizar o painel de rede, algumas opções menos usadas foram movidas para o novo painel Botão &quot;Configurações de rede&quot; Configurações de rede.

Configurações de rede

Figura 2. Configurações de rede.

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

Mapear os locais antigos para os novos.

Figura 3. Mapear os locais antigos para os novos.

Envie feedback sobre essa mudança na interface no problema do Chromium #892969.

Mensagens WebSocket nas exportações de HAR

Ao exportar um arquivo HAR do painel de rede para compartilhar registros de rede com seus colegas, seu arquivo HAR agora inclui mensagens WebSocket. A propriedade _webSocketMessages começa com um sublinha 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 do Chromium #496006.

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

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

Os novos botões HAR.

Figura 4. Os novos botões HAR.

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

Uso total da memória em tempo real

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

Uso total da memória em tempo real.

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

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

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

Números de porta de registro de 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.

Portas de service worker.

Figura 6. Portas de service worker.

Envie feedback sobre essa mudança na interface no problema do Chromium 601286.

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

Use a nova seção Background Services do painel Application para monitorar eventos de resposta em segundo plano e de sincronização em segundo plano. Considerando que os eventos de busca em segundo plano e de sincronização em segundo plano ocorrem em segundo plano, não seria muito útil se o DevTools registrasse apenas eventos de busca em segundo plano e de sincronização em segundo plano enquanto o DevTools estivesse aberto. Assim, quando você começa a gravar, os eventos de busca em segundo plano e de sincronização em segundo plano continuam sendo gravados, mesmo depois de fechar a guia e o Chrome.

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

Painel de busca em segundo plano.

Figura 7. Painel de busca em segundo plano. Demonstração de Maxim Salnikov.

Painel &quot;Background Sync&quot;.

Figura 8. Painel "Background Sync".

Envie feedback sobre esses novos recursos para o Problema do Chromium #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 você pode 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 é aberto e o texto page é 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 de 4:05.

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.