Notícias do DevTools, sempre atualizadas
O primeiro item de notícias desta postagem é um pouco meta: é esta atualização em si. De vez em quando, mas pelo menos uma vez por mês, vou resumir o que está acontecendo no mundo das Ferramentas do desenvolvedor do Chrome.
E quando digo "novo", é isso mesmo: vou falar sobre os novos recursos que acabaram de chegar no Chrome Canary. Se você preferir ficar na versão estável, tudo bem. Mas se você é aventureiro e quer ficar por dentro de tudo, estas postagens são para você. Além dos recursos e correções de bugs mais recentes, você vai encontrar uma seção Community Heartbeat no final de cada postagem, destacando as melhores contribuições que você, nosso usuário querido, fez.
Sem mais delongas, vamos falar sobre as notícias.
Novidades no DevTools
Capturas de tela semelhantes a tiras de filme na rede e na linha do tempo
Há apenas uma semana, lançamos um novo recurso importante: a capacidade de capturar capturas de tela da página na guia "Rede" e "Linha do tempo".
No painel de rede, clique no ícone de câmera para ativar a captura de frames e recarregue a página para acionar a captura. Além das capturas de tela feitas com outras ferramentas, como o WebPageTest, no momento, mostramos apenas frames que vieram de uma pintura.
Clicar duas vezes em um dos frames mostra uma visualização em zoom (em seguida, use as setas para a esquerda/direita para navegar). Passar o cursor sobre eles mostra linhas no painel e na linha do tempo para visualizar exatamente quando o frame foi capturado, permitindo que você correlacione à sequência de carregamento. Isso simplifica muito a depuração de problemas comuns de carregamento, como fontes da Web de bloqueio de renderização.
No painel da linha do tempo, você pode ativar a captura de tela marcando a caixa de seleção "Screenshots" na barra de ferramentas de cima. As coisas funcionam de maneira um pouco diferente aqui, em comparação com o painel "Network". Nesse caso, tentamos fazer a captura com a maior frequência possível, independentemente da quantidade de cores, para podermos soltar as imagens em uma escala de tempo linear correlacionada com as outras linhas na linha do tempo. Em vez de precisar clicar duas vezes para mostrar uma visualização, os frames com zoom ampliado aparecem ao passar o cursor.
Como os dois estão um pouco dessincronizados em termos de funcionalidade e UX, recomendamos que você teste os recursos e forneça feedback por meio de tíquetes em crbug.com/new ou enviando um tweet para @ChromeDevTools.
Limitação de rede no painel "Network"
Restrição de rede, um recurso que adicionamos ao apresentar o Modo de dispositivo, encontrou uma segunda casa na barra de ferramentas do painel de rede para que você possa se concentrar nas otimizações de rede em um único lugar.
Essa nova página inicial é apenas um espelho: ela ainda está disponível fora do modo de dispositivo, já que simular uma conectividade ruim ainda é muito importante ao trabalhar para tornar seu site responsivo.
Por fim, você é uma dessas pobres almas que se perguntam por que a conexão de Internet falha depois de um longo dia no trabalho e depois descobre que se esqueceu de desativar a limitação de rede? A guia do painel de rede agora mostra um ícone de aviso quando a limitação de rede está ativada.
Várias dicas
- Odeia aqueles círculos estranhos na linha do tempo da rede? Nós também. Esses são os pontos no tempo em que um frame (na nova tira de filme) foi capturado. Agora elas aparecem como linhas quando você passa o cursor.
- O Modo de dispositivo agora preserva a orientação quando você alterna entre dispositivos.
Batimentos da comunidade
Introdução às Chrome DevTools
Bret Little lançou este breve curso de tutorial (em inglês) que familiariza você com as funcionalidades básicas do DevTools, mas também oferece muitas dicas e sugestões detalhadas. Lá você encontra informações úteis, e mais documentos do DevTools não dói!
Um ambiente de desenvolvimento integrado do DevTools…?!
Kenneth Auchenberg, desenvolvedor Web e fã de DevTools, desenvolveu um app DevTools autônomo de prova de conceito há alguns meses e, de alguma forma, a postagem do blog revelou notícias (de hackers esta semana).
Transformar as ferramentas de desenvolvimento em um ambiente de desenvolvimento integrado completo é uma ideia divertida, que muitos membros da nossa equipe já sonharam, mas também seria um projeto de proporções épicas.
O que você acha? O ambiente de desenvolvimento integrado do DevTools é um sonho distante ou ele pode funcionar? Como ele deve ser? Deixe um comentário e conte para nós!
Até mais!
Paul Bakaus e a equipe do DevTools