How to inspect element from sites in different browsers

Browser developer tools let you view and edit HTML, CSS, and JavaScript in real time. Perfect for learning how websites work or debugging issues on your own site.

You can inspect any element on a page, test CSS changes instantly, and spot console errors. Useful when you need to troubleshoot website errors or fix redirect errors by checking network requests.

Note these tools only show client-side code. For server-side issues like PHP errors, you’ll need to check server access logs instead.

How to use the Inspect Element tool

Google Chrome

You can access inspect element (and more) on Chrome in a few different ways including:

• Right-click specific website areas and select “inspect element” from the drop-down menu.
• With your website open you can either press the F12 key or a combination press of CTRL + Shift + C.

You can swap between the different tabs including elements, console and network, all of which can help learn and diagnose issues. The example below shows the element window in Chrome.

Mozilla Firefox

Similarly, you can right-click on a website element and select “Inspect” to open the developer tools. Again, much like Chrome you can also use the keyboard shortcut use the keyboard shortcut CTRL + Shift + C.

Microsoft Edge

As a Chromium-based browser Microsoft Edge is almost identical to Google Chrome, you can access the development tools and inspect elements with the following:

• Right-click on an website, and select Inspect.

• Press the F12 function key which will open all the development tools.
• Combination key press of CTRL + Shift + C.

Using any of these options will allow you to cycle through the different development tool panes letting you manipulate and learn more about the site, including showing any issues.

Opera

As a Chromium based browser Opera has similar tools to Edge and Chrome but has slightly different key bindings. You can access the developer tools and inspect element in Opera by:

• Right-clicking on an website area, and clicking on Inspect from the dropdown menu.
• Use the keyboard shortcut Ctrl + Shift + I.

Developer tools are fundamental to modern web design. If you’re looking to expand your skills, check out these web design resources for more learning material.