Ferramentas de desenvolvimento do Chrome Tutoriais, dicas, truques

As Ferramentas do desenvolvedor do Chrome podem ser muito úteis durante a depuração. A maioria de nós já sabe que podemos editar o CSS ao vivo usando o Chrome Dev Tools, mas há mais dicas que compartilharemos com você hoje. Dicas de ferramentas de desenvolvimento do Chrome

Há muitos truques desconhecidos e ocultos do Chrome Dev Ferramentas e nós estaremos olhando para os truques mais úteis entre eles. Para abrir as ferramentas do desenvolvedor no Chrome, pressione

F12 no teclado e experimente os seguintes truques: 1. Encontre e abra qualquer arquivo

Quando estamos fazendo o desenvolvimento web, lidamos com muitos arquivos HTML, CSS, JS e outros. Quando queremos depurar qualquer coisa, abrimos as ferramentas do Chrome Dev. Você pode pesquisar rapidamente e encontrar o arquivo específico para facilitar seu trabalho. Apenas pressione

Ctrl + P e comece a digitar o nome do arquivo. Isso ajuda você a encontrar o arquivo específico da lista de arquivos. 2. Pesquisar no arquivo de origem

No truque anterior, ficamos sabendo como procurar um determinado arquivo. Você pode até procurar por uma string específica em todos os arquivos carregados. Pressione

Ctrl + Shift + F para procurar uma string em arquivos. Também suporta expressões regulares. 3. Vá para a linha particular

Depois de abrir qualquer arquivo de origem e quiser mover para uma linha em particular, pressione

Ctrl + G , digite o número da linha e pressione Enter. 4. Selecionando Elementos DOM na guia Console

O Dev Tools também permite selecionar elementos no console

$ () -

• Retorna a primeira ocorrência do seletor CSS correspondente. $$ () -
• Ele retorna o array de elementos que combinam com o seletor de CSS dado. Para mais comandos do console, vá para este post.

5. Faça uso de vários carets

Às vezes, você deseja definir os vários carets em locais diferentes e pode fazer isso facilmente nas ferramentas do Chrome Dev mantendo pressionada a tecla

Ctrl e clicando onde deseja colocá-los. Então comece a escrever e você verá que é colocado em vários lugares selecionados. 6. Preservar log

Preservar log ajuda a persistir o log, mesmo que a página seja carregada. Marque a opção ao lado de

Preservar log no log do console e o log é preservado. Isso mostra o log antes da página em descarregado e útil para investigar os erros. 7. Use o embelezador de código interno

O Chrome Dev Tools tem o embelezador de código interno chamado

pretty print “{}”. A Developer tool mostra o código minimizado e não é tão fácil de ler. Clique no bonito botão de impressão que é mostrado no canto inferior esquerdo do arquivo de código aberto, para mostrar o arquivo de origem no formato legível. O seu site é compatível com dispositivos móveis? Confira aqui

O Chrome Dev Tools também nos permite verificar se um site é compatível com dispositivos móveis ou não. Você pode verificar a aparência do seu site em vários dispositivos. Vá até as ferramentas do Chrome Dev e na guia

Emulação , você pode arquivar vários dispositivos. Selecione o dispositivo desejado e teste a aparência do site nesse dispositivo. Para obter mais informações, veja o seguinte vídeo.

9. Emular sensores e localização geográfica

Você pode até emular os sensores, como a tela sensível ao toque e os acelerômetros. Você pode até mesmo emular a localização geográfica. Para fazer isso, vá para

Emulation -> Sensors. 10. Selecione a próxima ocorrência da palavra atual

Se quiser substituir a palavra Em todas as ocorrências, selecione a palavra e pressione

Ctrl + D para selecionar a próxima ocorrência da palavra selecionada. Você pode editar essa palavra em todas as ocorrências de uma só vez. 11. Alter Color Format

Basta usar

Shift + Click na pré-visualização das cores para alterar os nomes entre rgba, hexadecimal e hsl. 12. Adicione alterações a arquivos locais por meio do espaço de trabalho

Podemos editar os arquivos de origem e fazer algumas alterações no CSS, no Java Script e em outros arquivos nas ferramentas do Chrome Dev. Para adicionar essas alterações aos arquivos locais, não é necessário copiar as alterações da área de trabalho para os arquivos no disco. As ferramentas do Chrome Dev permitem corresponder arquivos e atualizar o arquivo local com as alterações feitas nas ferramentas de desenvolvimento. Para fazer isso, clique com o botão direito do mouse no arquivo de origem, à esquerda, na guia

Sources e selecione Add Folder to workspace. Para obter mais informações sobre espaços de trabalho, acesse Chrome.com.