Behind the Curtain: How to Inspect Elements in Chrome Like a Pro

Alesya Prytulenets -

Ever wondered how a website really works under the hood? Whether you’re debugging a layout glitch, grabbing a hidden image, testing UI responsiveness, or just curious about that weird font, Chrome’s Inspect Element tool is your backstage pass.

In this guide, we’ll show you how to inspect any element in Chrome using Chrome DevTools like a seasoned developer. From inspecting HTML and tweaking CSS live, to testing mobile views and tracking network activity — you’ll learn how to reveal (and even manipulate) the inner workings of any web page with just a right-click.

Let’s pop the hood!

How to Open the Chrome Developer Tools

Before you start dissecting web pages like a digital surgeon, you need to know how to open the toolbox. Here are three quick ways to launch Chrome DevTools:

🔧 Option 1: Right-Click + Inspect

The fastest way to inspect a specific element on the page:

  • Right-click on anything (text, image, button)
  • Select “Inspect”

Boom — you’re instantly taken to the exact line of code in the Elements panel!

⌨️ Option 2: Keyboard Shortcut

For devs who live on the keyboard:

  • Windows/Linux: Ctrl + Shift + I
  • Mac: Cmd + Option + I

This opens the DevTools panel docked to the bottom or side of your browser window.

🧭 Option 3: Menu Navigation

If you like to click through menus:

  • Click the three-dot menu in the top-right corner of Chrome
  • Go to More tools → Developer tools

And here we go. DevTools opens and is ready for action. Now, let’s see on practise how to inspect web page elements on Chrome!

How to Inspect the Element in Chrome Using Dev Tools

Once you’ve opened Chrome DevTools, the real power begins. You can inspect, modify, and debug any part of a webpage — live. Whether you’re analyzing the structure, tweaking styles, or checking scripts, DevTools gives you full control.

Let’s break down the main methods of Google Chrome inspection, using a popular homeware website Maison Flaneur as an example, starting with the most basic:

🔍 1. Look at the Source HTML Code of the Page

In the Elements tab of Chrome DevTools, you’ll see the raw HTML that structures the page. Every element you click highlights its corresponding location on the site.

How to look at the source HTML code of the page

In the screenshot above, we’ve selected a headline (<h1>) titled “Motel Bodega”. Once clicked or hoovered, the HTML element is revealed in the DOM tree on the right, while the corresponding section is visually highlighted on the webpage.

💡
In the Elements Inspector, blue indicates the contents of an element, green corresponds to padding, and areas in orange are margins.

What you can do here:

  • See how content is structured (tags, classes, hierarchy)
  • Spot hidden elements or overlays
  • View inline styles or embedded scripts
  • Edit text or attributes directly in the browser

DogQ tip: Double-click any attribute or text to edit it on the fly. It’s perfect for testing copy, class names, or layout tweaks in real time.

🎯 2. Select a Specific Element to Inspect

Sometimes you don’t want to scroll through the entire DOM — you want to jump straight to a button, image, or heading and see what’s going on under the hood.

That’s where the element picker tool comes in.

You can select a specific element to inspect by clicking on this icon

In the screenshot above, the blue square icon (top-left of the DevTools panel) is activated. When clicked, your cursor becomes a highlighter that selects any visible element on the page.

How to use it:

  • Click the element picker icon in the top-left corner of DevTools (or hit Ctrl + Shift + C / Cmd + Shift + C)
  • Hover over any element on the page
  • Click to inspect it in the Elements panel instantly

Why it’s awesome:

  • It visually connects what you see to the exact line of HTML
  • Helps with debugging styles, positioning, or interactivity
  • Perfect for inspecting hover effects or dynamic elements

💡 DogQ tip: Use this to quickly find which class is applying a certain margin or why an element isn’t clickable.

🔎 3. Use Inspect Element Search to Find Anything on a Site

Sometimes you need to find a specific class, ID, or piece of text — but digging through a sea of nested <div>s is no fun. That’s where the Inspect Element Search in Chrome comes to the rescue.

You can use Search to find anything on a website

In the screenshot above, we’ve opened the DevTools overflow menu (three vertical dots) and selected “Search”, or you can simply hit:

  • Ctrl + Shift + F (Windows/Linux)
  • Cmd + Option + F (Mac)

This opens a global search bar that scans the entire HTML, CSS, and JavaScript loaded on the page.

What you can search for:

  • HTML tags and attributes (e.g., h1, data-*, class=“hero-title”)
  • Text content on the page
  • CSS class names or styles
  • JS variables and inline scripts

This feature of Chrome inspection is lightning fast and incredibly precise, and perfect for huge pages with dynamic content — you can jump straight to the code snippet that matches your query.

