O Google Chrome é um dos navegadores da web populares para desenvolvimento na web, devido aos recursos avançados. Ferramentas para desenvolvedores do Chrome pode ser muito útil 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
Existem muitos truques desconhecidos e ocultos do Chrome Dev Tools e nós estaremos observando os truques mais úteis entre eles. Para abrir as ferramentas do desenvolvedor no Chrome, pressione F12 no seu 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. Ir para linha particular
Depois de abrir qualquer arquivo de origem e desejar mover para uma linha específica, pressione Ctrl + G e dê o número da linha e aperte 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 a matriz de elementos correspondentes ao seletor de CSS fornecido.
5. Faça uso de múltiplos carets
Às vezes, você quer definir os vários carets em lugares diferentes e pode fazer isso facilmente nas ferramentas do Chrome Dev, mantendo Ctrl chave e clicando onde você deseja colocá-los. Então comece a escrever e você verá que é colocado em vários lugares selecionados.
6. Preserve Log
Preserve log ajuda você a persistir o log até mesmo a página é carregada. Marque a opção ao lado 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 bugs.
7. Use o embelezador de código embutido
O Chrome Dev Tools possui o embelezador de código interno chamado impressão bonita “{}”. A ferramenta Developer 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 por humanos.
8. 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 abaixo Emulação guia, você pode arquivar vários dispositivos. Selecione o dispositivo desejado e teste a aparência do site nesse dispositivo.
9. Emular sensores e localização geográfica
Você pode até mesmo emular os sensores, como tela sensível ao toque e acelerômetros. Você pode até mesmo emular a localização geográfica. Para fazer isso, vá para Emulação -> Sensores.
10. Selecione a próxima ocorrência da palavra atual
Se você 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
Apenas use Shift + Clique na visualização de cores para alterar altera entre rgba, hexadecimal e hsl.
12. Adicione alterações aos arquivos locais por meio da área 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 no arquivo fonte no lado esquerdo do Fontes aba e selecione Adicionar pasta ao espaço de trabalho.
Para mais informações sobre espaços de trabalho, acesse o Chrome.com.
