How to Open and Use Inspect Element in Your Browser

Opening Inspect Element on Windows and Mac

Inspect Element opens with a keyboard shortcut on every major browser. On Windows, press F12 or Ctrl + Shift + I. On Mac, press Command + Option + I. Both shortcuts work in Chrome, Firefox, Edge, and Safari.

If the keyboard shortcut does not work, you can right-click anywhere on a webpage and select "Inspect" or "Inspect Element" from the menu that appears. This method works the same way on all browsers and all operating systems. The developer tools panel will open at the bottom or side of your screen, showing the code behind what you see.

Some browsers also let you open Inspect Element through the menu. In Chrome and Edge, click the three-dot menu in the top right, then select "More tools" and "Developer tools". In Firefox, click the menu button (three horizontal lines) and choose "More tools" then "Browser Console" or "Inspector". In Safari on Mac, you first need to enable the Develop menu in Preferences under Advanced, then you can click Develop and select "Show Web Inspector".

Key Takeaways

Press F12 on Windows or Command + Option + I on Mac to open Inspect Element when ready in any browser.
Right-clicking any element on a page and selecting "Inspect" opens the tools focused on that specific part of the code.
The Elements or Inspector tab shows the HTML structure of the page, and the Styles panel shows the CSS rules applied to each element.
You can edit HTML and CSS in real time to see how changes affect the page, though changes disappear when you refresh.
Safari requires you to enable the Develop menu in Preferences before Inspect Element becomes available.

What You See When Inspect Element Opens

When you open Inspect Element, a panel appears showing two main sections. The left side displays the HTML structure of the page — the code that creates every heading, paragraph, button, and image. The right side shows the CSS styles applied to whichever element you have selected. This layout is the same across Chrome, Firefox, and Edge, though Safari calls the HTML section the "Elements" tab instead of "Inspector".

At the top of the HTML section, you will see a small arrow or pointer icon. Click it to enter "select mode", which lets you hover over any part of the webpage and see its code highlighted in the panel below. This is the fastest way to find the code behind a specific button, image, or text block. When you click an element in select mode, the HTML panel jumps to that element's code and the CSS panel shows all the styles affecting it.

The CSS panel on the right shows every style rule applied to the selected element, listed from most specific to least specific. Crossed-out rules mean they were overridden by a more specific rule. You can see which file each rule comes from — usually a file named something like "style.css" or an inline style block. This tells you where to look if you need to change the design.

Editing HTML and CSS to Test Changes

Inspect Element lets you change HTML and CSS directly in the browser to see how the page would look with different code. These changes are temporary — they disappear the moment you refresh the page — but they are useful for testing ideas before you write them into the actual files.

To edit HTML, right-click any element in the HTML panel and select "Edit as HTML" (Chrome and Edge) or "Edit HTML" (Firefox). A text box appears where you can change the code. Press Enter or click outside the box to explore the change. The page updates when ready. To edit CSS, click any style rule in the Styles panel and change the value directly — for example, change a color from blue to red, or a width from 300px to 400px. The change takes effect as soon as you press Enter.

You can also add new CSS rules by clicking the plus icon in the Styles panel, or by clicking inside the Styles panel and typing a new rule. This is helpful when you want to test what a margin, padding, or color change would do without touching the actual CSS file. Remember that all changes vanish when you refresh, so if you like a change, you need to make it in your actual code editor and save the file.

Using the Console Tab to Check for Errors

Next to the Elements or Inspector tab, you will find a Console tab. The Console shows error messages, warnings, and log messages from the page. If a script fails to load or a piece of JavaScript code breaks, the error appears here with a line number telling you where in the code the problem occurred.

The Console is also where you can type JavaScript commands to test code or check values. For example, you can type document.title to see the page title, or run a function to see what it returns. This is useful when you are building a feature and want to check whether a variable has the value you expect. Developers use the Console constantly to debug problems and test ideas quickly.

The Network Tab for Checking Page Load Performance

The Network tab shows every file the browser downloads to display the page — images, stylesheets, scripts, fonts, and more. Each file is listed with its size, how long it took to read, and whether it loaded successfully. This tab is useful when a page loads slowly or an image does not appear, because you can see exactly which files are taking time or failing to load.

To use the Network tab, click on it, then refresh the page. The browser records every request as it happens. Look for files with a red X or a status code like 404 (not found) or 500 (server error) — these are the files that failed. Files with large sizes or long load times are the ones slowing down the page. This information helps you decide whether to optimize an image, move a script, or investigate a server problem.

The Responsive Design Mode for Testing Mobile Layouts

Inspect Element includes a Responsive Design Mode that lets you see how a page looks on phones, tablets, and other screen sizes without owning those devices. In Chrome and Edge, press Ctrl + Shift + M on Windows or Command + Shift + M on Mac. In Firefox, press Ctrl + Shift + M on Windows or Command + Option + M on Mac. The page will shrink to show a mobile-sized view.

At the top of the Responsive Design Mode panel, you can choose from preset sizes like "iPhone 12" or "iPad", or type a custom width and height. You can also rotate the view from portrait to landscape. This is how web developers test whether a page works on small screens before showing it to users. If text is too small to read or buttons are too close together on mobile, you will see it here and can use the CSS panel to fix the layout.

Keyboard Shortcuts and Tips for Faster Workflow

Learning a few keyboard shortcuts makes Inspect Element faster to use. In the Elements or Inspector tab, press the up and down arrow keys to move between elements in the HTML tree. Press Enter to expand or collapse an element. In the Styles panel, press Tab to move between style properties, making it faster to edit multiple rules without using the mouse.

When you are in select mode (the pointer icon at the top left), you can hover over any element on the page to see its dimensions, padding, and margins highlighted in a colored overlay. This is called the box model view and it shows you exactly how much space an element takes up and how far it is from other elements. It is one of the most useful features for understanding why a layout looks the way it does.

One more tip: if you want to inspect an element that disappears when you move your mouse away — like a dropdown menu or tooltip — right-click the element and select "Inspect", then when ready move your mouse to the Inspect Element panel. The element will stay visible because your mouse is no longer hovering over the page itself.

Frequently Asked Questions

Can I permanently change a website using Inspect Element?

No. Changes you make in Inspect Element only affect what you see in your browser and disappear when you refresh the page. The actual website files on the server are not changed. If you want to permanently change a website, you need to edit the actual code files and upload them to the server.

Why does my CSS edit not show up when I refresh the page?

Because Inspect Element changes are temporary. When you refresh, the browser downloads the original files from the server again, erasing your edits. To make permanent changes, edit the CSS file in a code editor, save it, and upload it to your web server or commit it to your version control system.

What is the difference between the Elements tab and the Inspector tab?

They do the same thing — Chrome and Edge call it "Elements", while Firefox and Safari call it "Inspector". The name is different but the function is identical: both show the HTML structure and let you inspect and edit the code.

How do I find the code for a specific button or image on a page?

Click the select mode icon (the pointer) at the top left of Inspect Element, then click the button or image on the page. The HTML panel will jump to that element's code. This is much faster than scrolling through the entire HTML tree by hand.

Can I use Inspect Element on websites I do not own?

Yes. Inspect Element works on any website you can visit in your browser. You can see the code, test CSS changes, and check for errors. However, any changes you make are only visible to you and disappear when you refresh. You cannot change the actual website for other users.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.