Revoluções do Chrome DevTools 2013

Introdução

À medida que a complexidade e a funcionalidade dos aplicativos da Web cresceram, o Chrome DevTools também cresceu. Nesta recapitulação da palestra de Paul Irish no Google I/O 2013, Chrome DevTools Revolutions 2013, você vai conhecer os recursos mais recentes que estão revolucionando a maneira como você cria e testa aplicativos da Web.

Se você perdeu a palestra do Paul, assista acima (vá em frente, vamos esperar) ou acesse diretamente o resumo de recursos:

• Os espaços de trabalho permitem que você use o DevTools como seu 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 refletidas imediatamente na página.
• A depuração remota de páginas no Chrome para Android já é possível há algum tempo, mas a extensão ADB simplifica a conexão com dispositivos Android. O encaminhamento de porta reverso permite que você se conecte facilmente ao localhost na máquina de desenvolvimento pelo dispositivo.
• O desempenho é sempre uma preocupação em aplicativos da Web, e as Ferramentas do desenvolvedor têm vários novos recursos para ajudar a rastrear gargalos, incluindo a nova visualização de diagrama de chamas para a criação de perfis 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 ativos no Chrome 28, agora disponíveis no canal de atualização estável.

Espaços de trabalho

Com os espaços de trabalho, é possível mapear recursos fornecidos por um servidor da Web local em arquivos no disco. Assim, você pode editar qualquer tipo de arquivo de origem no painel "Fontes" e fazer com que essas mudanças sejam mantidas no disco. Da mesma forma, as mudanças 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, e o painel "Sources" mostra a visualização do sistema de arquivos local da pasta raiz do site. As edições feitas nos arquivos dessa pasta são mantidas no disco. Na captura de tela abaixo, algumas mudanças não salvas foram feitas no Calendar.css, então um asterisco foi colocado ao lado do nome do arquivo.

Pressionar Control+S ou Command+S mantém as mudanças no disco.

Da mesma forma, as mudanças feitas nos estilos de um elemento no painel "Elements" são refletidas no painel "Sources" e no editor externo. Observações:

• As mudanças de DOM no painel Elements não são mantidas. Somente as mudanças de estilo no painel "Elements" são mantidas.
• Somente os estilos definidos em um arquivo CSS externo podem ser alterados. As mudanças em element.style ou em estilos inline não são mantidas no disco. Se você tiver estilos inline, eles podem ser alterados no painel "Fontes".
• As mudanças de estilo no painel "Elements" são mantidas imediatamente. Não é necessário pressionar Control+S ou Command+S.

Como adicionar uma pasta do 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:

1. No DevTools, clique em Configurações para abrir as configurações do DevTools.
2. Clique em Espaço de trabalho.
3. Clique em Adicionar pasta.
4. Navegue até a pasta que contém os arquivos de origem do projeto e clique em Selecionar.
5. Quando solicitado, clique em Permitir para dar acesso total das DevTools à pasta.

O painel "Origens" mostra a nova pasta do espaço de trabalho com as origens carregadas no localhost. Agora você pode editar arquivos em tempo real na pasta do seu espaço de trabalho, e essas mudanças vão permanecer no disco.

Mapear uma pasta para um URL

Depois de adicionar uma pasta do espaço de trabalho, é possível mapeá-la para um URL. Sempre que o Chrome carrega o URL especificado, o painel "Sources" mostra o conteúdo da pasta do espaço de trabalho no lugar do conteúdo da pasta de rede.

Para mapear uma pasta do espaço de trabalho para um URL, faça o seguinte:

1. 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.
2. Selecione Mapear para recurso de rede.

   

3. Selecione o recurso de rede correspondente na página carregada no momento.

   

4. Atualize a página no Chrome.

O painel "Fontes" agora mostra apenas o conteúdo da pasta do espaço de trabalho local do site, não as fontes do localhost, conforme mostrado abaixo.

Há outras duas maneiras de vincular uma pasta de rede a uma pasta do Workspace:

