Novidades do DevTools (Chrome 63)

Kayce Basques
Kayce Basques
X GitHub Falha

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

Continue lendo 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 VS Code ou WebStorm, provavelmente descobriu que abrir o DevTools prejudica a sessão de depuração. Esse problema também impossibilitou usar o DevTools para depurar testes do WebDriver.

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

A depuração remota de múltiplos clientes foi o principal problema do DevTools em crbug.com, e número 3 em todo o projeto Chromium. O suporte para múltiplos clientes também oportunidades interessantes para integrar outras ferramentas com o DevTools ou usá-las em novos de várias formas. Exemplo:

  • clientes de protocolo, como ChromeDriver ou 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 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 o DevTools.
  • Várias extensões diferentes do Chrome agora podem usar a API chrome.debugger na mesma guia ao mesmo tempo.

Espaços de trabalho 2.0

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

O Workspace 2.0 foi desenvolvido com base na versão 1.0, adicionando uma UX mais útil e um mapeamento automático aprimorado das imagens transcompiladas o código-fonte. Esse recurso foi programado para ser lançado logo após a Conferência de Desenvolvedores do Chrome (CDS) 2016, mas a equipe adiou alguns para resolver alguns problemas.

Confira a seção "Criação" (cerca de 14:28) da palestra sobre DevTools do CDS 2016 para conhecer os Workspaces 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 aprender a usar o painel Auditorias para melhorar o a qualidade das suas páginas.

Acesse Lighthouse para saber mais sobre o projeto que impulsiona o painel Auditorias.

Simular notificações push com dados personalizados

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

  1. Acesse Simple Push Demo.
  2. Clique em Ativar notificações push.
  3. Clique em Permitir quando o Chrome solicitar permissão para as notificações.
  4. Abra o DevTools.
  5. Acesse o painel Service Workers.

  6. Escreva algo na caixa de texto Push.

    Simular uma notificação push com dados personalizados.

    Figura 1. Simular uma notificação push com dados personalizados usando a caixa de texto Push na 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

Eventos de sincronização em segundo plano que acionam eventos de sincronização em segundo plano também aparecem 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 algum texto na caixa de texto Sync.
  4. Clique em Sincronizar.

Como acionar um evento personalizado de sincronização em segundo plano

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

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.