Introdução
O Chrome DevTools cresceu, assim como a complexidade e a funcionalidade dos aplicativos da Web. Nesta recapitulação da palestra Google I/O 2013 de Paul European, Chrome DevTools Revolutions 2013 (link em inglês), você confere os recursos mais recentes que estão revolucionando a forma como você cria e testa aplicativos da Web.
Se você perdeu a palestra de Paulo, pode assistir logo acima (vamos esperar, vamos esperar) ou pode ir direto ao resumo dos recursos:
- Os espaços de trabalho permitem usar o DevTools como editor de código-fonte.
- Se você usa o Sass, vai adorar a capacidade de editar arquivos Sass (.scss) em tempo real no DevTools e ver as mudanças imediatamente refletidas na página.
- A depuração remota de páginas no Chrome para Android é possível há algum tempo, mas a extensão adb simplifica a conexão com dispositivos Android. O encaminhamento de portas reverso permite que você se conecte facilmente ao localhost na sua máquina de desenvolvimento pelo dispositivo.
- O desempenho é sempre uma preocupação em aplicativos da Web, e o DevTools tem uma série de novos recursos para ajudar a rastrear gargalos, incluindo a nova visualização do Flame Chart para criação de perfil de CPU e várias novas ferramentas para depurar problemas de desempenho relacionados à renderização e ao uso de memória.
Esses recursos estão disponíveis no Chrome 28, agora no canal de atualização estável.
Espaços de trabalho
Os espaços de trabalho permitem mapear recursos disponibilizados por um servidor da Web local para arquivos no disco, para que você possa editar qualquer tipo de arquivo de origem no painel Fontes e fazer com que essas alterações sejam mantidas no disco. Da mesma forma, as alterações feitas no editor externo aparecem imediatamente no painel Sources.
A captura de tela abaixo mostra um exemplo de espaços de trabalho em ação. O site do Google Agenda foi carregado pelo localhost, enquanto o painel "Origens" mostra a visualização do sistema de arquivos local da pasta raiz do site. As edições feitas nos arquivos desta pasta são mantidas no disco. Na captura de tela abaixo, algumas alterações não salvas foram feitas no Calendar.css. Por isso, um asterisco é colocado ao lado do nome do arquivo.
Pressionar Control+S ou Command+S mantém as mudanças no disco.
Da mesma forma, as alterações feitas nos estilos de um elemento no painel Elementos são refletidas no painel Fontes e em seu editor externo. Observações:
- As alterações do DOM no painel "Elementos" não são mantidas. Somente as mudanças de estilo no painel Elementos são mantidas.
- Somente estilos definidos em um arquivo CSS externo podem ser alterados. Mudanças no elemento.style ou nos estilos in-line não são mantidas de volta no disco Se você tiver estilos inline, eles poderão ser mudados no painel Sources.
- As mudanças de estilo no painel "Elementos" são mantidas imediatamente. Não é necessário pressionar
Control+SouCommand+S.
Adicionar uma pasta de espaço de trabalho
Há duas partes no uso de espaços de trabalho: disponibilizar o conteúdo de uma pasta local para o DevTools e mapear essa pasta para um URL.
Para adicionar uma nova pasta de espaço de trabalho:
- Clique em Settings
para abrir as configurações do DevTools. - Clique em Espaço de trabalho.
- Clique em Adicionar pasta.
- Procure a pasta que contém os arquivos de origem do projeto e clique em Selecionar.
- Quando solicitado, clique em Allow para que o DevTools tenha acesso total à pasta.
O painel "Sources" mostra a nova pasta do espaço de trabalho com as origens carregadas pelo localhost. Agora você pode editar arquivos em tempo real na sua pasta do espaço de trabalho. Essas mudanças vão ser mantidas no disco.
Mapear uma pasta para um URL
Depois de adicionar uma pasta do espaço de trabalho, será possível mapeá-la para um URL. Sempre que o Chrome carregar o URL especificado, o painel Fontes exibirá o conteúdo da pasta do espaço de trabalho no lugar do conteúdo da pasta da rede.
Para mapear uma pasta do espaço de trabalho para um URL:
- No painel Sources, clique com o botão direito do mouse ou pressione Ctrl e clique em um arquivo em uma pasta do espaço de trabalho.
- Selecione Mapear para recurso de rede.
- Selecione o recurso de rede correspondente na página carregada no momento.
- Atualize a página no Chrome.
Agora o painel "Sources" mostra apenas o conteúdo da pasta local do espaço de trabalho do seu site, não as fontes do localhost, conforme mostrado abaixo.
Há duas outras maneiras de vincular uma pasta de rede a uma pasta do espaço de trabalho:
- Clique com o botão direito do mouse (ou Ctrl + clique) em um recurso de rede e selecione Mapear para recurso do sistema de arquivos.
- Adicione mapeamentos manualmente na guia "Espaço de trabalho" da caixa de diálogo "Configurações do DevTools".
Depuração do mapa de origem Sass/CSS
A depuração Sass (mapa de origem CSS) permite editar arquivos Sass (.scss) em tempo real no painel Sources e ver os resultados sem precisar sair do DevTools ou atualizar a página. Quando você inspeciona um elemento cujos estilos são fornecidos por um arquivo CSS gerado pelo Sass, o painel Elementos exibe um link para o arquivo .scss, não para o arquivo .css gerado.
Clicar no link abre o arquivo SCSS (editável) no painel Sources. Você pode fazer qualquer mudança que quiser nesse arquivo.
Quando você salva alterações em um arquivo SCSS (no DevTools ou em outro lugar), o compilador Sass gera novamente os arquivos CSS. Em seguida, o DevTools recarrega o arquivo CSS recém-gerado.
Como usar a depuração Sass
Para usar a depuração Sass no Chrome, você precisa ter a versão de pré-lançamento do compilador Sass, que é a única versão compatível no momento com a geração de mapas de origem.
gem install sass -v '>=3.3.0alpha' --pre
Você também precisa ativar o recurso de depuração do Sass nos experimentos do DevTools:
- Abra about:flags no Chrome.
- Ative a opção Ativar os experimentos das Ferramentas para desenvolvedores.
- Reinicie o Chrome.
- Abra as configurações do DevTools e clique em Experimentos.
- Ative a opção Suporte a Sass ou Depuração de folha de estilo Sass, dependendo da versão do navegador usada.
Depois de instalar o Sass, inicie o compilador Sass para monitorar mudanças nos arquivos de origem do Sass e crie arquivos de mapa de origem para cada arquivo CSS gerado, por exemplo:
sass --watch **--sourcemap** sass/styles.scss:styles.css
Se você estiver usando o Compass, ele ainda não é compatível com a versão de pré-lançamento do Sass, portanto não é possível usar a depuração de Sass com ela.
Como funciona
Para cada arquivo de origem SCSS processado, o compilador Sass gera um arquivo de mapa de origem (arquivo .map), além do CSS compilado. O arquivo do mapa de origem é JSON que define os mapeamentos entre o arquivo .scss e o .css. Cada arquivo CSS contém uma anotação que especifica o URL do arquivo do mapa de origem, incorporado em um comentário especial:
/*# sourceMappingURL=<url>; */
Por exemplo, considerando o seguinte arquivo SCSS:
<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
font-size: $textSize;
color: $fontColor;
background: $bgColor;
}
O Sass gera um arquivo CSS como este, com a anotação sourceMappingURL:
<!-- styles.css -->
h2 {
font-size: 24px;
color: orange;
background-color: darkblue;
}
/*# sourceMappingURL=styles.css.map */
Veja abaixo um exemplo de arquivo de mapa de origem:
{
"version": "3",
"mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
"sources": ["sass/styles.scss"],
"file": "styles.css"
}
Depuração remota mais fácil no Chrome para Android
Alguns recursos novos no DevTools facilitam a depuração remota no Chrome para Android: a extensão ADB e o encaminhamento reverso de portas.
A extensão ADB do Chrome simplifica o processo de configuração da depuração remota. Ele oferece os seguintes benefícios:
- Inclui o Android Debug Bridge (adb) para que você não precise instalá-lo.
- Nenhuma interação com a linha de comando é necessária.
- IU para iniciar e interromper facilmente o daemon ADB e visualizar os dispositivos conectados.
O encaminhamento reverso de portas facilita a conexão do Chrome no Android a um servidor da Web executado no seu localhost, algo que alguns ambientes de rede dificultam sem alguns truques de DNS.
Como usar a extensão ADB
Primeiro, instale a extensão ADB do Chrome pela Chrome Web Store. Clique em Usar no Chrome para instalar a extensão.
Depois de instalado, um ícone cinza de menu do Android aparece no Chrome. Para iniciar o ADB, clique no ícone e em Start ADB.
Assim que o adb for iniciado, o ícone do menu ficará verde e exibirá o número de dispositivos conectados no momento, se houver.
Clique em Ver dispositivos para abrir a página about:inspect, que mostra cada dispositivo conectado e as guias correspondentes. Para inspecionar uma guia no DevTools, clique no link "Inspect" ao lado do URL.
Caso não veja nenhum dispositivo conectado, verifique se ele está conectado ao USB e se a Depuração USB está ativada nas configurações do Google Chrome para Android. Para instruções mais detalhadas e etapas de solução de problemas, consulte Depuração remota no Android.
Encaminhamento reverso de portas (experimental)
Normalmente, você tem um servidor da Web em execução na máquina de desenvolvimento local e quer se conectar a esse site pelo dispositivo. Se a máquina de desenvolvimento e o dispositivo estiverem na mesma rede, isso é simples. Mas em alguns casos, como em redes corporativas restritas, isso pode não ser possível sem alguns truques inteligentes de DNS. Um novo recurso do Chrome para Android chamado encaminhamento reverso de portas simplifica esse processo. Ele cria uma porta TCP de escuta no dispositivo, que encaminha o tráfego via USB para uma porta TCP específica na máquina de desenvolvimento.
Para usar esse recurso, você precisará do seguinte:
- Chrome 28 ou posterior instalado na máquina de desenvolvimento
- Google Chrome para Android (Beta) instalado no seu dispositivo
- Android Debug Bridge (extensão ADB do Chrome ou SDK completo do Android) instalado na sua máquina de desenvolvimento.
Para usar o encaminhamento reverso de portas, seu dispositivo precisa estar conectado para a depuração remota, conforme descrito em "Como usar a extensão ADB". Em seguida, ative o encaminhamento reverso e adicione uma regra de encaminhamento de portas ao aplicativo.
Primeiro, ative o encaminhamento reverso de portas:
- Abra o Chrome na sua máquina de desenvolvimento.
- Em about:flags, ative a opção Ativar experimentos das Ferramentas para desenvolvedores e reinicie o Chrome.
- Abra about:inspect. Você verá seu dispositivo móvel e uma lista das guias abertas.
- Clique no link "inspecionar" ao lado de qualquer um dos sites listados.
- Na janela do DevTools aberta, abra o painel "Settings".
- Em "Experimentos", ative a opção Ativar encaminhamento reverso de portas.
- Feche a janela do DevTools e volte para about:inspect.
Em seguida, adicione uma regra de encaminhamento de portas:
- Clique no link "Inspect" novamente para abrir o DevTools e as configurações do DevTools novamente.
- Clique na guia Encaminhamento de portas.
- No campo Porta do dispositivo, digite o número da porta à qual o Chrome deve se conectar no dispositivo Android (o padrão é 8080).
- No campo Destino, anexe o número da porta em que o aplicativo da Web está sendo executado na máquina de desenvolvimento.
- No Chrome para Android, abra localhost:
, em que é o valor digitado no campo Porta do dispositivo (o padrão é 8080).
Você vai ver o conteúdo sendo exibido pela sua máquina de desenvolvimento.
Visualização do Flame Chart para perfis do JavaScript
A nova visualização Flame Chart oferece uma representação visual do processamento do JavaScript ao longo do tempo, semelhante àquelas encontradas nos painéis Linha do tempo e Rede.
O eixo horizontal é o tempo, e o vertical, a pilha de chamadas. Na parte superior do painel, há uma visão geral que mostra toda a gravação, e você pode "aumentar o zoom" em uma região da visão geral selecionando-a com o mouse, conforme mostrado abaixo. A escala de tempo da visualização de detalhes diminui de acordo com isso.
Na visualização de detalhes, uma pilha de chamadas é representada como uma pilha de "blocos" de função. Um bloco que fica em cima de outro foi chamado pelo bloco de funções inferior. Passe o cursor sobre um determinado bloco para exibir o nome da função e os dados de tempo:
- Nome: o nome da função.
- Tempo próprio: quanto tempo levou para concluir a invocação atual da função, incluindo apenas as instruções na própria função, sem incluir as funções que ela chamou.
- Tempo total: o tempo necessário para concluir a invocação atual dessa função e de todas as funções que ela chamou.
- Tempo próprio agregado: tempo agregado de todas as invocações da função durante a gravação, não incluindo as funções chamadas por essa função.
- Tempo total agregado: tempo total agregado de todas as invocações da função, incluindo funções chamadas por ela.
Clicar em um bloco de função abre o arquivo JavaScript contido no painel Sources, na linha em que a função é definida.
Para usar o Flame Chart:
- No DevTools, clique na guia Profiles.
- Selecione Record JavaScript CPU profile e clique em Start.
- Quando terminar de coletar dados, clique em Interromper.
- Na visualização do perfil, selecione a visualização Flame Chart.
Cinco principais recursos de medição de desempenho
Esta pesquisa de avanços revolucionários no DevTools elabora vários recursos novos para investigar problemas de desempenho:
- Modo de pintura contínua
- Como mostrar retângulos de pintura e bordas de camadas
- Medidor de QPS
- Como encontrar layouts síncronos forçados (troca de layout)
- Rastreamento de alocação de objetos
Modo de pintura contínua
O modo de pintura contínua é uma opção disponível nas configurações do DevTools (Renderização > Ativar recriação contínua da página) e ajuda a identificar o custo de renderização de elementos individuais ou estilos CSS.
Normalmente, o Chrome pinta na tela em resposta a uma mudança de layout ou estilo, e apenas nas regiões da tela que precisam ser atualizadas. Quando você ativa a repintura contínua da página, toda a tela é constantemente repintada. Um alerta mostra o tempo que o Chrome leva para pintar a página, o intervalo de vezes e um gráfico mostrando a distribuição dos tempos de pintura recentes. A linha horizontal no histograma indica a marca de 16,6 ms.
A vantagem de usar isso é que você pode percorrer a árvore do DOM no painel "Elementos" e ocultar elementos individuais (pressione a tecla H para ocultar o elemento selecionado no momento) ou desativar os estilos CSS de um elemento. Você pode ver quanto tempo um elemento ou estilo é adicionado ao "peso", se houver, de renderização da página. Para isso, observe as mudanças no tempo de pintura da página. Se ocultar um único elemento reduzir significativamente os tempos de pintura, é importante se concentrar no estilo ou construção desse elemento.
Para ativar o modo de monitoramento contínuo:
- Abra as configurações do DevTools. 1.Na guia Geral, em Renderização, ative a opção Ativar repintura contínua da página.
Para saber mais, consulte Como criar perfis longos de pintura com o modo de pintura contínua do DevTools.
Como mostrar retângulos de pintura e bordas de camadas
Outra opção no DevTools é mostrar em que regiões retangulares da tela estão sendo pintadas. (Configurações > Renderização > Mostrar retângulos de pintura). Por exemplo, na captura de tela abaixo, um retângulo de pintura está sendo desenhado sobre a região onde um efeito CSS ao passar o cursor estava sendo aplicado ao gráfico roxo. Isso é bom, já que é uma parte relativamente pequena da tela.
Evite práticas de design e desenvolvimento que façam com que toda a tela seja repintada. Por exemplo, na captura de tela a seguir, o usuário está rolando a página. Um retângulo de pintura envolve a barra de rolagem, e outro envolve todo o restante da página. Nesse caso, o culpado é a imagem de plano de fundo no elemento do corpo. A posição da imagem é definida como fixada no CSS, o que exige que o Chrome repinte toda a página a cada rolagem.
Medidor de QPS
O metro de QPS exibe o frame rate atual da página, o mínimo e o máximo de frames, um gráfico de barras com o frame rate ao longo do tempo e um histograma que mostra a variabilidade de frame rate.
Para mostrar o medidor de QPS:
- Abra as configurações do DevTools.
- Clique em Geral.
- Em Renderização, ative Forçar composição acelerada e Mostrar medidor de QPS.
Você pode forçar a exibição do medidor de QPS. Para isso, abra about:flags, ative o Contador de QPS e reinicie o Chrome.
Como encontrar layouts síncronos forçados (troca de layout)
Para maximizar o desempenho de renderização, o Chrome normalmente agrupa as alterações de layout solicitadas pelo aplicativo e programa uma passagem de layout para calcular e renderizar de forma assíncrona as alterações solicitadas. No entanto, quando um aplicativo solicita o valor de uma propriedade dependente de layout (como offsetHeight ou offsetWidth), o Chrome é forçado a executar um layout de página de forma imediata e síncrona. Esses chamados layouts síncronos forçados podem reduzir significativamente o desempenho da renderização, especialmente quando executados repetidamente em árvores DOM grandes. Esse cenário também é chamado de "troca de layout".
Uma gravação da linha do tempo alerta você quando detecta um layout síncrono forçado com um ícone de aviso amarelo ao lado do registro correspondente da linha do tempo. Passar o cursor sobre um desses registros exibe stack traces do código que invalidou o layout e o código que o forçou.
Esse pop-up também mostra o número de nós que precisavam de layout, o tamanho da árvore de novo layout, o escopo e a raiz do layout.
Consulte Demonstração da linha do tempo: como diagnosticar layouts síncronos forçados para mais informações.
Rastreamento de alocação de objetos
O rastreamento de alocação de objetos é um novo tipo de perfil de memória que mostra a alocação ao longo do tempo. Quando você inicia o rastreamento de alocação, o DevTools captura snapshots de heap continuamente. O perfil de alocação de heap mostra onde os objetos estão sendo criados e identifica o caminho de retenção.
Para rastrear alocações de objetos:
- No DevTools, clique na guia Profiles.
- Escolha Record heap allocations e clique em Start.
- Quando terminar de coletar dados, clique em Stop recording heap profile (o círculo vermelho no canto inferior esquerdo do painel de criação de perfil).
Criação de perfil da tela (experimental)
Por fim, confira um recurso completamente experimental. A criação de perfil da tela permite gravar e reproduzir chamadas WebGL feitas em um elemento do canvas. É possível percorrer chamadas individuais ou grupos de chamadas do WebGL e ver os resultados renderizados. Também é possível ver o tempo necessário para repetir essas chamadas específicas.
Para usar a criação de perfil de canvas:
- Ative o recurso Inspeção de Canvas na guia Experimentos das configurações do DevTools. Se a guia não aparecer, abra about:flags, ative a opção Ativar experimentos das Ferramentas para desenvolvedores e reinicie o Chrome.
- Clique na guia Perfis.
- Selecione Capturar frame da tela e clique em Take snapshot.
- Agora você pode explorar as chamadas usadas para criar o frame da tela.
