Novidades do DevTools (Chrome 60)

Olá! Os novos recursos e as principais mudanças que chegam ao DevTools no Chrome 60 incluem:

• Um novo painel de auditorias, incluindo testes para Progressive Web Apps, desempenho, acessibilidade e práticas recomendadas.
• Selos de terceiros. Descubra quais terceiros estão fazendo solicitações de rede, fazendo login no Console e executando JavaScript.
• Continue para aqui. Um novo gesto que pode acelerar o fluxo de trabalho de depuração de JavaScript.
• Depuração previsível para JavaScript assíncrono.
• Visualizações de objetos no console.
• Atualizações em tempo real na guia "Cobertura".
• Um novo menu para selecionar contextos no console.
• Opções de limitação de rede mais simples.
• Stack traces assíncronos ativados por padrão.

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

Novos recursos

Novo painel de auditorias, com tecnologia do Lighthouse

O painel "Audits" agora é compatível com o Lighthouse. O Lighthouse oferece um conjunto abrangente de testes para medir a qualidade das suas páginas da Web.

As pontuações na parte de cima para App Web Progressivo, Performance, Acessibilidade e Práticas recomendadas são as pontuações agregadas de cada uma dessas categorias. O restante do relatório é um detalhamento de cada um dos testes que determinaram suas pontuações. Corrija os testes com falha para melhorar a qualidade da sua página da Web.

Figura 1. Um relatório do Lighthouse

Para auditar uma página:

1. Clique na guia Auditoria.
2. Clique em Fazer uma auditoria.
3. Clique em Executar auditoria. O Lighthouse configura o DevTools para emular um dispositivo móvel, executa vários testes na página e exibe os resultados no painel Audits.

Lighthouse no Google I/O '17

Confira a palestra sobre o DevTools do Google I/O 2017 abaixo para saber mais sobre a integração do Lighthouse no DevTools.

Contribuir com o Lighthouse

O Lighthouse é um projeto de código aberto. Para saber mais sobre como ele funciona e como contribuir, confira a palestra sobre o Lighthouse no Google I/O 2017 abaixo.

Tem uma ideia para uma auditoria do Lighthouse? Poste aqui!

Selos de terceiros

Use os selos de terceiros para ter mais insights sobre as entidades que estão fazendo solicitações de rede em uma página, fazendo login no console e executando JavaScript.

Figura 2. Como passar o cursor sobre um selo de terceiros no painel "Network"

Figura 3. Como passar o cursor sobre um selo de terceiros no Console

Para ativar os selos de terceiros:

1. Abra o Command Menu.
2. Execute o comando Show third party badges.

Use a opção Agrupar por produto nas guias Call Tree e Bottom-Up para agrupar a atividade de gravação de performance pelas entidades de terceiros que causaram as atividades. Consulte Começar a analisar o desempenho de execução para saber como analisar o desempenho com o DevTools.

Figura 4. Agrupar por produto na guia Bottom-Up

Um novo gesto para "Continuar para aqui"

Digamos que você esteja pausado na linha 25 de um script e queira pular para a linha 50. No passado, era possível definir um ponto de interrupção na linha 50 ou clicar com o botão direito do mouse na linha e selecionar Continuar até aqui. Mas agora, há um gesto mais rápido para processar esse fluxo de trabalho.

Ao executar o código, pressione Command (Mac) ou Control (Windows, Linux) e clique para continuar nessa linha de código. O DevTools destaca os destinos de salto em azul.

Figura 5. Continuar até aqui

Consulte Introdução à depuração do JavaScript para aprender os conceitos básicos da depuração no DevTools.

Entrar no modo assíncrono

Um dos principais temas da equipe do DevTools no futuro próximo é tornar a depuração de código assíncrono previsível e fornecer um histórico completo da execução assíncrona.

O novo gesto para continuar aqui também funciona com código assíncrono. Quando você mantém Command (Mac) ou Control (Windows, Linux), o DevTools destaca os destinos assíncronos com salto em verde.

Confira a demonstração abaixo da palestra sobre o DevTools na I/O para conferir um exemplo.

Mudanças

Visualizações de objetos mais informativas no console

Antes, quando você registrava ou avaliava um objeto no console, ele só mostrava Object, o que não é muito útil. Agora, o console oferece mais informações sobre o conteúdo do objeto.

Figura 6. Como o Console usava para visualizar objetos

Figura 7. Como o console agora mostra uma prévia dos objetos

Menu de seleção de contexto mais informativo no console

O menu de seleção de contexto do Console agora oferece mais informações sobre os contextos disponíveis.

• O título descreve cada item.
• O subtítulo abaixo do título descreve o domínio de origem do item.
• Passe o cursor sobre um contexto de iframe para destacá-lo na janela de visualização.

Figura 8. Passar o cursor sobre um iframe no novo menu de seleção de contexto destaca-o no viewport.

Atualizações em tempo real na guia "Cobertura"

Ao gravar a cobertura de código no Chrome 59, a guia Cobertura mostrava apenas "Gravação...", sem visibilidade sobre qual código estava sendo usado. Agora, a guia Coverage mostra em tempo real qual código está sendo usado.

Figura 9. Como carregar e interagir com uma página usando a guia Cobertura

Figura 10. Como carregar e interagir com uma página usando a nova guia Cobertura

Opções de limitação de rede mais simples

Os menus de limitação de rede nos painéis Rede e Performance foram simplificados para incluir apenas três opções: Offine, 3G lento, que é comum em lugares como a Índia, e 3G rápido, que é comum em lugares como os Estados Unidos.

Figura 11. As novas opções de limitação de rede

As opções de limitação foram ajustadas para corresponder a outras ferramentas de limitação no nível do kernel. O DevTools não mostra mais as métricas de latência, download e upload ao lado de cada opção, porque esses valores eram enganosos. O objetivo é corresponder à experiência real de cada opção.

Pilhas assíncronas ativadas por padrão

A caixa de seleção Assíncrono foi removida do painel Origens. Os stack traces assíncronos agora estão ativados por padrão. Antes, essa opção era opcional devido à sobrecarga de desempenho. O overhead agora é mínimo o suficiente para ativar o recurso por padrão. Se você preferir desativar os rastros de pilha assíncrona, desative-os nas Configurações ou executando o comando Do not capture async stack traces no Menu de comando.

DevTools no Google I/O '17

Confira a palestra do lendário Paul Irish abaixo para saber mais sobre o que a equipe do DevTools trabalhou no último ano e os principais temas que ela está abordando em um futuro próximo.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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