Novidades do DevTools (Chrome 63)

Kayce Basques
Kayce Basques
X GitHub Falha

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

Continue lendo ou assista ao 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 (IDE), como o VS Code ou o WebStorm, provavelmente descobriu que abrir as Ferramentas do desenvolvedor 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 agora 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 número 3 em todo o projeto Chromium. O suporte a vários clientes também oferece várias 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 o VS Code e o Webstorm, e clientes WebSocket, como o Puppeteer, agora podem ser executados ao mesmo tempo que o DevTools.
  • Dois clientes de protocolo WebSocket separados, 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 as DevTools.
  • Várias extensões diferentes do Chrome agora podem usar a API chrome.debugger na mesma guia simultaneamente.

Workspaces 2.0

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

O Workspaces 2.0 é baseado na versão 1.0, adicionando uma UX mais útil e melhorando o mapeamento automático de código transpilado. Esse recurso foi originalmente programado para ser lançado logo após a Chrome Developer Summit (CDS) de 2016, mas a equipe o adiou para resolver alguns problemas.

Confira a parte "Criação" (por volta de 14:28) da palestra sobre o DevTools do CDS 2016 para conferir o Workspaces 2.0 em ação.

Quatro novas auditorias

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

  • Exiba 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 aprender a usar o painel Audits e melhorar a qualidade das suas páginas.

Consulte o Lighthouse para saber mais sobre o projeto que gera o painel Audits.

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 no Chrome 63, agora você pode. Experimente agora:

  1. Acesse Demonstração de push simples.
  2. Clique em Ativar notificações push.
  3. Clique em Permitir quando o Chrome solicitar que você permita as notificações.
  4. Abra o DevTools.
  5. Acesse o painel Service Workers.

  6. Escreva algo na caixa de texto Push.

    Simulação de uma notificação push com dados personalizados.

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

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

    A notificação push simulada

    Figura 2. A notificação push simulada

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

Acionar eventos de sincronização em segundo plano também está no painel Service Workers há algum tempo, mas agora você pode enviar tags personalizadas:

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

Acionar um evento de sincronização em segundo plano personalizado

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

Fazer o download dos canais de visualização

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