Novidades do DevTools (Chrome 61)

Kayce Basques

Os novos recursos e as principais mudanças que serão lançados no Chrome 61 incluem:

• Simulação de limitação de dispositivos móveis. Defina a limitação de CPU e de rede simultaneamente para simular dispositivos móveis de baixo ou médio custo.
• Uso do armazenamento. Confira quanto armazenamento uma origem está usando, dividido por tecnologia (IndexedDB, cache, local, sessão etc.).
• Carimbos de data/hora do cache. Mostra quando um service worker armazenou em cache uma resposta.
• Ative o medidor de QPS no Command Menu.
• Mude o comportamento da roda do mouse e do trackpad no painel "Performance".
• Depure módulos ES6 de forma nativa.

Confira a versão em vídeo destas notas da versão abaixo ou continue lendo para saber mais.

Simular dispositivos móveis de nível médio e baixo no Modo dispositivo

O menu Limitação do modo de dispositivo agora é mostrado por padrão e permite simular um dispositivo móvel de nível básico ou intermediário com apenas alguns cliques.

Figura 1. O menu de limitação

Figura 2. Passe o cursor sobre o menu Limitação ou abra o menu Configurações de captura para conferir as definições de Dispositivo móvel intermediário e Dispositivo móvel de baixo custo.

Ver o uso do armazenamento

A nova seção Uso na guia Limpar armazenamento do painel Aplicativo mostra quanto armazenamento uma origem está usando, bem como a cota máxima para a origem neste dispositivo.

Figura 3. A seção Uso mostra que https://airhorner.com está usando 66,9 KB da cota de 15.214 MB da origem.

Ver quando um service worker armazenou respostas em cache

A nova coluna Tempo em cache na guia Armazenamento em cache mostra quando um service worker armazenou respostas em cache.

Figura 4. A coluna Tempo em cache

Ativar o medidor de QPS no menu de comandos

Agora é possível ativar o Medidor de QPS no Menu de comandos.

Figura 5. Como ativar o Medidor de QPS no Menu de comandos

Definir o comportamento da roda do mouse para zoom ou rolagem com gravações de performance

Abra Configurações e defina a nova configuração Ação da roda do mouse do gráfico de chamas para mudar o comportamento das rodas do mouse no painel Performance.

Por exemplo, quando você usa uma roda do mouse na seção Principal de uma gravação ou desliza com dois dedos em um trackpad, o comportamento padrão é aumentar ou diminuir o zoom. Quando você muda a configuração para Rolar, esse gesto rola para cima ou para baixo.

Figura 6. A configuração Ação da roda do mouse no Flame Chart

Compatibilidade com depuração para módulos ES6

Os módulos ES6 são enviados nativamente no Chrome 61. Não há muito acontecendo aqui em relação ao DevTools, além de que a depuração funciona como esperado. Tente definir alguns pontos de interrupção e percorrer a implementação de módulo ES6 de Paul Irish do TodoMVC para conferir.

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 aos 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 O que há de novo no DevTools.