Novidades do DevTools (Chrome 63)

Kayce Basques
Kayce Basques
X GitHub Falha

Olá! Os novos recursos do DevTools no Chrome 63 incluem:

Continue lendo ou assista ao vídeo abaixo para saber mais!

Suporte à depuração remota de múltiplos 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 sua 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 múltiplos clientes foi o primeiro problema do DevTools mais comum em crbug.com e o terceiro em todo o projeto do Chromium. O suporte a múltiplos 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.
  • Agora, dois clientes de protocolo WebSocket separados, como o Puppeteer ou o chrome-remote-interface, 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 do Chrome diferentes agora 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. Esse recurso permite usar o DevTools como ambiente de desenvolvimento integrado. Algumas mudanças no código-fonte são feitas no DevTools, e elas persistem na versão local do projeto no sistema de arquivos.

O Workspace 2.0 é baseado na versão 1.0, acrescentando uma UX mais útil e melhorando o mapeamento automático do código transpilado. A programação inicial desse recurso foi programada para ser lançada logo após a Conferência de Desenvolvedores do Chrome (CDS) 2016, mas a equipe o adiou para resolver alguns problemas.

Confira a parte "Criação" (por volta das 14:28) da palestra sobre 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:

  • Disponibilize 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 para melhorar a qualidade das páginas.

Acesse 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, com uma limitação: não era possível enviar dados personalizados. Mas com a nova caixa de texto Push chegando ao painel Service Worker no Chrome 63, agora isso é possível. Experimente agora:

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

  6. Escreva algo na caixa de texto Enviar.

    Simular uma notificação push com dados personalizados.

    Figura 1. Simular uma notificação push com dados personalizados por meio da 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

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. Insira uma mensagem 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 Sync, o DevTools envia um evento de sincronização em segundo plano com a tag personalizada update-content ao 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

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

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59