Using Inspect Element or Firebug to peek behind the scenes of your WordPress website

Have you ever been frustrated by the way something appears on your website? Perhaps you thought some text was going to be green, but it actually looks red. Or perhaps you formatted text to be aligned to the left, but it’s actually centred. Maybe an image has an ugly-coloured border around it that you didn’t intend.

“Code” is not a dirty word!

Websites are made up of files. Sometimes, a lot of files. And those files are filled with code. Sometimes, a lot of code. And if you don’t know what the code means, it can be really difficult to understand why sometimes things just don’t look right on your website.

Without knowing exactly how your browser is getting the information to display a website, it’s impossible to know how to fix the way it appears. That’s where Inspect Element (or Firebug) comes in.

Webkit browsers, such as Apple’s Safari and Google’s Chrome, have built-in “developer mode” tools that are very useful for inspecting the different elements making up your site. For Firefox, there’s a free add-on called Firebug which will do essentially the same thing. A simple right-click on the page item you want to check reveals much about that item’s formatting, allowing you to troubleshoot problems.

I made this video to walk you through the steps of using Inspect Element or Firebug to see behind the scenes of your website. See below the video for some step-by-step instructions.

Instructions:

1. If using Safari, go to Safari>Preferences>Advanced then check the “Show Develop menu in menu bar” checkbox. If using Firefox, download and install the Firebug plugin.
2. Right-click on the element you want to inspect, and choose “Inspect Element” from the menu.
3. A new pane will open at the bottom of the browser window, showing the page’s HTML code (on the left-hand side) and relevant CSS code (on the right-hand side).
Choose any HTML tag, then make changes to the CSS code to preview the changes you want to make.
If you choose, you can then apply these changes to your stylesheet.

This post originally appeared on Grassroots Internet Strategy.