O Chrome DevTools é muito rápido e queremos chamar sua atenção para algumas novas funcionalidades e melhorias que introduzimos em alguns componentes. Ou seja, vamos discutir algumas mudanças na interface, a criação de perfis do JS em alta resolução e os novos recursos do Workspace.
- Agora a criação de perfil de alta resolução tem precisão de 0,1 milissegundo
- As barras de ferramentas subiram para o topo do Devtools e as Overrides foram movidas para a gaveta do console.
- Vários recursos foram adicionados aos espaços de trabalho para permitir a adição/remoção/pesquisa de arquivos
Criação de perfil em alta resolução
A criação de perfil da CPU é um recurso muito útil para conferir a eficiência do seu JavaScript. Além das visualizações de perfil tradicionais, lançamos o Flame Chart neste verão, que representa visualmente o processamento de JavaScript de uma página ao longo do tempo. Ele pode ser usado para visualizar facilmente a profundidade da pilha de chamadas e o tempo de processamento de funções individuais.
Até recentemente, as representações tradicionais de heavy (de baixo para cima) e de árvore (de cima para baixo) e do Flame Chart só mostravam processos com precisão de 1 milissegundo. Para a maioria dos aplicativos, isso não é um problema. No entanto, se você estiver trabalhando em algo em que a velocidade realmente importa na interface, como em um jogo, a resolução de 1 milissegundo pode ser muito ruim para gerar resultados significativos sobre o que está fazendo com que seu site fique lento ou a interface pareça lenta. Para ativar a criação de perfil em alta resolução (atualmente somente Canary):
- Abra as configurações do DevTools.
- Na guia Geral, em Criador de perfil, ative a Criação de perfil de CPU de alta resolução.
Aqui está um exemplo de Flame Chart visto em criação de perfil normal e com alta resolução, no qual apresentamos o perfil de carregamento da página inicial do HTML5Rocks.com:
Com a resolução normal de criação de perfil, o tempo de processamento sempre é arredondado para o próximo milissegundo. Portanto, um processo que leva apenas 0,1 milissegundos ou menos ainda é relatado como tendo 1,0 milissegundos, e outros processos podem não ser mostrados na pilha de chamadas.
A criação de perfil de alta resolução tem uma grande sobrecarga na VM JavaScript. Por isso, ela fica desativada por padrão. Embora pareça mais frio do que a resolução de criação de perfil normal, recomendamos usá-la apenas se você realmente precisar da precisão.
Melhorias na interface do Devtools
Embora sempre haja novidades sendo lançadas no Canary, queremos chamar a atenção para algumas mudanças importantes na interface: botões na parte de cima da interface em geral, os painéis de navegação e informações da linha do tempo e a realocação de substituições para a gaveta do console.
Primeiro, vamos entender de onde paramos. Como estamos falando sobre a Linha do tempo de qualquer maneira, vou tentar matar os dois primeiros pássaros com um par de capturas de tela. No momento, esta é a aparência da linha do tempo no Chrome (estável):
Veja como está a linha do tempo agora.
Observe o seguinte:
- As barras de ferramentas e botões agora estão na parte superior da tela, tanto para os Timeline específicos à esquerda quanto para os 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 para rolar para cima e para baixo, também é possível usar as teclas esquerda e direita para abrir e fechar registros aninhados.
- Os detalhes de horário agora são exibidos em um painel à direita da entrada selecionada. Você também pode passar o cursor sobre outras entradas para ver as informações delas.
Agora, vamos dar uma olhada na gaveta do console. Para abrir a gaveta do console, pressione
Esc no DevTools ou pressione o botão da gaveta do console
.
A gaveta rolará de baixo para cima.
Por padrão, você terá as guias Console e Pesquisa. Para acessar a funcionalidade anteriormente conhecida como Overrides, abra as configurações do DevTools e marque a caixa ao lado de "Show 'Emulation' view in console drawer". Feche a caixa de configurações. Você verá uma guia Emulation na gaveta do console, como a captura de tela aqui:
E você pode fazer toda a emulação lá.
O motivo dessa mudança é que, antes, você teria que entrar e sair das Configurações para mudar as substituições de emulação, além de voltar e visualizar a página. Agora é possível mudar as substituições de emulação enquanto ainda manipula estilos.
Espaços de trabalho aprimorados
O Workspace em particular é um recurso que simplifica bastante o fluxo de trabalho de criação, mas ele não recebe tanto amor quanto merece. Com os espaços de trabalho, em vez de testar e fazer alterações no DevTools e ter que copiar e colar as mudanças nos arquivos de origem, você pode fazer alterações no DevTools, vê-las renderizadas no navegador e salvá-las em uma versão local permanente dos seus arquivos, tudo sem sair do Chrome.
Se você ainda não leu o artigo Revolução das Ferramentas para Desenvolvedores do Chrome 2013, leia o artigo e depois volte aqui para saber como melhoramos esses recursos nos últimos meses.
Adição de arquivos com mais facilidade
Na época do artigo Revolutions 2013, criar um novo espaço de trabalho exigia adicionar a pasta aos espaços de trabalho e mapear a pasta para um recurso de rede. Simplificamos esse processo em uma única etapa: clique com o botão direito do mouse no painel esquerdo de "Origens" e selecione Adicionar pasta ao espaço de trabalho. Isso abre uma caixa de diálogo de arquivo em que é possível escolher uma nova pasta para adicionar aos seus espaços de trabalho. Isso não adiciona a pasta destacada no momento aos seus espaços de trabalho.
Criação e remoção de arquivos
Agora é possível adicionar novos arquivos ao diretório local que você está usando nos próprios espaços de trabalho. Basta clicar com o botão direito do mouse em uma pasta no painel esquerdo do Sources e selecionar New File.
Também é possível remover arquivos dos espaços de trabalho. Clique com o botão direito do mouse em um arquivo no painel esquerdo "Origens" e selecione Excluir arquivo.
Você também pode duplicar um arquivo selecionando Duplicar arquivo.
Atualizar
Agora que você pode criar ou excluir arquivos diretamente nos espaços de trabalho, o diretório "Sources" também será atualizado automaticamente e mostrar os 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 uma atualização.
Isso também será útil se você mudar os arquivos abertos em outro editor e quiser que as mudanças apareçam no DevTools.
Pesquisar nos arquivos
Refinamos um pouco a interface de pesquisa em arquivos. Agora, você também pode pesquisar strings em todos os arquivos dos espaços de trabalho e 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 todas as ocorrências em todos os arquivos ou páginas. Para pesquisar vários arquivos no Workspace (atualmente no Canary):
- Abra a gaveta do console pressionando a tecla Esc e clique na guia Pesquisa ao lado de Console para abrir a janela de pesquisa.
OR
Pressione Ctrl + Shift + F (Cmd + Opt + F no Mac) para abrir a janela de pesquisa.
- Digite sua consulta na caixa Origens de pesquisa e pressione Enter. Se a consulta for uma expressão regular ou não diferenciar maiúsculas de minúsculas, clique na caixa apropriada.
Ignorar listas
Pesquisar no texto de arquivos ou filtrar nomes de arquivos pode ser muito cansativo se você tiver muitos arquivos .git ou README.md baguntando nos resultados.
Por isso, adicionamos um recurso de lista de ignorados aos espaços de trabalho para que você possa excluir determinados tipos de arquivo ou pastas ao visualizar e pesquisar seu espaço de trabalho.
Saiba como acessar e alterar a lista de ignorados atual compartilhada nos espaços de trabalho:
- Abra as Configurações do DevTools.
- Clique em Espaço de trabalho.
- Em Comum, na caixa Padrão de exclusão de pasta, é possível ver e/ou editar os padrões.
Enviamos os seguintes padrões globais de exclusão globais:
Esse regex exclui metadados de arquivos do Git, SVN, Mercurial, de arquivos de projeto do Eclipse, IntelliJ, OS X DS_Store e da lixeira, além de alguns outros itens que podem ser ignorados, como o cache do Sass. A pasta inteira, incluindo todos os filhos, é excluída da interface para não aparecer na interface nem ao pesquisar arquivos.
Listas de ignorados específicas do espaço de trabalho
Para ser mais específico, também é possível excluir arquivos e pastas dentro do seu espaço de trabalho específico para reduzir a sobrecarga nas pesquisas. As pastas excluídas também não serão exibidas no diretório de origens.
Para excluir uma pasta inteira do espaço de trabalho, clique com o botão direito do mouse na pasta, no painel esquerdo, 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 em que você tem interesse.
- Clique em Editar e a janela "Editar sistema de arquivos" vai aparecer. É possível adicionar ou remover mapeamentos e/ou pastas excluídas da janela.