• Clique com o botão direito do mouse (ou pressione Ctrl e 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 do Sass/CSS

A depuração do Sass (mapa de origem CSS) permite editar arquivos Sass (.scss) em tempo real no painel Sources e conferir 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 "Elements" mostra um link para o arquivo .scss, não para o arquivo .css gerado.

Clicar no link abre o arquivo SCSS (editável) no painel "Origens". Você pode fazer as mudanças 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 do Sass

Para usar a depuração do Sass no Chrome, você precisa ter a versão de pré-lançamento do compilador Sass, que é a única versão que oferece suporte à geração de mapas de origem.

gem install sass -v '>=3.3.0alpha' --pre

Também é necessário ativar o recurso de depuração do Sass nos experimentos do DevTools:

1. Abra about:flags no Chrome.
2. Ative a opção Ativar experimentos das Ferramentas para desenvolvedores.
3. Reinicie o Chrome.
4. Abra as configurações do DevTools e clique em Experiments.
5. Ative o Suporte a Sass (ou Depuração de folha de estilo Sass, dependendo da versão do navegador que você está usando).

Depois que o Sass for instalado, inicie o compilador Sass para verificar mudanças nos arquivos de origem do Sass e criar 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, saiba que ele ainda não oferece suporte à versão de pré-lançamento do Sass. Portanto, não é possível usar a depuração do Sass com o Compass.

Como funciona

Para cada arquivo de origem SCSS que processa, o compilador Sass gera um arquivo de mapa de origem (.map) além do CSS compilado. O arquivo de mapa de origem é um arquivo JSON que define os mapeamentos entre o arquivo .scss e os arquivos .css. Cada arquivo CSS contém uma anotação que especifica o URL do arquivo de mapa de origem, embutido em um comentário especial:

/*# sourceMappingURL=<url>; */

Por exemplo, considere 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 */

Confira 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 novos recursos do DevTools facilitam a configuração da depuração remota no Chrome para Android: a extensão ADB e o encaminhamento de porta reverso.

A extensão do ADB para 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 do ADB e visualizar dispositivos conectados.

O encaminhamento de porta reverso facilita a conexão do Chrome no Android a um servidor da Web em execução no localhost, algo que alguns ambientes de rede dificultam sem alguns truques de DNS.

Como usar a extensão ADB

Primeiro, instale a extensão do ADB para Chrome na Chrome Web Store. Clique em Usar no Chrome para instalar a extensão.

Depois da instalação, um ícone cinza do menu do Android aparece no Chrome. Para iniciar o ADB, clique no ícone e em Start ADB.

Quando o ADB é iniciado, o ícone de menu fica verde e mostra o número de dispositivos conectados, se houver.

Clique em Ver dispositivos para abrir a página about:inspect, que mostra cada dispositivo conectado e as guias dele. Para inspecionar uma guia no DevTools, clique no link "inspecionar" ao lado do URL.

Se nenhum dispositivo conectado aparecer, verifique se o dispositivo está conectado ao USB e se a depuração USB está ativada nas configurações do Chrome para Android. Para instruções mais detalhadas e etapas de solução de problemas, consulte Depuração remota no Android.

Encaminhamento de porta reverso (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. No entanto, em alguns casos, como em redes corporativas restritas, isso pode não ser possível sem alguns truques DNS inteligentes. Um novo recurso do Chrome para Android chamado encaminhamento de portas reversas facilita isso. Ele cria uma porta TCP de escuta no dispositivo que encaminha o tráfego por USB para uma porta TCP específica na máquina de desenvolvimento.

Para usar esse recurso, você precisa:

• Chrome 28 ou mais recente instalado na máquina de desenvolvimento
• Chrome para Android Beta instalado no dispositivo
• Android Debug Bridge (extensão do ADB para Chrome ou SDK completo do Android) instalada na máquina de desenvolvimento

Para usar o encaminhamento de porta reverso, é necessário ter o dispositivo conectado para depuração remota, conforme descrito em Como usar a extensão do ADB. Em seguida, ative o encaminhamento de porta reverso e adicione uma regra de encaminhamento de porta para o aplicativo.

Primeiro, ative o encaminhamento de porta reverso:

1. Abra o Chrome na sua máquina de desenvolvimento.
2. Em about:flags, ative a opção Ativar experimentos das Ferramentas para desenvolvedores e reinicie o Chrome.
3. Abra about:inspect. Você vai ver seu dispositivo móvel e uma lista das guias abertas.
4. Clique no link "Inspecionar" ao lado de qualquer um dos sites listados.
5. Na janela do DevTools que aparece, abra o painel "Settings".
6. Em "Experimentos", ative a opção Ativar encaminhamento de porta reverso.
7. Feche a janela do DevTools e volte para about:inspect.

Em seguida, adicione uma regra de encaminhamento de porta:

1. Clique no link "inspecionar" novamente para abrir o DevTools e as configurações do DevTools.
2. Clique na guia Encaminhamento de porta.
3. No campo Porta do dispositivo, insira o número da porta em que o Chrome precisa se conectar no dispositivo Android (padrão 8080).
4. No campo Target, adicione o número da porta em que o aplicativo da Web está sendo executado na máquina de desenvolvimento.

   

5. No Chrome para Android, abra localhost:, em que é o valor inserido no campo Device port (o padrão é 8080).

O conteúdo vai ser veiculado pela máquina de desenvolvimento.

Visualização de gráfico em chama para perfis JavaScript

A nova visualização "Flame Chart" oferece uma representação visual do processamento do JavaScript ao longo do tempo, semelhante às encontradas nos painéis "Timeline" e "Network".

O eixo horizontal é o tempo e o vertical é a pilha de chamadas. Na parte de cima do painel, há uma visão geral que mostra toda a gravação. 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 detalhada é reduzida 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 sobre outro foi chamado pelo bloco de função inferior. Ao passar o cursor sobre um bloco, o nome da função e os dados de sincronização são exibidos:

• Nome: o nome da função.
• Tempo próprio: o tempo gasto para concluir a invocação atual da função, incluindo apenas as declarações da própria função, sem incluir as funções que ela chamou.
• Tempo total: o tempo gasto 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 funções chamadas por essa função.
• Tempo total agregado: agrega o tempo total de todas as invocações da função, incluindo as funções chamadas por ela.

Clicar em um bloco de função abre o arquivo JavaScript correspondente no painel "Origens", na linha em que a função é definida.

Para usar o gráfico de chamas:

1. No DevTools, clique na guia Perfis.
2. Escolha Record JavaScript CPU profile e clique em Start.
3. Quando terminar de coletar dados, clique em Parar.
4. Na visualização de perfil, selecione a visualização Gráfico de chamas.

   

Cinco recursos principais de medição de performance

Para completar essa pesquisa sobre avanços revolucionários no DevTools, há vários novos recursos para investigar problemas de desempenho:

• Modo de pintura contínua
• Mostrando retângulos e bordas de camadas do Paint
• Medidor de QPS
• Como encontrar layouts síncronos forçados (troca frequente de layouts)
• Rastreamento da alocação de objetos

Modo de pintura contínua

O modo de pintura contínua é uma opção nas configurações do DevTools (Rendering > Enable continuous page repaint) que ajuda a identificar o custo de renderização de elementos individuais ou estilos CSS.

Normalmente, o Chrome só pinta na tela em resposta a uma mudança de layout ou estilo e apenas as regiões da tela que precisam ser atualizadas. Quando você ativa a repintura contínua da página, toda a tela é repintada constantemente. Uma tela de aviso mostra o tempo que o Chrome leva para pintar a página, o intervalo de tempo 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.

O benefício de usar isso é que você pode percorrer a árvore DOM no painel "Elements" e ocultar elementos individuais (pressione a tecla H para ocultar o elemento selecionado) ou desativar os estilos CSS de um elemento. É possível conferir quanto tempo um elemento ou estilo adiciona ao "peso" de renderização da página, se houver, observando as mudanças no tempo de pintura da página. Se ocultar um único elemento reduzir significativamente o tempo de pintura, você saberá que deve se concentrar no estilo ou na construção desse elemento.

Para ativar o modo de pintura contínua:

1. Abra as configurações do DevTools. 1.Na guia Geral, em Renderização, ative a opção Ativar pintura contínua da página.

Para mais informações, consulte Como criar um perfil de tempos de pintura longos com o modo de pintura contínua das Ferramentas do desenvolvedor.

Mostrar retângulos de pintura e bordas de camadas

Outra opção no DevTools é mostrar quais 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 em que um efeito de passar o cursor do CSS estava sendo aplicado ao gráfico roxo. Isso é bom, já que é uma parte relativamente pequena da tela.

Você quer evitar práticas de design e desenvolvimento que causem a repintura de toda a tela. 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 fixa no CSS, o que exige que o Chrome pinte a página inteira em cada rolagem.

Medidor de QPS

O medidor de QPS mostra a taxa de frames atual da página, a taxa de frames mínima e máxima, um gráfico de barras que mostra a taxa de frames ao longo do tempo e um histograma que mostra a variabilidade da taxa de frames.

Para mostrar o medidor de QPS:

1. Abra as configurações do DevTools.
2. Clique em Geral.
3. Em Renderização, ative Forçar composição acelerada e Mostrar medidor de QPS.

Para forçar o medidor de QPS a aparecer sempre, abra about:flags, ative o contador de QPS e reinicie o Chrome.

Como encontrar layouts síncronos forçados (troca frequente de layouts)

Para maximizar o desempenho da renderização, o Chrome normalmente agrupa as mudanças de layout solicitadas pelo aplicativo e programa uma passagem de layout para calcular e renderizar as mudanças solicitadas de forma assíncrona. No entanto, se um aplicativo solicitar o valor de uma propriedade dependente do layout (como offsetHeight ou offsetWidth), o Chrome será 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 a performance de renderização, especialmente quando executados repetidamente em árvores do DOM grandes. Esse cenário também é chamado de "layout thrashing".

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 da linha do tempo correspondente. Passar o cursor sobre um desses registros exibe os rastros de pilha do código que invalidou o layout e o código que forçou o layout.

Esse pop-up também mostra o número de nós que precisavam de layout, o tamanho da árvore de relayout, o escopo do layout e a raiz do layout.

Consulte Demonstração da linha do tempo: como diagnosticar layouts síncronos forçados para mais informações.

Rastreamento da 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 faz snapshots de heap continuamente ao longo do tempo. O perfil de alocação de pilha mostra onde os objetos são criados e identifica o caminho de retenção.

Para rastrear alocações de objetos:

1. No DevTools, clique na guia Perfis.
2. Escolha Gravar alocações de heap e clique em Iniciar.
3. Quando terminar de coletar dados, clique em Parar a gravação do perfil de heap (o círculo vermelho no canto inferior esquerdo do painel de criação de perfil).

Criação de perfis de tela (experimental)

Por fim, aqui está um recurso totalmente experimental para você conhecer. A criação de perfil da tela permite gravar e reproduzir chamadas do WebGL feitas em um elemento de tela. É possível percorrer chamadas ou grupos de chamadas WebGL individuais e conferir os resultados renderizados. Você também vai saber o tempo que levou para reproduzir essas chamadas.

Para usar a criação de perfil de tela:

1. Ative o recurso Inspeção da tela na guia Experimentos das configurações do DevTools. Se você não encontrar essa guia, abra about:flags, ative a opção Ativar experimentos das Ferramentas para desenvolvedores e reinicie o Chrome.
2. Clique na guia Perfis.
3. Selecione Capturar quadro da tela e clique em Tirar snapshot.
4. Agora você pode conferir as chamadas usadas para criar o frame da tela.