How to inspect your WordPress webpages code in your browser ?

Many problems asked on our themes forum ( like Customizr or Hueman ) are very easy to solve using the developer tool of your favorite browser. 

Browsers development tools

The browser development tools allow you to access many useful inspection features like the  javascript debug console. The following tools are generally launched by hitying F12 on your keyboard :
  • Recommended Chrome DevTools
  • Firefox Firebug
  • Safari has Web Inspector (which you switch on in the menu with Safari > Preferences > Advanced > Show Develop menu in menu bar). Simply right-click and select “Inspect Element” to launch it.
  • F12 developer tools in Internet Explorer
For every element on your page, it quickly and easily shows you which CSS rules (and files) are responsible for the styling.
You can work out in seconds how to change the styling of any element. Simply right-click it and select Inspect Element with Firebug.

Once you get more confident with it, you’ll find some really great features that take you to another level.

Video beginner tutorials

More online resources

If you prefer reading text to watching a video, here are some really great articles on that go into more detail on how to use developer tools / Firebug (the principles are the same for all tools):