💡 DogQ tip: Wrap search terms in quotes (“Motel Bodega”) to match exact phrases.

📱 4. View the Page’s Mobile Version

Want to see how your site looks and behaves on a phone without ever leaving your browser? Chrome DevTools has a built-in Device Mode that lets you simulate mobile screens with just one click.

Using Chrome DevTools, you can see how your site looks on a phone

In the screenshot above, the Device Toggle Toolbar (next to the Inspect icon) is activated. This instantly switches your view to a responsive mobile screen.

How to use it:

  • Click the device icon in the top-left of DevTools or press Ctrl + Shift + M (Windows/Linux) / Cmd + Shift + M (Mac)
  • Use the top bar to choose different devices (iPhone, Galaxy, iPad, etc.)
  • Adjust screen width, zoom level, and even simulate slow network speeds or touch interactions

Why it rocks:

  • Quickly debug layout issues across screen sizes
  • Test mobile menus, sticky elements, and touch responsiveness
  • Preview changes live when editing mobile CSS directly in DevTools

💡 DogQ tip: You can even rotate the screen or enter custom dimensions to simulate rare devices or quirky breakpoints.

How to Manipulate the Elements of a Website with the Inspect Tool

One of the coolest things about Chrome DevTools is that it doesn’t just show you the code — it lets you edit it. In real time. This is super handy for testing changes, debugging layout issues, or even faking some content for a mockup or client preview.

Let’s start with the basics: changing HTML content directly on the page.

✏️ 1. How to Change HTML and Content

In the screenshot above, we’ve edited the <h1> tag from “Motel Bodega” to “Hello World!” — live, right inside DevTools.

How to do it:

  • Right-click the element and choose Inspect
  • In the Elements tab, find the text or tag you want to modify
  • Double-click the content (or right-click → Edit as HTML)
  • Type your changes and press Enter

Voilà! The page updates instantly in the browser.

Use cases:

  • Previewing copy changes
  • Testing new headings, buttons, or labels
  • Creating mockups or design variations for review
💡
Reminder: These changes are only visible locally. Refresh the page, and they’ll disappear.

🎨 2. How to Change Styles with the Inspect Tool

Want to test a new font size, color, or margin without touching your codebase? Google Chrome DevTools makes live CSS editing easy.

You can change styles using the Inspect Tool

In the screenshot above, we changed the heading color to bright blue by editing the inline style directly in the Styles panel.

How to do it:

  • Inspect the element you want to restyle
  • In the Styles panel on the right, you’ll see all applied CSS rules
  • Click any property to change its value (or add new ones at the bottom)
  • Changes appear instantly in the browser — no refresh needed

Why it’s useful:

  • Preview design tweaks on the fly
  • Debug conflicting or overridden styles
  • Test responsiveness with layout changes (e.g., display: flex, margin-top, etc.)

💡 DogQ tip: You can use arrow keys to increment values, or toggle entire rules on/off using the checkboxes beside them.

Are the Changes You Make with the Inspect Tool Permanent?

Short answer: Nope.

As we already mentioned, any changes you make using Chrome’s Inspect tool — whether it’s editing text, swapping images, tweaking CSS, or hiding elements — are temporary and local. They only exist in your browser tab and disappear the moment you refresh the page.

So what’s the point?

The Inspect tool is built for experimentation and debugging. It lets you:

  • Preview design changes before touching real code
  • Test bug fixes or layout adjustments in seconds
  • Mock up new content or features for stakeholders
  • Understand how other websites are built (yep, even your competitors’)

If you want your changes to stick, you’ll need to:

  • Update the HTML/CSS/JS in your actual codebase
  • Push edits via your CMS (e.g., WordPress, Shopify, Webflow)
  • Or make them permanent in your dev tools via extensions or user scripts (advanced use)

💡 DogQ tip: Copy your changes from the Styles or Elements panel and paste them right into your source files to make them permanent!

How to Inspect Transient DOM Elements (Tooltips, Modals, Hover Menus)

Some elements only show up for a second — like tooltips, dropdowns, or animations that disappear the moment you click away. But how to freeze the dropdown in the inspect element, or pause an animated button? Inspecting them feels impossible… unless you know this DevTools trick.

Step 1: Use the “Pause” Button in the Sources Tab

In the screenshot below, you see a pause icon ( ⏸️) in the lower bar of the Sources panel. This tells Chrome to pause JavaScript execution the moment anything changes in the DOM. You can click it at the moment when the needed element appears on the page:

You can use the “Pause” button in the Sources Tab to inspect a disappearing element

How to do it:

  • Open DevTools → Sources tab
  • Locate the pause script execution button (bottom left)
  • Click it before triggering the transient element (like hovering or clicking)

Step 2: Explore the Paused State

