Novidades do DevTools (Chrome 60)

Olá! Os novos recursos e as principais mudanças que serão lançados no DevTools do Chrome 60 incluem:

• Um novo painel "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, registrando no Console e executando JavaScript.
• Continuar até aqui. Um novo gesto que pode acelerar seu fluxo de trabalho de depuração em 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 mais simples de otimização de rede.
• Stack traces assíncronos ativados por padrão.

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

Novos recursos

Novo painel "Auditorias" com tecnologia do Lighthouse

Agora o painel "Auditorias" usa a tecnologia do 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 suas pontuações agregadas para cada uma dessas categorias. O restante do relatório é um detalhamento de cada um dos testes que determinaram suas pontuações. Melhore a qualidade da sua página da Web corrigindo os testes com falha.

Figura 1. Um relatório do Lighthouse

Para auditar uma página:

1. Clique na guia Auditorias.
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 mostra os resultados no painel Auditorias.

Lighthouse no Google I/O '17

Confira a palestra do DevTools no Google I/O de 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 com ele, confira a palestra do Lighthouse no Google I/O '17 abaixo.

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

Selos de terceiros

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

Figura 2. Passar o cursor sobre um selo de terceiros no painel "Rede"

Figura 3. Passar o cursor sobre um selo de terceiros no console

Para ativar selos de terceiros:

1. Abra o Command Menu (link em inglês).
2. Execute o comando Show third party badges.

Use a opção Agrupar por produto nas guias Árvore de chamadas e De baixo para cima para agrupar a atividade de gravação de performance pelas entidades terceirizadas que causaram as atividades. Consulte Introdução à análise de desempenho de execução para saber como analisar o desempenho com o DevTools.

Figura 4. Agrupamento por produto na guia De baixo para cima

Um novo gesto para "Continuar daqui"

Suponha que você esteja pausado na linha 25 de um script e queira pular para a linha 50. Antes, 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 lidar com esse fluxo de trabalho.

Ao percorrer o código, mantenha Command (Mac) ou Control (Windows, Linux) pressionado e clique para continuar até essa linha de código. O DevTools destaca os destinos que podem ser acessados com um clique em azul.

Figura 5. Continuar até aqui

Consulte Introdução à depuração de JavaScript para aprender o básico sobre depuração no DevTools.

Entrar no mundo 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 até aqui" também funciona com código assíncrono. Quando você pressiona Command (Mac) ou Control (Windows, Linux), o DevTools destaca em verde os destinos assíncronos que podem ser acessados.

Confira a demonstração abaixo da palestra do DevTools no I/O para ver um exemplo.

Mudanças

Prévia de objetos mais informativa no console

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

Figura 6. Como o console costumava 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 o que 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 o destaca na janela de visualização

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

Ao gravar a cobertura de código no Chrome 59, a guia Cobertura apenas mostrava "Gravando..." sem informar qual código estava sendo usado. Agora, a guia Cobertura mostra em tempo real qual código está sendo usado.

Figura 9. Carregar e interagir com uma página usando a antiga guia Cobertura

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

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

Os menus de limitação de rede nos painéis Rede e Performance foram simplificados para incluir apenas três opções: Off-line, 3G lento, comum em lugares como a Índia, e 3G rápido, 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.

Pilha assíncrona ativada por padrão

A caixa de seleção Async foi removida do painel Fontes. Os stack traces assíncronos agora estão ativados por padrão. Antes, essa opção era ativada por padrão devido à sobrecarga de desempenho. O overhead agora é mínimo o suficiente para ativar o recurso por padrão. Se preferir desativar os rastreamentos de pilha assíncronos, faça isso em Configurações ou executando o comando Do not capture async stack traces no Menu de comandos.

DevTools no Google I/O '17

Confira a palestra do mítico Paul Irish abaixo para saber mais sobre o que a equipe do DevTools tem trabalhado no ano passado e os grandes temas que eles vão abordar em breve.

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.