How to Inspect Elements in a Web Browser

To inspect an element, right-click it and choose Inspect or Inspect Element. Or open your browser’s developer tools, activate the element picker, and click the item. The inspector selects the corresponding DOM node and shows its HTML and CSS. Use the DOM tree to understand structure, the Styles panel to see applicable rules, and Computed or Layout tools to understand the final appearance.

These steps work in Chrome, Firefox, Microsoft Edge, and Safari. Menu labels and keyboard shortcuts differ by browser and operating system; the page context menu is a reliable starting point when you do not know a shortcut.

1. Inspect an element in Chrome

Right-click the page item and choose Inspect, or open DevTools and select the Inspect mode picker.
When using the picker, hover to preview the highlighted element, then click it.
In the Elements panel, find the selected node in the DOM tree. Select parent or child nodes to inspect nearby structure.
Open Styles to see CSS rules that apply to the node. Use Computed to see resolved property values, and layout tools to examine box dimensions and layout behavior.

Picker shortcuts: Cmd+Option+C on macOS; Ctrl+Shift+C on Windows, Linux, and ChromeOS. The hover overlay can report selector and size information, colors, font details, spacing, and accessibility cues such as the reported name, role, and keyboard focusability. The Elements panel also supports inspection of event listeners and accessibility information. Chrome DevTools Elements panel · Chrome DevTools Inspect mode

2. Inspect an element in Firefox

Right-click the item and choose Inspect Element, or open Web Developer Tools and select the Inspector panel.
The Inspector selects the corresponding page node. Use the markup tree to move through the document and inspect or temporarily modify markup and CSS.
Use the available box model, colors, fonts, event listeners, grid, flexbox, and accessibility workflows to investigate how the element is rendered and behaves.

Open Developer Tools with Ctrl+Shift+I or F12 on Windows and Linux, or Cmd+Option+I on macOS. The Inspector can be docked at the bottom or either side, or opened in its own window. Firefox: Open the Inspector · Firefox Page Inspector reference · Firefox DevTools documentation

3. Inspect an element in Microsoft Edge

Open DevTools and click the Inspect tool.
Hover over the rendered page to preview highlighted content, then click the target.
In the Elements tool, inspect the selected HTML node and its CSS styling.

With DevTools focused, activate the picker with Ctrl+Shift+C on Windows and Linux, or Command+Shift+C on macOS. The overlay can show dimensions, color, font, margin, padding, and accessibility cues such as contrast, reported name and role, and keyboard focusability. If an element uses pointer-events: none and is difficult to target, hold Shift while hovering. Microsoft Edge Elements tool · Microsoft Edge Inspect tool

4. Inspect an element in Safari on Mac

If the Develop menu is missing, open Safari > Settings > Advanced and enable Show features for web developers.
Open Safari’s developer tools and use Web Inspector to select the page element.
Use the Elements tab to inspect the DOM and associated styles, including computed properties.

Web Inspector edits are useful for experimenting with the current page, but CSS changes are not preserved across page navigations or Web Inspector sessions. WebKit Elements Tab reference · Apple Safari: Develop menu tools

5. Read the selected element’s HTML and CSS

Start with the DOM tree

The selected node is the browser’s current representation of the page element. Expand it to see nested elements and text, and move to its parents to understand its surrounding structure. A visible component may consist of several nested nodes, so check the highlighted region as you select candidates.

Find which CSS rule controls a property

In Styles, review matching rules and declarations. Crossed-out declarations are overridden by another rule or otherwise inactive for the current cascade. Toggle a declaration to compare the rendering, or edit its value to experiment. Computed styles show the resolved value after the browser applies the cascade, inheritance, and other relevant rules. If a value surprises you, compare the computed value with the matching rules and inspect inherited styles and parent nodes.

Use layout and accessibility details for the right question

