header thumbnail image

Must-know DevTools Tips and Tricks  

February 2, 2017 - fifteen

As a developer who uses Google Chrome as their primary browser to develop with, it’s really beneficial to be aware of all of the tools Chrome offers developers to work with their code in a powerful way. Understanding all of the tools and knowing how to use them efficiently is something really worth learning as it will help improve your productivity massively when developing a site.

Let’s discuss some of the most powerful and useful developer tools you may not be aware exist and how they can really help your workflow.

But for some of you, who may not know what the DevTools are, let’s discuss the basics. Every browser offers DevTools. It allows you to inspect the HTML, CSS, JavaScript and other components of your site. It’s a really powerful tool that allows you to edit your websites code in real time, without having an effect on the real files themselves. Essentially, it is incredibly useful for trying out new code and modifying existing code to alter it in a way that satisfies your needs, before changing the real files for the site.

You can access the DevTools in a few ways, one of the easiest is by right clicking anywhere on a website and pressing ‘Inspect’. Alternatively, you can use keyboard shortcuts including ‘CMD + ALT + I’ on a Mac or ‘F12’ on a Windows PC.

Fifteen Homepage Code

Device Mode

The device mode on Google Chrome is my favourite tool on offer. It’s an amazing and powerful tool that allows you to view a website as it would appear on a different device by simulating the screen resolution.

To access this, after accessing the developer tools by pressing ‘Inspect’ on the web page, look for the button of two small devices which, when pressed, will toggle the device toolbar.

You can access a range of devices and custom resolutions by using the drop down box and selecting a range of iPhones, Android devices as well as custom laptops screen resolutions. You can enter custom resolutions by typing in the resolution, additionally, you can also use the responsive bars just below the drop down box to scale the responsive menu using a drag and drop method.

Inspect Code


Color Picker

This great colour picker built into the DevTools will help you save a lot of time when identifying brand colours on a site and getting not just the HEX code of a colour but also the RGBA and HSLA values at an instant.

To access it, it’s easy, simply find an element within the DevTools that uses a colour property, such as a paragraph with some colour styling added. Once there, within the styles on the DevTools, select the colour box styling on the element and you’ll be able to use the colour picker to select any the colour of a singular pixel on the web page. Then, within the colour picker in the DevTools, use the toggle button to cycle through RGBA, HEX and HSLA codes for a colour.

Coding Tips and Hints


Forcing An Elements State

When working with pages with interactive elements, such as buttons that when hovered over change colour, it can be really awkward to monitor their state within the DevTools and change properties of the hover. Luckily, you can temporarily force the state of an element within the DevTools, which will allow you to work on the hovered state with ease. Simply find an element, which has a hover state attached to it, and inspect it to load it up in the DevTools.

Here, right-click on the element and select a state. I’ve used, hover and you can see within the browser window that it has added the hover class to the element and the navigation menu has appeared. Now, we can edit the hover state within the DevTools.

Page elements


Quick File Switching

You can also use the DevTools Sources tab to view and modify the source your page is made up of. Typically, the sources tab contains a lot of files and it can get very confusing when working within their, luckily Chrome recognizes this and has included a feature that allows you to search and switch between sources files in a similar manner to the way you would in Sublime Text, by using ‘CMD + P’ on Mac or ‘CTRL + P’ on Windows.

You can also use the arrows keys to cycle through files of a similar name and use enter to select the highlighted file.

Edit code


Network Throttling Simulation

Chrome allows you to simulate Network Throttling profiles. Within the Network tab in the DevTools, you’ll notice an option for ‘No Throttling’. If you select this, you can choose between a bunch of preset Throttling settings such as 2G, 3G and GPRS connections. This is great to simulate the load times of individual elements and components on a web page. You can refresh the page using the Network Throttling you have selected by pressing CMD + R and you’ll see the load time breakdowns within the developer tools.

Fifteen Web Design


With Developer Tools, it takes time to master and understand everything, which is available to you. I’m finding new ways to approach editing my code within the DevTools every day and Google continues to support developers by adding more features frequently.

Back to Blog

Let's start something special

Get in touch with Fifteen today to start your project.

Get In Touch
Footer Call to Action