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 o VS Code ou o WebStorm, provavelmente descobriu que abrir o DevTools prejudica 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, nenhuma configuração é necessária.

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

  • Clientes de protocolo, como ChromeDriver ou extensões de depuração do Chrome para VS Code e Webstorm, e clientes WebSocket, como 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 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 no DevTools há algum tempo. Esse recurso permite usar o DevTools como o 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 Workspace 2.0 se baseia na versão 1.0, adicionando uma UX mais útil e um mapeamento automático aprimorado do código transcompilado. Esse recurso estava programado para ser lançado logo após a Conferência de Desenvolvedores do Chrome (CDS, na sigla em inglês) de 2016, mas a equipe adiou alguns problemas para resolver alguns problemas.

Confira a parte de "Criação" (por volta de 14:28) da palestra sobre DevTools do CDS 2016 para ver o 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 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: não é possível enviar dados personalizados. No entanto, com a nova caixa de texto Push chegando ao painel Service Worker no Chrome 63, isso já é possível. 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 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

Os eventos de sincronização em segundo plano também estão 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é-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   Mais   > 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

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59