Novidades do DevTools (Chrome 60)

Olá! Os novos recursos e as principais mudanças que vão acontecer no DevTools no Chrome 60 incluem:

• Um novo painel de auditorias, incluindo testes de Progressive Web App, desempenho, acessibilidade e e práticas recomendadas.
• Selos de terceiros. Descubra quais terceiros estão fazendo solicitações de rede, registrando no console do Cloud e a execução de JavaScript.
• Continue até aqui. Um novo gesto que pode acelerar o fluxo de trabalho de depuração do 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 de auditorias agora usa a tecnologia do Lighthouse. O Lighthouse oferece um conjunto completo de testes para avaliar a qualidade das suas páginas da Web.

As pontuações na parte de cima de Progressive Web App, Desempenho, Acessibilidade e Práticas recomendadas são as pontuações agregadas de cada uma dessas métricas. 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 e executa os testes na página e, em seguida, exibe os resultados no painel Auditorias.

Farol no Google I/O 2017

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

Contribua com o Lighthouse

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

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

Selos de terceiros

Use selos de terceiros para obter mais informações 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. Passe o cursor sobre um selo de terceiros no console.

Para ativar selos de terceiros, faça o seguinte:

1. Abra o Menu de comando.
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 performance. registrar atividades de entidades de terceiros que causaram as atividades. Consulte Primeiros passos no Como analisar o desempenho do ambiente de execução para saber como analisar o desempenho com o DevTools.

Figura 4. Agrupamento por produto na guia Bottom-Up

Um novo gesto para "Continuar até aqui"

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

Ao percorrer um código, mantenha pressionados os botões Command (Mac) ou Control (Windows e Linux) e e clique para acessar essa linha de código. O DevTools destaca os destinos puláveis 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.

Comece a usar o modo assíncrono

Um grande tema para a equipe do DevTools em um futuro próximo é tornar a depuração de código assíncrono previsíveis e fornecer um histórico completo de execução assíncrona.

O novo gesto para "Continuar até aqui" também funciona com código assíncrono. Ao segurar Command (Mac) ou Control (Windows e Linux), o DevTools destaca os puláveis os destinos assíncronos em verde.

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

Mudanças

Visualizações de objetos mais informativas no console

Antes, quando você registrava ou avaliava um objeto no Console, ele só exibia 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 era usado para visualizar objetos

Figura 7. Como o console agora visualiza objetos

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

O menu de seleção de contexto do console agora fornece 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 do 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 mostrava apenas "Gravando...", sem visibilidade do código que estava sendo usado. Agora, a guia Cobertura mostra informações em tempo real e 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 de limitação de rede mais simples

Os menus de limitação de rede nos painéis Rede e Desempenho foram simplificados para inclua apenas três opções: Off-line, 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. Não do DevTools mais mostra as métricas de latência, download e upload ao lado de cada opção, porque esses valores eram enganosas. O objetivo é corresponder à experiência real de cada opção.

Pilhas assíncronas ativadas por padrão

A caixa de seleção Assíncrona foi removida do painel Origens. Os stack traces assíncronos agora são ativados por padrão. Antes, essa opção era ativada por causa da sobrecarga no desempenho. A sobrecarga agora é mínimo o suficiente para ativar o recurso por padrão. Se você preferir desativar os stack traces assíncronos, poderá desativá-las nas Configurações ou executando Do not capture async stack traces no menu de comando.

DevTools no Google I/O 2017

Confira a palestra do mítico Paul Ireland abaixo para saber mais sobre o que a equipe do DevTools tem que trabalham no último ano e os grandes temas que estão abordando em um futuro próximo.

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.