Spacing or alignment: inspect the box model and layout tools, including grid or flexbox views where available.
Typography: inspect the font and computed text properties.
Interaction: examine event listeners and test the page behavior itself.
Accessibility: use the inspector’s accessibility cues to review reported name, role, contrast, and keyboard focusability where available.

Accessibility overlays are useful inspection clues, not a substitute for testing keyboard navigation and the experience with assistive technology.

6. Change a page temporarily

You can edit markup and CSS in developer tools to answer questions such as “Would more padding fix this?” or “Which color has enough contrast?” These edits are for investigation in the current browser session. They do not change the site’s source files or publish changes to the website; reloads or navigation can discard them. To make a lasting change, update the project’s source code and use the project’s normal review and deployment process.

7. Troubleshooting

Problem	Likely cause	What to try
The Inspect option is missing from the context menu	The click landed on browser chrome, a menu, or a special embedded area, or the browser labels the command differently.	Click the webpage itself, open developer tools from the browser menu, and activate the picker. Try the browser’s documented shortcut.
The picker selects a child or parent instead of the visible component	The visible design is built from nested DOM nodes.	Use the highlighted overlay, then move through nearby parent and child nodes in the DOM tree until the selected region matches your target.
The element is hard to select	Another layer may cover it, or its CSS may affect pointer targeting.	Inspect the covering node first, select candidates in the DOM tree, or use Edge’s documented Shift-hover behavior for `pointer-events: none`.
A CSS declaration is crossed out	Another declaration wins in the cascade, or the declaration does not apply in the current state.	Check the active rule and computed value, then inspect specificity, inheritance, and whether the relevant state is active.
Your edit disappears	Inspector edits are temporary and can be lost on reload, navigation, or a new inspector session.	Copy the intended change into the site’s source files and apply it through the project workflow.
The shortcut does nothing	Shortcuts vary by browser and operating system, and some only work when DevTools has focus.	Open DevTools from the browser menu and use the Inspect picker button, or use the page context menu.
The accessibility overlay looks correct but keyboard use fails	An overlay reports selected properties; it does not exercise every interaction or assistive technology path.	Test keyboard navigation and relevant assistive technology directly, alongside the inspector cues.

8. Or skip the browser setup

If you need a screenshot of a page while investigating a visual issue, ScreenshotNeo can capture it with one GET request. Its screenshot API and MCP server are made for developers. Cookie banners are accepted like a visitor and more than 60 known consent platforms, newsletter popups, and chat widgets are removed before the shot; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. AI agents can use the MCP server tools take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

cURL:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Replace YOUR_API_KEY with your key and change the target URL as needed. See the ScreenshotNeo API documentation for request options and setup. Start with ScreenshotNeo; sign up free for 1,000 screenshots a month with no card.

9. Performance, reliability, and cost

Browser developer tools are built into the browsers covered here, so you can inspect a page without purchasing an additional tool. The relevant practical limit is that inspector edits are temporary and browser workflows differ. For repeatable visual records or automated captures, a screenshot API can avoid setting up a browser capture script. ScreenshotNeo’s documented billing rules exclude bot checks, blank pages, timeouts, failed loads, and cache hits; its response headers report the page verdict and billing status. Its plans are Free (1,000 shots per month), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000); yearly billing gives two months free, and every feature is available on every plan. Choose based on your expected capture volume and check the docs for configuration details.

10. FAQ

Does Inspect Element change the live website for everyone?

No. Inspector edits affect your local browser view and are temporary; they do not update the website’s source or other visitors’ pages.

Can I inspect a page on a phone?

The workflows above describe desktop browser developer tools. Mobile debugging workflows depend on the browser and platform; use that browser’s documentation for connecting its developer tools.

Can the inspector tell me why an element behaves a certain way?

It can expose markup, styles, layout, listeners, and accessibility details that help explain behavior. You may still need to inspect application code and reproduce the interaction to find its full cause.

Which browser should I use?

All four browsers here provide ways to inspect DOM and CSS. Use the browser where the issue occurs, since browser-specific rendering can affect what you see.