Novidades do DevTools (Chrome 61)

Kayce Basques

Os novos recursos e as principais mudanças que vão acontecer no DevTools no Chrome 61 incluem:

• Simulação de limitação de dispositivos móveis. Defina a limitação de CPU e rede simultaneamente, para para simular dispositivos móveis intermediários ou básicos.
• Uso do armazenamento. Veja quanto armazenamento uma origem está usando, detalhado por tecnologia (IndexedDB, cache, local, sessão etc.).
• Carimbos de data/hora de cache. Veja quando um service worker armazenou uma resposta em cache.
• Ative o medidor de QPS no menu de comando.
• Mude o comportamento da roda do mouse e do trackpad no painel de desempenho.
• Depurar módulos ES6 nativamente

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

Simule dispositivos móveis básicos e médios no Modo dispositivo

O menu Limitação do Device Mode agora fica exposto por padrão e permite simular um em dispositivos móveis de baixa ou média com alguns cliques.

Figura 1. Menu de limitação

Figura 2. Passe o cursor sobre o menu Limitação ou abra o menu Configurações de captura para ver as Definições para Dispositivos móveis de nível médio e Dispositivos móveis de baixo custo

Ver o uso do armazenamento

A nova seção Uso na guia Limpar armazenamento do painel Aplicativo mostra como 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 do da cota da origem de 15.214 MB

Ver quando um service worker armazena respostas em cache

A nova coluna Tempo em cache na guia Armazenamento em cache mostra quando um service worker foi armazenado em cache de resposta.

Figura 4. A coluna Tempo em cache

Ative o medidor de QPS no menu de comando

Agora você pode ativar o medidor de QPS no menu de comando.

Figura 5. Ative o medidor de QPS no menu de comando.

Defina o comportamento da roda do mouse para aplicar zoom ou rolar a tela com as gravações de performance

Abra as Configurações e defina a nova configuração Ação da roda do mouse em Flame Chart para mudar como as rodas do mouse se comportam no painel Desempenho.

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

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

Suporte à depuração de módulos ES6

Os módulos ES6 são enviados de forma nativa no Chrome 61. Não há muita coisa acontecendo aqui em relação a Fora isso, a depuração do DevTools funciona como esperado. Tente definir alguns pontos de interrupção em e confira ES6-Module-implementation de TodoMVC.

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   > 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.