How to inspect your WordPress webpages code in your browser ?
source : pxhere.com
Many CSS related 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.
Browsers development tools
- 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
- 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.
More online resources
- Which Browser has the Best Developer Tools and Explain Why?
- Understanding selectors using developer tools
- Using developer tools to make live modifications
- Great guide; more advanced: Secrets of the Browser Developer Tools