Debugging Your Website with Chrome Developer Tools

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.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x