As Ferramentas do desenvolvedor do Chrome são rápidas, e gostaríamos de chamar sua atenção para algumas novas funcionalidades e melhorias que introduzimos em alguns componentes. Mais especificamente, vamos falar sobre algumas mudanças na interface, o perfil de JS de alta resolução e novos recursos do Workspace.
- O perfil de alta resolução agora tem precisão de 0,1 milissegundo
- As barras de ferramentas foram movidas para a parte de cima do DevTools, e as substituições foram movidas para a gaveta do console.
- Os espaços de trabalho adicionaram vários recursos para oferecer suporte à adição/remoção/pesquisa de arquivos
Criação de perfis de alta resolução
O Perfil de CPU é um recurso muito útil para saber a eficiência do seu JavaScript. Além das visualizações de perfil tradicionais, lançamos um gráfico de chama neste verão, que representa visualmente o processamento do JavaScript de uma página ao longo do tempo. Ele pode ser usado para conferir facilmente a profundidade da pilha de chamadas e o tempo necessário para processar as funções individuais.
Até recentemente, as representações tradicionais de Heavy (de baixo para cima) e de árvore (de cima para baixo), assim como o gráfico de chamas, só mostravam processos com precisão de até um milisegundo. Para a maioria dos aplicativos, isso é suficiente. No entanto, se você estiver trabalhando em algo em que a velocidade realmente importa na interface, como um jogo, a resolução de 1 milissegundo pode ser muito grande para gerar resultados significativos sobre o que está causando a lentidão do site ou a lentidão da interface. Para ativar a criação de perfil de alta resolução (atualmente apenas no Canary):
- Abra as configurações do DevTools.
- Na guia Geral, em Profiler, ative a opção High resolution CPU profiling.
Confira um exemplo de gráfico de chamas visto no perfil normal e com alta resolução, em que analisamos o carregamento da página inicial do HTML5Rocks.com:
Com a resolução normal de perfil, o tempo do processo sempre é arredondado para cima até o próximo milissegundo. Portanto, um processo que leva apenas 0,1 milissegundo ou menos ainda é informado como levando 1,0 milissegundo, e outros processos podem não ser mostrados na pilha de chamadas.
A criação de perfil de alta resolução tem uma sobrecarga grande na VM do JavaScript, e é por isso que ela é desativada por padrão. Embora pareça mais legal do que a resolução de perfil normal, recomendamos usá-la apenas se você realmente precisar da precisão.
Melhorias na interface das ferramentas de desenvolvimento
Embora sempre haja novidades sendo lançadas no Canary, gostaríamos de chamar sua atenção para algumas mudanças importantes na interface: os botões que sobem para a parte de cima da interface em geral, a navegação na linha do tempo e os painéis de informações, além da mudança de prioridades para a gaveta do console.
Primeiro, vamos analisar nosso ponto de partida. Como estamos falando sobre a linha do tempo, vou tentar matar dois coelhos com uma única captura de tela. Confira como a Linha do tempo está no Chrome (estável) agora:
Confira como o recurso ficou.
Observe o seguinte:
- As barras de ferramentas e os botões estão todos na parte de cima da tela, tanto para as específicas da Linha do tempo à esquerda quanto para as gerais do DevTools à direita.
- Os registros da linha do tempo agora têm a estrutura de aninhamento no painel à esquerda, e você pode até usar o teclado para percorrê-los. Além de usar as teclas de seta para cima e para baixo, você também pode usar as teclas esquerda e direita para abrir e fechar registros aninhados.
- Os detalhes de tempo agora são mostrados em um painel à direita para a entrada selecionada. Você também pode passar o cursor sobre outras entradas para conferir as informações delas.
Agora vamos dar uma olhada na gaveta do console. Para abrir a gaveta do console, pressione
Escape nas Ferramentas do desenvolvedor ou pressione o botão da gaveta do console
e a
gaveta vai rolar para cima a partir da parte de baixo.
Por padrão, as guias Console e Pesquisa aparecem lá. Para acessar a funcionalidade anteriormente conhecida como "Substituições", abra as configurações do DevTools e marque a caixa ao lado de "Mostrar a visualização "Emulation" na gaveta do console". Feche a caixa de configurações e você terá uma guia Emulation na gaveta do console, como na captura de tela abaixo:
E você pode fazer toda a emulação lá.
O motivo dessa mudança é que, antes, você precisava entrar e sair das Configurações para mudar as substituições de emulação e, em seguida, voltar e conferir a página. Agora você pode mudar as substituições de emulação enquanto manipula estilos.
Espaços de trabalho aprimorados
Os espaços de trabalho, em particular, são um recurso que pode simplificar bastante o fluxo de trabalho de criação. No entanto, ele não recebe tanto amor quanto merece. Com os espaços de trabalho, em vez de experimentar e fazer mudanças no DevTools e ter que copiar e colar as mudanças de volta nos arquivos de origem, você pode fazer mudanças no DevTools, vê-las renderizadas no navegador e salvá-las em uma versão local persistente dos arquivos, tudo sem sair do Chrome.
Se você ainda não leu o artigo Revoluções nas Ferramentas do desenvolvedor do Chrome de 2013, leia-o e volte aqui para saber como melhoramos esses recursos nos últimos meses.
Adicionar arquivos com mais facilidade
No artigo Revolutions de 2013, criar um novo espaço de trabalho exigia adicionar a pasta aos espaços de trabalho e mapeá-la a um recurso de rede. Simplificamos esse processo para uma única etapa: basta clicar com o botão direito do mouse no painel esquerdo de fontes e selecionar Adicionar pasta ao espaço de trabalho. Isso abre uma caixa de diálogo de arquivo em que você pode escolher uma nova pasta para adicionar aos Workspaces. A pasta destacada não é adicionada aos seus espaços de trabalho.
Como criar e remover arquivos
Agora você pode adicionar novos arquivos ao diretório local que está usando para o Workspaces no próprio Workspaces. Basta clicar com o botão direito do mouse em uma pasta no painel "Sources" à esquerda e selecionar New File.
Também é possível remover arquivos no Workspaces. Clique com o botão direito do mouse em um arquivo no painel de origens à esquerda e selecione Excluir arquivo.
Também é possível duplicar um arquivo selecionando Duplicar arquivo.
Atualizar
Agora que você pode criar ou excluir arquivos diretamente nos espaços de trabalho, o diretório de fontes também vai ser atualizado automaticamente e mostrar esses novos arquivos. Caso contrário, clique com o botão direito do mouse em uma pasta e selecione Atualizar no menu pop-up para forçar a atualização.
Isso também é útil se você mudar os arquivos abertos em outro editor e quiser que as mudanças apareçam no DevTools.
Pesquisar em arquivos
Aprimoramos um pouco a interface de pesquisa em arquivos. Agora você também pode pesquisar strings em todos os arquivos dos seus espaços de trabalho, bem como em todos os arquivos carregados no DevTools. Você pode pesquisar uma string ou uma expressão regular, e nós fazemos a correspondência de cada ocorrência em cada arquivo ou página. Para pesquisar vários arquivos no Workspaces (atualmente no Canary):
- Abra a gaveta do console pressionando a tecla Escape e clique na guia Search ao lado de Console para abrir a janela de pesquisa.
OU
Pressione Ctrl + Shift + F (Cmd + Opt + F no Mac) para abrir a janela de pesquisa.
- Digite sua consulta na caixa Search Sources e pressione Enter. Se a consulta for uma expressão regular ou precisar ser sem distinção entre maiúsculas e minúsculas, clique na caixa apropriada.
Listas de ignorados
Pesquisar o texto dos arquivos ou filtrar os nomes de arquivos pode ser muito tedioso se você tiver muitos arquivos .git ou README.md poluindo seus resultados.
Por isso, adicionamos um recurso de lista de ignorados aos Workspaces para que você possa excluir certos tipos de arquivos ou pastas ao visualizar e pesquisar no seu espaço de trabalho.
Confira como visualizar e mudar a lista de ignorados compartilhada atual no Workspaces:
- Abra as Configurações do DevTools.
- Clique em Espaço de trabalho.
- Em Common, na caixa Folder exclude pattern, é possível visualizar e/ou editar os padrões.
Enviamos estes padrões de exclusão globais padrão:
Essa regex exclui metadados do Git, SVN, Mercurial, arquivos de projeto do Eclipse e IntelliJ, arquivos de lixeira e DS_Store do OS X e algumas outras coisas que valem a pena ignorar, como o cache do Sass. A pasta inteira, incluindo as filhas, é excluída da interface para não aparecer nela e não aparecer ao procurar arquivos.
Listas de ignorados específicas do espaço de trabalho
Para ser mais específico, você também pode excluir arquivos e pastas do seu espaço de trabalho para reduzir a desordem nas pesquisas. As pastas excluídas também não vão aparecer no diretório de fontes.
Para excluir uma pasta inteira do seu espaço de trabalho, clique com o botão direito do mouse na pasta no painel de fontes à esquerda e selecione Excluir pasta. Para conferir os mapeamentos e as pastas excluídas de uma determinada pasta do espaço de trabalho:
- Abra as configurações do DevTools.
- Clique em Espaço de trabalho.
- Destaque a pasta do seu interesse.
- Clique em Editar e a janela "Editar sistema de arquivos" vai aparecer. Você pode adicionar ou remover mapeamentos e/ou pastas excluídas nessa janela.
