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 CSS. Se você se lembra do valor da palavra-chave que quer, mas não do nome da propriedade, tente digitar o valor. O preenchimento automático vai ajudar a encontrar o nome que você está procurando.

Figura 1. Depois de digitar bold, o painel "Estilos" preenche automaticamente para font-weight: bold.

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

Uma nova interface para as configurações de rede

O painel Network tinha um problema de usabilidade em que opções como o menu de limitação ficavam inacessíveis quando a janela do DevTools era estreita. Para corrigir esse problema e organizar o painel Network, algumas opções menos usadas foram movidas para o 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, Fazer 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 nº 892969 do Chromium.

Mensagens do WebSocket em exportações de HAR

Ao exportar um arquivo HAR do painel Network para compartilhar registros de rede com seus colegas, o arquivo HAR agora inclui mensagens do 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 nº 496006 do Chromium.

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

Compartilhe registros de rede com colegas de forma mais fácil 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. A novidade são os botões mais fáceis de encontrar.

Figura 4. Os novos botões HAR.

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

Uso total da memória em tempo real

O painel "Memória" agora mostra o uso da memória total 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 em 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 nº 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 o problema nº 601286 do Chromium.

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, quando você começa a gravar, os eventos de busca em segundo plano e 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 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, como 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.

Baixar os 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, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes dos 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 outro assunto relacionado ao DevTools.

• Envie feedback e solicitações de recursos em crbug.com.
• Informe um problema do DevTools usando more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nas Dicas do DevTools.

Novidades no DevTools

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