15 Dicas para desenvolver utilizando o Chrome DevTools

12:19

Tutorial de como aumentar sua produtividade ao trabalhar com os recursos do Google Chrome DevTools. São 15 dicas que nem todos os desenvolvedores conhecem e que sem dúvida, já precisaram em algum momento. Este artigo é uma tradução de 15 Must-Know Chrome DevTools Tips and Tricks.

1. Alternar rapidamente entre arquivos

Se você já usou Sublime Text, provavelmente você não pode viver sem “Go to anything”, este é um recurso essencial para alternar entre arquivos com uma simples pesquisa. Para utilizar, basta pressionar Ctrl + P (Cmd + P no Mac) quando DevTools estiver aberto, para procurar rapidamente e abrir qualquer arquivo no seu projeto.

1

2. Pesquisa no código fonte

Muitas vezes precisamos pesquisar uma determinada variável, função ou qualquer outro pedaço de código e não sabemos por onde começar. Com este recurso você pesquisará em todos os arquivos carregados de um website. Para pesquisar em todos os arquivos, pressione Ctrl + Shift + F (Cmd + Opt + F no Mac). Uma dica é utilizar expressões regulares.

2.SearchAll

3. Ir para linha desejada

Depois que você abriu um arquivo na guia Fontes (Sources), você poderá navegar para qualquer linha pressionando Ctrl + G para Windows e Linux, (ou Cmd + L para Mac), depois digite o número da linha e pressione Enter.

3.JumpToLine

 

Outra maneira de fazer isso é pressionar Ctrl + O  e em vez de procurar um arquivo, digite “:”, seguido do número da linha desejada.

4. Selecionando elementos no console

O console DevTools suporta algumas variáveis e funções mágicas para seleção de elementos DOM:

  • $() – Atalho para document.querySelector(). Retorna o primeiro elemento, combinando com um seletor CSS (por exemplo $(‘div’) irá retornar o primeiro elemento div na página).
  • $$() – Atalho para document.querySelectorAll(). Retorna um array com todos elementos que condizem com o seletor css.
  • O histórico dos cinco últimos elementos DOM selecionados no painel de elementos, $0 sendo o último acessado.

4.$$()

Para aprender um pouco mais sobre os comandos do Console, leia Command Line API.

5. Utilizando múltiplas seleções

Outra característica do Sublime Text que é muito útil aparece novamente. Durante a edição de um arquivo você pode definir vários pontos de escrita/alteração, segue a tecla Ctrl (Cmd para Mac) e clique onde deseja iniciar a escrita, permitindo assim que você escreva em muitos lugares ao mesmo tempo. Também é possível selecionar textos segurança a tecla Ctrl e depois escrever “por cima” de forma que altere vários locais ao mesmo tempo.

5.MultipleSelectClick

6. Preservando log

Ao marcar a opção Preservar Log na guia Console, você pode fazer o DevTools Console persistir o log em vez de limpá-lo em cada carregamento da página. Isso é útil quando você quer investigar bugs, que aparecem apenas antes da página ser descarregada.

6.PreserveLog

7. Formatação de Código {}

DevTools tem um built-in de código “beautifier” que irá ajudá-lo a retornar código minimizado ao seu formato humanamente legível. O botão “Pretty Print” está localizado no canto inferior esquerdo do seu arquivo atualmente aberto na guia Fontes. Não é necessário instalar nenhum plugin para utilizar esta funcionalidade.

7.PrettyPrint

8. Dispositivos móveis

DevTools inclui um modo poderoso para o desenvolvimento de páginas para dispositivos móveis. Este vídeo do Google mostra a maioria de suas funcionalidades, tais como redimensionamento de tela, emulação de toque e simulador de problemas de rede.

9. Sensores de emulação de dispositivo

Outro recurso interessante do modo de dispositivos móveis é a opção para simular sensores, é possível simular telas sensíveis ao toque e acelerômetros. Você pode até mesmo falsificar sua localização geográfica. O recurso está localizado na parte inferior da guia Elementos(Elements) em Emulação(Emulation) -> Sensores(Sensors).

9.Sensors

10. Seleção de cores

Ao clicar para selecionar uma cor no editor de estilos (CSS), será aberto uma tela para selecionar a cor, mas, se você passar o mouse sobre a sua página, o ponteiro do mouse se transformará em uma lupa para selecionar cores com precisão de pixels.

10.ColorPicker

11. Forçar um estado de elemento

DevTools possui um recurso que simula os estados CSS como :hover, :focus, :visited ou :active, fazendo ser fácil a estilização com este recurso. Esta opção está acessível pelo editor CSS do DevTools.

11.SimulateHover

12. Visualize o Shadow DOM

Os navegadores constroem componentes caixas de texto, botões e entradas a partir de outros elementos básicos que são normalmente escondido, um exemplo é o elemento Input do tipo Range que cria um item deslizante. Agora será possível ver o item criado pelo navegador, será necessário ir a Configurações(Settings) -> Geral(General) -> Elementos (Elements) e marcar a opção “Show user agent shadow DOM”. Você pode até mesmo estilar os itens, o que lhe trás novos recursos de controle CSS.

12.ShadowDOM

13. Selecionar próxima ocorrência

Se você pressionar Ctrl + D (Cmd + D no Mac) durante a edição de arquivos na guia Fontes, a próxima ocorrência da palavra atual será selecionada, assim você poderá editar vários itens simultaneamente.

13.MultiSelect

14. Alterar formato da cor

Utlize Shift + Clique na visualização de cores para alterar entre RGBA, HSL e formatação hexadecimal.

14.ColorFormat

15. Edição de arquivos locais através de espaços de trabalho

Espaços de trabalho (Workspaces) é um poderoso recurso do Chrome DevTools  que o transforma em um IDE em tempo real. Workspaces devem coincidir com os arquivos na guia Fontes a seus arquivos de projetos locais, assim, você poderá editar e salvar diretamente no navegador, sem ter que copiar/colar as alterações em um editor de texto externo.

Para configurar, vá para a aba Fontes e clique com o botão direito em qualquer lugar no painel esquerdo (onde os fontes estão) e escolha “Adicionar pasta Para Worskpace”, depois selecione a pasta correspondente, ou, simplesmente arraste e solte a pasta do projeto inteiro em Ferramentas de Desenvolvimento. Agora, selecione a pasta escolhida e entre em seus sub-diretórios e todos os arquivos neles estará disponível para edição, não importa em que página você está. Para torná-lo ainda mais útil, então você pode mapear os arquivos em sua pasta aos utilizados pela página, permitindo a edição ao vivo.