Novidades do DevTools (Chrome 76)

Kayce Basques
Kayce Basques
X GitHub Falha

Olá! Estas são as novidades do 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 que o nome da declaração. 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 CSS valores. Se você lembra qual valor de palavra-chave quer, mas não consegue se lembrar do nome da propriedade, tente digitar o valor e o recurso de preenchimento automático deve ajudar você a encontrar o nome que está procurando.

Depois de digitar &quot;negrito&quot; o painel Styles é preenchido automaticamente como &quot;font-weight: negrito&quot;.

Figura 1. Depois de digitar bold, o painel Estilos será preenchido automaticamente como font-weight: bold.

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

Nova interface para configurações de rede

Anteriormente, o painel Network tinha um problema de usabilidade em que opções como o menu de limitação eram inacessível quando a janela do DevTools estava estreita. Para corrigir esse problema e organizar o painel Network, Algumas opções menos usadas foram transferidas para as novas Configurações de rede O botão &quot;Configurações de rede&quot; .

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, Capturar capturas de tela. A Figura 3 mapeia os locais antigos para os novos

Mapeie 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 em exportações HAR

Ao exportar um arquivo HAR do painel Network para compartilhar registros de rede com seus colegas, seu arquivo HAR agora inclui mensagens WebSocket. A propriedade _webSocketMessages começa com uma sublinhado para indicar que se trata de 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 seu feedback sobre esse novo recurso para o problema 496006 do Chromium.

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

Use o novo recurso Exportar tudo como HAR com conteúdo para facilitar o compartilhamento de registros de rede com colegas. Exportar e Importar arquivo HAR Importar. Importação e exportação de 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 seu feedback sobre essa mudança na interface para o problema 904585 do Chromium.

Uso total da memória em tempo real

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

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 na 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 de 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 portas nos títulos para facilitar o acompanhamento. de qual service worker você está depurando.

Portas do service worker.

Figura 6. Portas do service worker.

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

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

Use a nova seção Serviços em segundo plano do painel Aplicativo para monitorar Segundo plano Eventos de busca e sincronização em segundo plano. Considerando que os eventos de busca e sincronização em segundo plano ocorresse em segundo plano, não seria muito útil se o DevTools gravasse apenas o segundo plano Eventos de busca e sincronização em segundo plano enquanto o DevTools estava aberto. Assim que começar a gravar, o plano de fundo os eventos de busca e sincronização em segundo plano continuarão a ser registrados, mesmo depois que você fechar a guia; e mesmo após fechar o Chrome.

Acesse o painel Aplicativo, abra a guia Busca em segundo plano ou Sincronização em segundo plano e Clique em Record Gravar para iniciar a geração de registros eventos. Clique em um evento para ver mais informações sobre ele.

O painel Busca em segundo plano.

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

O painel &quot;Sincronização em segundo plano&quot;.

Figura 8. Painel "Sincronização em segundo plano".

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

Puppeteer para Firefox

O Puppeteer para Firefox é um novo projeto experimental que permite automatizar o Firefox com o API Puppeteer. Em outras palavras, agora você pode automatizar o Firefox e o Chromium com a mesma API Node, que demonstradas 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 do Puppeteer de Joel e Andrey no Google I/O 2019 para saber mais sobre Puppeteer e Puppeteer para Firefox. O anúncio do Firefox acontece por volta das 16h05.

Fazer o download dos 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, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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