Esta página foi traduzida pela API Cloud Translation.

Novidades do DevTools (Chrome 76)

Kayce Basques

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 do que o nome da declaração. Por exemplo, ao colocar um nó <p> em negrito, pode ser mais fácil lembrar o valor bold 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 e o preenchimento automático ajudará você a encontrar o nome que está procurando.

Depois de digitar "negrito", o painel Estilos é preenchido automaticamente como "peso da fonte: negrito".

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 não eram acessíveis quando a janela do DevTools estava estreita. Para corrigir esse problema e organizar o painel Network, algumas opções menos usadas foram movidas para trás do novo painel Configurações de rede .

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 colegas, ele 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 seu feedback sobre esse novo recurso para o problema 496006 do Chromium.

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

Compartilhe registros de rede com colegas de trabalho com mais facilidade usando os novos botões Exportar tudo como HAR com conteúdo e Importar arquivo HAR . 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 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 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 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 porta nos títulos para facilitar o controle 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 os eventos de Busca em segundo plano e Sincronização em segundo plano. Como os eventos de busca em segundo plano e sincronização em segundo plano ocorrem em segundo plano, isso não seria muito útil se o DevTools gravasse apenas eventos de busca e sincronização em segundo plano enquanto o DevTools estava 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 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. O painel Busca em segundo plano. Demonstração por Maxim Salnikov.

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

Figura 8. O 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 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 do 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

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-visualização 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.
Para informar um problema do DevTools, use Mais opções > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Visualizar métricas de desempenho no painel "Desempenho"
Destacar nós de texto na árvore do DOM
Copiar o caminho do JS para um nó do DOM
Atualizações do painel de auditorias, incluindo uma nova auditoria que detecta bibliotecas JS e novas palavras-chave para acessar o painel "Auditorias" no menu de comando.
Dica bônus: use o Modo dispositivo para inspecionar consultas de mídia (vídeo)