Novidades do DevTools
A primeira notícia desta postagem é um pequeno meta: é a atualização em si. De vez em quando, mas pelo menos uma vez por mês, vou resumir o que está acontecendo no mundo do Chrome DevTools, recém-publicado.
E quando eu falo em atualizar, quero dizer: vou falar sobre novos recursos que acabaram de chegar ao Chrome Canary, então, se você prefere ficar em uma versão estável, tudo bem. Mas se você é aventureiro e quer ficar por dentro, estas postagens são para você. Além dos recursos e correções de bugs mais recentes, você vai encontrar uma seção Pulsação de frequência da comunidade no fim de cada postagem, destacando as contribuições mais importantes que você, nossos amados usuários.
Então, sem mais delongas, vamos conferir as notícias do momento.
Novidades no DevTools
Capturas de tela semelhantes a tiras de filme na rede e na linha do tempo
Há apenas uma semana, deixamos de usar um novo recurso importante: a capacidade de fazer capturas de tela da página nas guias "Rede" e "Linha do tempo".
No painel Rede, clique no pequeno ícone da câmera para ativar a captura de frames e atualize a página para acionar a captura. No momento, além das capturas de tela feitas com outras ferramentas, como o WebPageTest, mostramos apenas os frames que vieram de uma pintura.
Quando você clica duas vezes em um dos frames, aparece uma visualização com zoom e, em seguida, use as setas para a esquerda/direita para navegar. Ao passar o cursor sobre eles, aparecem linhas no painel e na linha do tempo para visualizar exatamente quando o frame foi capturado, permitindo que você faça a correlação com a sequência de carregamento. Isso facilita muito a depuração de problemas comuns de carregamento, como fontes de bloqueio de renderização.
No painel Linha do tempo, é possível ativar a captura de tela marcando a caixa de seleção "Capturas de tela" na barra de ferramentas superior. As coisas funcionam de maneira um pouco diferente aqui em comparação com o painel "Network". Nesse caso, tentamos capturar o máximo possível (independentemente das cores reais) para colocar essas capturas de tela em uma escala temporal linear correlacionada às outras linhas da linha do tempo. Em vez de clicar duas vezes para mostrar uma visualização, os frames com zoom 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 pelos tíquetes em crbug.com/new ou um tweet para @ChromeDevTools.
Limitação de rede no painel "Network"
A limitação de rede, um recurso que adicionamos ao apresentar o Modo dispositivo, encontrou a segunda página inicial na barra de ferramentas do painel "Rede" para que você possa se concentrar nas otimizações de rede em um só lugar.
No entanto, esta nova casa é apenas um espelho: ela ainda está disponível fora do Device Mode, já que a simulação de uma conexão ruim ainda é muito importante para tornar seu site responsivo.
Por fim, você é uma dessas pobres almas que se perguntaram por que sua conexão com a internet é interrompida depois de um longo dia de trabalho e depois descobre que se esqueceu de desativar a limitação de rede? A guia do painel "Rede" agora mostra um ícone de aviso quando a limitação de rede está ativada.
Vários detalhes
- Odiava esses círculos estranhos na linha do tempo da rede? Nós também. Esses são os momentos em que um frame (na nova tira de filme) foi capturado. Agora elas aparecem como linhas quando você passa o cursor sobre elas.
- O Modo dispositivo agora preserva a orientação quando você alterna entre dispositivos
Sinal de funcionamento da comunidade
Sua sujeira com o Chrome DevTools
O Bret Little lançou este breve curso tutorial que apresenta as funcionalidades básicas do DevTools, mas também oferece muitas dicas e sugestões detalhadas. Com certeza essa informação é muito útil. Há mais documentos do DevTools!
Um ambiente de desenvolvimento integrado do DevTools...?!
Kenneth Auchenberg, desenvolvedor da Web e aficionado por DevTools, desenvolveu um app DevTools autônomo à prova de conceito há alguns meses e, de alguma forma, sua postagem do blog (em inglês) rendeu notícias de hackers novamente esta semana.
Transformar o DevTools em um ambiente de desenvolvimento integrado completo é uma ideia divertida, com a qual muitos membros da nossa equipe já sonharam antes, mas também seria um projeto de proporções épicas.
O que você acha? O ambiente de desenvolvimento integrado do DevTools é um pipe-dream ou você consegue perceber como ele funciona? Como deve ser? Deixe um comentário e conte para nós!
Até mais!
Paul Bakaus e a equipe do DevTools