16 Chrome DevTools Tips That You Can Use In Your Project

Posted on - Last Modified on

One of the most powerful browsers for developers is Google Chrome. This is down to features which are convenient and helpful in web development projects. However, most developers are just conversant with the browser’s usual features i.e. the debugger, console and the ever-so-helpful live editing CSS feature.

To make your web development work easier we’ve compiled a list of 16 DevTools tips that might be helpful while tackling your next freelancer project.

1. On-page text editing

Google Chrome has a live text-editing feature that few web developers know about. This feature allows you to type and see how your text can look on your browser. To do this, go to the console tab and type in document.designMode = 'on'. Then press Enter to open the on-screen text editing mode. You won’t be able to save your edits but it is a great way of figuring out which particular texts will fit in your project.

2. Font check

Sometimes it’s not easy to know which particular font is rendered whenever you load your page. Google Chrome has a feature that allows you to find out. Go to the bottom of the Chrome DevTools page, and select the Compute Tab. Here you will be able to see the font  being used.

3. Inspecting animation

Most web developers have adopted element animation to make their work more appealing to end users. You’re now able to use Chrome’s DevTools to inspect your animations in order to find the right fit for your project.

To use this feature, go to the vertical ellipsis at the top right corner of DevTools. Select More tools, then Animation, and you’ll see three options: 100%, 25% and 10%. You can use these to control the speed of your animations.

4. Fast switching between files

Developers who use Sublime Text understand how easy it can be to open files within their project (without having to move their cursor on the screen endlessly). Chrome’s DevTools has a similar functionality as well. If you want to switch between files within the same project, press Ctrl + P (on Windows) or Command + P (on Mac). This allows you to search for your file, then select it from a drop-down list.

5. Source code searching

Apart from file switching, you’re also able to search for a particular string of code through DevTools. In order to do this, press Ctrl + Shift + F (on Windows) or Command + Opt + F (on Mac). This will let you search for that particular string in all files loaded. You can also search for regular expressions with this method.

6. Element state edit

Most CSS codes nowadays incorporate element states. If you want to live-edit your element state in order to check performance, you can simply use DevTools. Just go to the Elements tab, check to see whether the lower table is on Styles. Select the cursor pointing to a dotted rectangular box. From here you can select which state you want to edit.

7. Elements selection in console

You can select elements easily while using the DevTools console. To do this, you must have knowledge of some of the console commands. Here are two common commands:

$() which can also be written document.querySelector(). This command allows you to search for the first element that matches a CSS selector.

$$() which can also be written document.querySelectorAll(). This command allows you to search for an array of elements that match that particular CSS selector.

8. Convenient screenshots

Have you ever been in a position where you need to take a screenshot of a particular web page? If yes, there is a high chance that you had to install a Chrome extension to do it. Did you know Chrome has its own screenshot capability embedded in DevTools? You can even capture screenshots when you are in device mode. The screenshot will capture the device frame as well.

To do this just press Ctrl + Shift + M (on Windows) or Command + Opt + M (on Mac). Select the vertical ellipsis on the right, then select capture screenshot or capture full size screenshot, depending on your preference.

9. Color tools

A simple way of experimenting with colors while using Chrome DevTools is by making use of the Color Picker. You can change the color of an element by selecting any other element on the page, or a palette of colors already being used. This way, you don’t have to be constantly copying and pasting colors from other elements. The other good thing about the Color Picker is its pixel accuracy when selecting colors.

Try it out today on one of the thousands of web design and development projects on Freelancer.  

10. Multiple code selection points and simultaneous edits

Another Sublime Text feature that is included in DevTools is the use of multiple carets and selections for simultaneous edits on your code. To do this you must first set multiple carets by holding Ctrl (on Windows) or Command (on Mac) then clicking on areas where you want to edit simultaneously. This will allow you to edit multiple code points at the same time.

11. Making a minified file readable

DevTools has a feature that allows developers to change code into a human readable format. This is quite useful when dealing with JavaScript code. To make your minified file readable, go to the Sources tab. Select the file, then in the bottom left area of your file find {} and click it.

12. Network filtering

If you are checking on the performance of your web project when it renders in your browser, you can take advantage of network filtering. This is especially helpful if your site also has ads, because there’s a large list of things that will pop up. In order for you to shorten the list to the desired elements, you can filter by holding Ctrl (on Windows) or Command (on Mac), and then filter by either the asset type or domain.

13. Device simulation

DevTools has a great feature for simulating your site on devices. Device mode allows you to see how device sensors, like accelerometers and touch screens, can work when using your site. The analytics here are not rock solid, so you might want to try and do tests on the devices concerned as well, in order to confirm your site rendering capabilities.

14. Selection tool

Whenever you are editing in the Sources tab, you can simply press Ctrl + D (on Windows) or Command + D (on Mac). By doing so, all the occurrences of a particular word can be selected, thereby making it easy for you to edit them simultaneously.

15. Filmstrip mode

For more performance utilities, check out the Filmstrip mode. It can capture screenshots during page loading, including individual timecodes as to when it was captured. This lets you focus on what the user gets to see when your page loads.

16. Preserve Log

Last but definitely not least is the Preserve Log. There are instances where you want to check the log of your site whenever it loads, but it keeps starting all over again. By checking this option, all your log information will be preserved - even on page refresh.

We hope that this article has given you great insights as to how you can use Chrome DevTools in your work. Have you used DevTools? Did you pick up some new tips from this article? Let us know your experience in the comments box!


Posted 17 August, 2017


Software Developer

Lucy is the Development & Programming Correspondent for Freelancer.com. She is currently based in Sydney.

Next Article

Expose Our Logo 2017: How To Win the Grand Prize and the Special Awards