Debugging Your Website with Chrome Developer Tools

| Web Design
Debugging Your Website with Chrome Developer Tools

If you’re using Chrome and want to debug your site's design, this browser already comes with a great built-in feature called Developer Tools.

In this tutorial we will show you how to start using Chrome Developer Tools.

This follows on from last week's post on using Firefox Dev Tools.

How to enable Chrome Developer Tools

  • In your Chrome browser, open the site you want to debug.
  • Right click over an element you want to debug. In this example, we're analyzing a yellow button.
  • Click "Inspect".

Inspect Your Website with Chrome Developer Tools

A new area will come up from the bottom of the browser. There you can see the HTML code in the "Elements" tab. I've labelled the image below so you can see the layout clearly:

a) The element you’re debugging
b) The element’s HTML
c) The element’s CSS

The layout of Chrome Developer Tools

How to debug your site's HTML

  • In the "Elements" area, right click on the HTML you want to work with.
  • Click "Edit as HTML"

Editing an attribute with Chrome Developer Tools

Change the HTML depending to your needs. Then click above or below the edit field to see your changes reflected on the browser. Please note that changing the HTML doesn’t actually update your live site. Chrome Developer Tools only helps to test and preview your changes.

Previewing code changes with Chrome Developer Tools

How to debug your site's CSS

  • Under the "Styles" tab in the CSS area, tweak the CSS properties for the current element. In this example, we're using a button again.
  • As you’re changing the CSS, note that the new properties are being reflected immediately. In this example, I changed the button colors.

Css changes with Chrome Developer Tools

Note, changing the CSS doesn’t actually update your live site. Chrome Developer Tools only helps to test and preview your changes. In order to apply the custom CSS you tested through Developer Tools, add the specific CSS you tried into your site’s server.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.