Novidades do DevTools (Chrome 63)

Kayce Basques

Que bom que você voltou! Os novos recursos do DevTools no Chrome 63 incluem:

• Suporte à depuração remota de vários clientes.
• Workspaces 2.0.
• Quatro novas auditorias.
• Simular notificações push com dados personalizados.
• Acionar eventos de sincronização em segundo plano com tags personalizadas.

Leia ou assista o vídeo abaixo para saber mais.

Suporte à depuração remota de vários clientes

Se você já tentou depurar um app em um ambiente de desenvolvimento integrado como o VS Code ou o WebStorm, provavelmente descobriu que abrir o DevTools atrapalha a sessão de depuração. Esse problema também impossibilitou o uso do DevTools para depurar testes do WebDriver.

A partir do Chrome 63, o DevTools oferece suporte a vários clientes de depuração remota por padrão, sem necessidade de configuração.

A depuração remota de vários clientes foi o problema mais popular do DevTools no crbug.com e o terceiro em todo o projeto Chromium. O suporte a vários clientes também abre algumas oportunidades interessantes para integrar outras ferramentas ao DevTools ou usar essas ferramentas de novas maneiras. Exemplo:

• Clientes de protocolo, como o ChromeDriver ou as extensões de depuração do Chrome para VS Code e Webstorm, e clientes WebSocket, como o Puppeteer, agora podem ser executados ao mesmo tempo que o DevTools.
• Dois clientes separados do protocolo WebSocket, como Puppeteer ou chrome-remote-interface, agora podem se conectar à mesma guia simultaneamente.
• As extensões do Chrome que usam a API chrome.debugger agora podem ser executadas ao mesmo tempo que o DevTools.
• Agora, várias extensões diferentes do Chrome podem usar a API chrome.debugger na mesma guia simultaneamente.

Espaços de trabalho 2.0

Os espaços de trabalho já existem há algum tempo no DevTools. Com esse recurso, você pode usar o DevTools como seu ambiente de desenvolvimento integrado. Você faz algumas mudanças no código-fonte no DevTools, e elas persistem na versão local do projeto no sistema de arquivos.

O Workspaces 2.0 é baseado no 1.0, adicionando uma UX mais útil e um mapeamento automático aprimorado de código transpilado. O lançamento desse recurso estava previsto para pouco depois do Chrome Developer Summit (CDS) 2016, mas a equipe adiou para resolver alguns problemas.

Confira a parte "Criação" (por volta de 14:28) da palestra do DevTools no CDS 2016 para ver os espaços de trabalho 2.0 em ação.

Quatro novas auditorias

No Chrome 63, o painel Auditorias tem quatro novas auditorias:

• Veicule imagens como WebP.
• Use imagens com proporções adequadas.
• Evite bibliotecas JavaScript de front-end com vulnerabilidades de segurança conhecidas.
• Erros do navegador registrados no console.

Consulte Executar o Lighthouse no Chrome DevTools para saber como usar o painel Auditorias e melhorar a qualidade das suas páginas.

Consulte Lighthouse para saber mais sobre o projeto que alimenta o painel Auditorias.

Simular notificações push com dados personalizados

A simulação de notificações push já existe há algum tempo no DevTools, mas com uma limitação: não era possível enviar dados personalizados. Mas, com a nova caixa de texto Push no painel Service Worker do Chrome 63, agora é possível. Experimente agora:

1. Acesse Demonstração de envio simples.
2. Clique em Ativar notificações push.
3. Clique em Permitir quando o Chrome pedir para permitir notificações.
4. Abra o DevTools.
5. Acesse o painel Service Workers.

6. Escreva algo na caixa de texto Push.

   

   Figura 1. Simular uma notificação push com dados personalizados usando a caixa de texto Push no painel Service Worker

7. Clique em Enviar para enviar a notificação.

   

   Figura 2. A notificação push simulada

Acionar eventos de sincronização em segundo plano com tags personalizadas

O acionamento de eventos de sincronização em segundo plano também está no painel Service Workers há algum tempo, mas agora é possível enviar tags personalizadas:

1. Abra o DevTools.
2. Acesse o painel Service Workers.
3. Digite um texto na caixa de texto Sincronizar.
4. Clique em Sincronizar.

Figura 3. Depois de clicar em Sincronizar, o DevTools envia um evento de sincronização em segundo plano com a tag personalizada update-content para o service worker.

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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