Web Design: Getting Started With Chrome Developer Tools

Editor’s note: For a newer, updated version of this post, check it out here.

Google Chrome is a (relatively) new kid on the block who quickly gain good market share in the browser niche, and it’s is equipped with a Handy Tool for Developers.

In this post, we are going to explore it and utilize some of its features that might help you during the web development process.

To get to the Chrome Developers Tool, go to Tools > Developers Tool.

Alternatively, you can also right-click on the web page and choose Inspect Element and If you are using Google Chrome in Windows, you can also hit the F12 key.

Recommended Reading: 40 Useful Google Chrome Extensions For Web Designers

Using Elements Tab

We will start off with the Elements tab. In this tab we can view the webpage markup as well as the styles that affect the page, which can be used to inspect what went wrong in HTML and’ CSS.

Editing Document Structure

If we right-click on one of the elements, we will find a few handy options to Add and Edit the Attribute, Copy and Edit the HTML markup and even view the element state to see what will happen when it is in :hover, :focus and :active.

This feature is very useful in cases like when we need to make a change but somehow do not have direct access to the source file, for instance in my case, I use this when asked by a friend to help debug their webpage.

Another little trick we can use is to also drag and drop the elements. Hold your click to one element and move it up and down, then you can see the impact instantly.

In this example, we slightly swap the Facebook header structure and see what happens.

Editing the CSS

When you have selected an element, you will see the styles that affect that element on the right. We can see what are the styles that are applied, we can also add or remove the styles.

Furthermore, the Chrome Developer Tool is also equipped with a color-picker to adjust the element colors seamlessly; just click on the color box and you will see it popping up, like so.

In terms of color format, the browser will typically show the Hex format. Now, in case you need the RGB or HSL format we can also do the change this way: Click on the Setting icon at the right under the Styles tab.

As you can see, we have the color format options there, you can now change it the way you need.

Adding CSS

As I have mentioned, we can add styles and here is how to do it. First, select the HTML element that we want to add the styles to, then in the Styles tab, find the plus (+) sign, click on it and it will generate the proper selector automatically.

Now, you can add the styles upon this selector right from the browser.

Viewing the Console

In the Console tab, we can see log events for Errors and Warnings. This notification below from the Console shows that one of our files cannot be loaded and this is the place where you might need to check where your website went wrong.

If we are working with jQuery, we can also send the log of our script event to the console using console.log. This example shows how we grab the value of an input element and send the result to the Console just to ensure the data is correct.

HTML

<input type="text" value="Hi There!">

jQuery

var val = $('input').val();
console.log(val)

When we reload the page, here is what we get in the Console.

Changing User Agent

Assuming that you are developing a website you probably want to see how it may turn out in particular devices. In that case, we can change the User Agent.

Here is how to do it in Chrome. In Developer Tools, you will find a Setting type of icon at the bottom right. Click on it, and an overlay option will pop up, like so.

Next, go to the Overrides tab. In this tab, we will find User Agent options and by default Google Chrome has provided a few user agents ready, such as for iPhone, Android, Blackberry, and etc.

Just in case, you can’t find your required environment here, you can go to User Agent String to pick-up the one you need.

On the option list, select Other and put the User Agent that has you just been copied in the input field next to it.

Recommended Reading: Web Developer Resources: A Mega-Compilation

Conclusion

There are a lot more functionality in the Chrome Developer Tool, but it would take a really long post to document it all.

Ultimately, I hope this post can benefit you and improve your productivity in web development and if you have anything to add something that we may have missed here, feel free to share it in the comment box below.