Using Browser Dev Tools

Browser Developer Tools come with all modern browsers, and they can help you look at and interact with a web page’s HTML, CSS and JavaScript code. This can be very useful when diagnosing a broken website.

The third-party videos below will walk you through how to use some of the features offered by most Browser Dev Tool suites.

Page Inspector

The Page Inspector allows you to look at and interact with the HTML and CSS code that is already loaded on a page. Watch this third-party video on how to use Google Chrome’s Inspect tool. This feature can be found in Mozilla Firefox as well, if that’s your browser of choice.

Web Console

Both Chrome and Firefox also have a web console. This is where websites and web apps log messages to, including errors. Accessing a browser’s web console can be vital when sites don’t function as you expect them to, as errors that occur when loading will often show up there.

Firefox’s web console is outlined in this video:

If you’re interested in recapping a lot of what you’ve learned above, this video does just that:

Further Reading

Activity

This lesson has a quiz that’s designed to help you put all this into practice. Get started by clicking the blue View Lesson Quiz button below.

Back to: Learn User Support Course > WordPress Troubleshooting