Notícias do DevTools, sempre atualizadas
A primeira notícia 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 nas guias "Rede" e "Cronologia".
No painel de rede, clique no pequeno í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 capturadas com outras ferramentas, como o WebPageTest, atualmente só mostramos frames que realmente vieram de uma pintura.
Enquanto o clique duplo em um dos frames mostra uma visualização em zoom (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 facilita a depuração de problemas comuns de carregamento, como fontes da Web que bloqueiam a renderização.
No painel da linha do tempo, é possível 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 de rede: nesse caso, tentamos capturar o máximo possível de imagens, independentemente das pinturas reais, para podermos soltar essas capturas de tela em uma escala de tempo linear que se correlaciona com as outras linhas na Linha do tempo. Em vez de precisar clicar duas vezes para mostrar uma visualização, os frames ampliados aparecem ao passar o cursor.
Como os dois estão um pouco fora de sincronia em termos de funcionalidade e UX, recomendamos que você teste os recursos e envie seu feedback através de tickets em crbug.com/new ou por meio de tweets para @ChromeDevTools.
Limitação de rede no painel "Network"
Restrição de rede, um recurso que adicionamos ao apresentar o Modo 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 pessoas que se perguntam por que a conexão de Internet está ruim depois de um longo dia de trabalho, apenas para descobrir que você esqueceu de desativar o throttling 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 ao Chrome DevTools
Bret Little lançou este curso de orientação que apresenta a funcionalidade básica do DevTools e também oferece muitas dicas e truques detalhados. Há informações úteis lá, e mais documentos do DevTools nunca são demais.
Um ambiente de desenvolvimento integrado do DevTools…?!
Kenneth Auchenberg, desenvolvedor da Web e fã das Ferramentas para desenvolvedores, desenvolveu um app independente de prova de conceito das Ferramentas para desenvolvedores há alguns meses, e de alguma forma a postagem do blog foi notícia (de hackers) novamente esta semana.
Transformar o DevTools 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 ficar? Deixe um comentário e conte para nós!
Até mais!
Paul Bakaus e a equipe do DevTools