Chrome Development Tools Tips for Windows

Google Chrome is one of the popular web browsers for web development, due to it’s 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 which we will share with you today.

Chrome Dev Tools Tips and Tricks

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 list of files.

find files

2. Search within source file

In 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.

Search within files

3. Go to particular line

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

Go to line

4. Selecting DOM Elements in Console tab

Dev Tools also allows you to select elements in console.

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

Selecting DOM Elements

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.

Make use of multiple carets

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.

preserve log

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. 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.

pretty print button

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 in that device.

mobile friendly

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

9. Emulate Sensors and Geographical Location

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

emulate sensors

10. Select next occurrence of the current word

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

Multiselect

11. Alter Color Format

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

colorformat

12. Add changes to local files through workspace

We are able to edit source files and making some changes in CSS, Java Script and in other files in Chrome Dev tools. To add these changes to the local files, then here 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.

For more information on workspaces, head over to Chrome.com.

Posted by on , in Category General with Tags
Sridhar is a Software Engineer who loves to stay updated with developments in the world of technology. He is fond of writing everything related to Internet, Computers and Mobile and Desktop Operating Systems.