In the screenshot below, Google Chrome is paused at the exact moment the transient element appears, and you can inspect the disappearing item without stress.

You can inspect the needed element while Chrome is paused

You can now:

  • Hover and inspect the element freely
  • Analyze its styles, animations, or behavior
  • Even manipulate or restyle it while paused
  • Everything stays frozen, so you don’t have to race against disappearing content.

This trick is perfect for debugging:

  • Hover dropdowns
  • Animated banners
  • Auto-closing notifications
  • Tooltip glitches
  • Modal behaviors

💡 DogQ tip: You can also use the debugger manually in your JavaScript if you want to pause at specific code execution points. Also, find more info on Transient elements in our Docs.

DevTools Power Tips by DogQ

Whether you’re a developer, tester, or just a curious hacker at heart — these tips will turn you into a DevTools pro:

🔁 Edit & Save Files Live in the “Sources” Tab

Did you know you can actually edit JS or CSS files directly in DevTools and save those changes locally? Normally, when you edit something in DevTools (like HTML or CSS), it’s temporary — you refresh the page, and poof — it’s gone.

But with Workspaces, you can connect your real local project folder (from your computer) to Chrome DevTools. This way, you can:

  • Open files from your site
  • Edit them directly in DevTools
  • Save those changes straight to your actual local files (just like in VS Code)
You can save your files in the Sources Tab

How to Set It Up (Step-by-Step)

  • Open the Sources tab in DevTools
  • On the left, click “Workspaces”
  • Click the button “add folder” to upload any folder you want from your local project (for example, theme.js, style.css, etc.)
  • Chrome will ask for permission → choose the real folder on your computer where your site’s files live
  • After connecting it, you’ll see your folder appear in the Workspace tab
  • Now, when you open and edit a file — you can save it (Ctrl+S), and it writes directly to disk 🎉

🎯 Right-click an Element → Break on...

Need to find out what’s changing a DOM element or attribute?

Right-click any element and choose “Break on → Attribute modifications” (or subtree/DOM changes). DevTools will pause JS right when something touches it — no more mystery bugs.

You can find out what’s changing a DOM element or attribute

📏 Measure Element Dimensions with Pixel Precision

Hover over any element in the Elements panel, and DevTools shows its size, padding, and margin visually. Also, you can hold Ctrl (or Cmd) while inspecting to lock that highlight and inspect other details without losing focus.

Measure any element dimensions with DevTools

🎨 Toggle Element State (like :hover, :focus, :active)

Click the .cls button in the Styles panel, then use “:hov” to simulate states like :hover. It’s perfect for styling drop-downs or buttons without needing to hover like a maniac.

You can toggle element state using DevTools


📱 Throttle Network Speed or CPU for Real-World Testing

In the Network tab, toggle the dropdown at the top to simulate slow 3G, offline, or mid-tier CPU performance. Ideal for stress testing mobile performance or slow connections.

Emulate real-world testing with DevTools


📸 Take a Full Page Screenshot Instantly

Open the Command Menu with Ctrl + Shift + P (or Cmd + Shift + P), then type screenshot → choose “Capture full size screenshot”. Boom — you have a screenshot of the whole webpage, perfect for mockups, documentation, or visual testing.

Take a screenshot of a full webpage

Wrapping Up

Chrome’s Inspect Element and Developer Tools aren’t just for devs — they’re for anyone who wants to understand what’s happening under the hood of a website. Whether you’re debugging a broken button, checking mobile layouts, or just experimenting with design changes, DevTools gives you the control and clarity to work smarter and faster.

And remember — if you ever get stuck or need extra help testing your web pages, DogQ is here for you. From visual checks to AI-powered no-code automation, we’ve got the tools (and the team) to support your testing workflow — no matter how complex or fast-moving it is.

Test smarter. Debug faster. Build better — with DogQ.

Visit DogQ

FAQ

What Can You Do With an Inspect Element?

You can view and edit HTML, CSS, and JavaScript live on any webpage — test styles, debug layout issues, tweak content, simulate mobile views, and explore how a site is built.

Who Needs Chrome Developer Tools?

DevTools are useful for developers, testers, designers, marketers, and even curious learners. Anyone who wants to understand, test, or optimize a website will benefit from using them.

Can I Inspect Elements in Other Browsers?

Yes! Firefox, Safari, Edge, Opera, and even Brave have their own built-in DevTools with similar features. Chrome is just the most popular and widely used among developers.

Beginner’s Guide to XPath

Follow this guide to learn the basics of XPath selectors, what they are made of and how to use them.

CSS Selectors 101

Follow this guide for a brief overview of CSS selectors in testing, their syntax and use cases.

Selectors in DogQ

DogQ supports XPath and CSS selectors. Both are powerful and oftentimes interchangeable but also do have their unique use cases.