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