How to inspect your WordPress webpages code in your browser ?
source : pxhere.com
Many CSS ( stylesheet) questions on the support forums (such as Nimble Builder support forum) are easy to address using the development tool of your favorite browser and the WordPress Custom CSS panel. You can also add custom CSS to a specific page of your WordPress site with the free Nimble Builder plugin.
This documentation helps you get started with your browser's development tool. If you are not familiar with CSS customization, this guide will interest you.
Javascript issue ? If you need to explore a javascript problem on your website, WordPress.org has an article about using the browsers console log to diagnose JavaScript errors.
Browsers development tools
The browser development tools allow you to access many useful inspection features like
real-time CSS customization, or the
javascript debug console. The video below demonstrate how to customize the background of Google home page using the color picker in Chrome. Simply hit F12 on your keyboard and you'll access this interface.
The following tools are generally
launched by hitting 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
Useful tutorials
- How to add custom CSS to a specific page of your WordPress site ?
- Modify Theme CSS with Inspect Element - WordPress
- Get started with Google Chrome dev tools in with those video tutorials
- Learn how to use Firebug here. This 6-minute video is getting old, but it’s one of the best-presented I’ve seen.
- WordPress.org has an article about using the browsers console log to diagnose JavaScript errors.
More online resources
If you prefer reading text to watching a video, here are some really great articles on wordpress.com that go into more detail on how to use developer tools / Firebug (the principles are the same for all tools):
- Which Browser has the Best Developer Tools and Explain Why?
- How to open the JavaScript console in different browsers?
- Understanding selectors using developer tools
- Using developer tools to make live modifications
- http://debugbrowser.com/
- Great guide; more advanced: Secrets of the Browser Developer Tools