Novidades do DevTools (Chrome 61)

Kayce Basques
Kayce Basques
X GitHub Falha

Os novos recursos e as principais mudanças que chegam ao Chrome DevTools no Chrome 61 incluem:

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

Simular dispositivos móveis de baixo e médio nível no Device Mode

O menu Throttling do Device Mode agora é exposto por padrão e permite simular um dispositivo móvel de baixo ou médio nível com alguns cliques.

Menu de limitação

Figura 1. O menu de limitação

Definições do menu de limitação

Figura 2. Passe o cursor sobre o menu Throttling ou abra o menu Capture Settings para ver as definições de Mid-tier mobile e Low-end mobile.

Conferir o uso de armazenamento

A nova seção Usage na guia Clear Storage do painel Application mostra quanto armazenamento uma origem está usando, bem como a cota máxima para a origem nesse dispositivo.

Seção "Usage"

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

Conferir quando um service worker armazenou respostas em cache

A nova coluna Tempo em cache na guia Cache storage mostra quando um service worker armazena respostas em cache.

Coluna "Horário do armazenamento em cache"

Figura 4. A coluna Tempo em cache

Ativar o medidor de QPS no Command Menu

Agora é possível ativar o medidor de QPS no menu de comando.

Como ativar o medidor de QPS no Command Menu

Figura 5. Como ativar o contador de QPS no Command Menu

Definir o comportamento da roda do mouse para aplicar zoom ou rolar com gravações de desempenho

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

Por exemplo, quando você usa uma roda de rolagem do mouse na seção Main 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 Scroll, esse gesto agora rola para cima ou para baixo.

A configuração "Ação da roda do mouse no Flame Chart"

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

Suporte à depuração para módulos ES6

Os módulos ES6 são enviados de forma nativa no Chrome 61. Não há muito o que fazer aqui em relação às Ferramentas do desenvolvedor, exceto que a depuração funciona como você espera. Tente definir alguns pontos de interrupção e acessar a implementação de módulo ES6 de Paul Irish do TodoMVC para conferir por conta própria.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.