Novidades do DevTools (Chrome 61)

Kayce Basques
Kayce Basques
X GitHub Falha

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

.

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.

O menu de limitação

Figura 1. Menu de limitação

Definições do 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.

Seção "Uso"

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.

A coluna "Tempo em cache"

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.

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

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

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