O Google Chrome^{(Google Chrome)} é um dos navegadores mais populares para desenvolvimento web, devido aos seus recursos avançados. As Ferramentas do Desenvolvedor do Chrome^{(Chrome Developer Tools)} 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 das ferramentas de desenvolvimento do Chrome

Existem muitos truques desconhecidos e ocultos do Chrome Dev Tools e vamos analisar 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 desenvolvendo web lidamos com muitos arquivos HTML^(HTML) , CSS , JS e outros. Quando queremos depurar qualquer coisa, abrimos as ferramentas Chrome Dev . Você pode pesquisar e encontrar rapidamente o arquivo específico para facilitar seu trabalho. Basta^(Just) pressionar Ctrl + P e começar a digitar o nome do arquivo. Isso ajuda você a encontrar o arquivo específico na lista de arquivos.

2. Pesquise no arquivo de origem

No truque anterior, aprendemos como procurar um arquivo específico. Você pode até procurar uma string específica em todos os arquivos carregados. Pressione Ctrl + Shift + F para procurar uma string nos arquivos. Ele também suporta expressões regulares.

3. Vá para uma linha específica

Depois de abrir qualquer arquivo de origem e desejar mover para uma linha específica, pressione Ctrl + G e forneça o número da linha e pressione enter.

4. Selecionando elementos DOM na guia Console

Dev Tools também permite selecionar elementos no console.

• $() – Retorna^(Returns) a primeira ocorrência do seletor CSS correspondente.^(CSS)
• $$() – Retorna a matriz de elementos que correspondem ao seletor CSS fornecido.^(CSS)

Para mais comandos do console, acesse este post.^{(this post.)}

5. Faça uso de vários acentos circunflexos

Às vezes, você deseja definir os vários cursores em locais diferentes e pode fazer isso facilmente nas ferramentas do Chrome Dev , mantendo pressionada a tecla ^{(Chrome Dev)}Ctrl e clicando onde deseja colocá-los. Então comece a escrever e você verá que é colocado em vários lugares selecionados.

6. Preservar Registro

Preservar^(Preserve) log ajuda você a manter o log mesmo que a página seja carregada. Marque a opção ao lado de Preservar log^{(Preserve log )} no log do console e o log será preservado. Isso mostra o log antes da página descarregada e útil para investigar os bugs.

7. Use o embelezador de código integrado

O Chrome Dev Tools^{(Chrome Dev Tools)} tem o embelezador de código integrado chamado pretty print “{}” . A ferramenta do desenvolvedor mostra o código minimizado e não é tão fácil de ler. Clique^(Click) no botão bonito de impressão que é mostrado no canto inferior esquerdo do arquivo de origem aberto, para mostrar o arquivo de origem no formato legível por humanos.

8. Seu site é compatível com dispositivos móveis? Confira aqui

O Chrome Dev Tools^{(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á para as ferramentas do Chrome Dev e, na guia ^{(Chrome Dev)}Emulação^{(Emulation )} , você pode arquivar vários dispositivos. Selecione o dispositivo desejado e teste a aparência do seu site nesse dispositivo.

Para mais informações, dê uma olhada no vídeo a seguir.

9. Emular sensores e localização geográfica^{(Geographical Location)}

Você pode até emular os sensores como telas sensíveis ao toque e acelerômetros. Você pode até emular a localização geográfica. Para fazer isso, vá para Emulation -> Sensors.

10. Selecione a próxima ocorrência da palavra atual

Se você deseja substituir a palavra em todas as suas ocorrências, selecione a palavra e pressione Ctrl + D para selecionar a próxima ocorrência da palavra selecionada. Em seguida, você pode editar essa palavra em todas as suas ocorrências de uma só vez.

11. Alterar formato de cor

Basta usar Shift + Click na visualização da cor para alterar a formatação entre rgba, hexadecimal e hsl.

12. Adicione^(Add) alterações em arquivos locais por meio do espaço de trabalho

Podemos editar arquivos de origem e fazer algumas alterações em CSS , JavaScript e outros arquivos nas ferramentas do Chrome Dev . Para adicionar essas alterações aos arquivos locais, não há necessidade de copiar e colar as alterações do espaço de trabalho para os arquivos no disco. As ferramentas de desenvolvimento do Chrome^{(Chrome Dev)} permitem que você combine arquivos e atualize 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 no lado esquerdo da guia Fontes e selecione ^{(Sources )}Adicionar pasta ao espaço de trabalho.^{(Add Folder to workspace.)}

Espero que isto ajude.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the pоpular web browsers for web development, due tо its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Melhor Google Chrome Tips and Tricks para Usuários Windows PC

• 3 dicas e truques úteis para usar notas autoadesivas

• Como baixar um Font de um Website usando Developer Tools

• Restart Chrome, Edge or Firefox sem perder guias em Windows 11/10

• Dicas sobre o uso do Inspect Element de Google Chrome browser

• Como alterar o search engine em Chrome para Windows, Macos, Android e iOS

• Como bloquear cookies de terceiros em Chrome, Firefox, Edge e Opera

• Como Fix Twitch Error 2000 em Google Chrome

• Como ir incógnito em Chrome, Firefox, Edge e Opera

• Como parar o Chrome de pedir para salvar senhas

• Put Chrome & outros navegadores em tela cheia (Edge, Firefox e Opera)

• Como enviar um texto do computador com mensagens Android

• Combine tudo Your Email Accounts em um Gmail Inbox

• 20+ Hidden Google Games Você precisa jogar (2021)

• Como obter Rid de Yahoo Search em Chrome

• Como postar fotos no Instagram de um PC

• Como configurar um servidor proxy no Chrome, Firefox, Edge e Opera

• Ativar Flash para Specific Websites em Chrome

• Exporte senhas do Chrome, Firefox, Opera, Microsoft Edge e Internet Explorer

• Como usar o celular browser emulator em Chrome, Firefox, Edge e Opera