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 destacar 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 CSS. Se você lembra qual valor de palavra-chave quer, mas não consegue se lembrar do nome da propriedade, tente digitar o valor. O preenchimento automático vai ajudar você a encontrar o nome que 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. Mapeie os locais antigos para os novos.

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

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 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 do Chromium #496006.

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

Compartilhe registros de rede com colegas de trabalho com mais facilidade usando os novos botões Exportar tudo como HAR com conteúdo Exportar e Importar arquivo HAR Importar. os recursos de importação e exportação HAR já existem no DevTools há algum tempo. 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 da 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 seu 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.

Portas do 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 Serviços em segundo plano do painel Aplicativo para monitorar os eventos de Busca em segundo plano e 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 só registrasse eventos de busca em segundo plano e de sincronização em segundo plano enquanto o DevTools estivesse aberto. Assim, quando você começar a gravar, os eventos de busca em segundo plano e sincronização em segundo plano continuarão a ser gravados, mesmo depois que você fechar a guia e mesmo depois de fechar 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 ver mais informações sobre ele.

O painel Busca em segundo plano.

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

Painel &quot;Sincronização em segundo plano&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 das 16h05.

Fazer o download dos canais de visualização

Considere usar o Chrome Canary, Dev ou Beta como seu 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.