Mirpri's Blog

// published:

Chrome DevTools Are Useful Even if You Are Not a Dev

Development #Chrome #Web

Chrome DevTools Are Useful Even if You Are Not a Dev

If you have ever accidentally hit F12 on your keyboard, you’ve probably seen a terrifying panel pop up on the side of your screen filled with lines of code, graphs, and flashing errors. Your first instinct was likely to panic and close it immediately.

That panel is called Chrome Developer Tools (or DevTools for short). While it is built for software engineers to debug websites, it is actually one of the most powerful, secret weapons for everyday internet users. You don’t need to know how to write a single line of code to use it.

To open DevTools on any page, right-click anywhere and select “Inspect”, or press F12 / Ctrl+Shift+I on Windows, or Cmd+Option+I on Mac.

1. Copy “Protected” or Unselectable Text

Have you ever visited a recipe blog or a lyrics website that won’t let you highlight text? Some sites use restrictive scripts to block you from right-clicking or copying content. But your browser already downloaded the text to display it to you—you just need to know where to look.

How to do it:

  1. Right-click near the text you want to copy and select Inspect.
  2. The DevTools panel will open, highlighting a specific line of HTML code (usually starting with <p> or <div>).
  3. Click the little arrow next to that line to expand it.
  4. You will see the plain text sitting right there. Double-click the text, press Ctrl+C (or Cmd+C), and you’ve successfully copied it!

2. Take Perfect Full-Page or Specific-Element Screenshots

Forget downloading sketchy third-party screenshot extensions. Chrome has a world-class screenshot tool built directly into DevTools that can capture entire scrolling webpages or precisely crop around a single element.

How to do it:

  1. Open DevTools (F12).
  2. Press Ctrl+Shift+P (Windows) or Cmd+Shift+P (Mac) to open the Command Menu.
  3. Type the word Screenshot.
  4. You will see a few amazing options:
  • Capture full size screenshot: This will automatically scroll down the entire page and save a massive, high-quality image of the whole website from top to bottom.
  • Capture node screenshot: First, use the “Inspect” tool to click on a specific element (like a single tweet, a chart, or a recipe card). Then run this command to get a perfectly cropped image of just that element, with no messy background.

3. Delete Annoying Pop-ups, Watermarks, and “Premium” Blurs

Sometimes you click an article and a massive “Subscribe to our Newsletter” banner covers the whole screen, but the “X” button is missing. Or perhaps you are looking at a document or data table, and the site has placed a frosted “blur” overlay or a giant watermark over the page, asking you to upgrade to a premium account to read it.

Since the content is already loaded on your computer, you can just delete the obstacle.

How to do it:

  1. Right-click directly on the annoying banner, watermark, or blurred overlay, and click Inspect.
  2. DevTools will highlight the HTML element responsible for the block.
  3. Hover your mouse to the highlighted code in the Elements panel, and you’ll see the element highlighted on the page. If the highlighted area is inaccurate, click the arrow icon in the top-left corner of the DevTools window to select a different element directly on screen.
  4. Simply right-click the highlighted element in the Elements panel and click Delete element, or press the Delete (or Backspace) key on your keyboard.
  5. The element is gone. If there is still a dark overlay, right-click it, Inspect, and Delete again until the page is clean and readable.

Note: If the site actually limits the data sent to your browser, this won’t work. But if it’s just a visual trick to hide text that is already there, you’ll be able to read it perfectly.

4. Download “Hidden” Images, Videos or Audio

Many websites often disable the “Save Image As…” or “Save Video” right-click options. But in order for you to see that media, the website had to send the file to your computer. You can intercept it using the Network panel.

How to do it:

  1. Open DevTools and click on the Network tab at the top of the panel.
  2. You will see options to filter the traffic. Click on Img (for photos) or Media (for videos/audio).
  3. Refresh the webpage (F5). You will see a list of every single image or video file loading on the page.
  4. Click through the list to preview them. Once you find the photo or MP4 video you want, right-click the filename in the list and select Open in new tab.
  5. The raw image or video will open in a clean tab, and you can right-click and save it normally.

Note: Some videos are streamed from a server and can’t be saved this way. This method only works for videos embedded in websites

5. Reveal Hidden Passwords Behind Asterisks

We’ve all been there: your browser auto-fills a password for a website, but you can’t remember what it actually is, and you need to type it into your phone. Instead of resetting your password, you can just tell the browser to unmask the asterisks (********).

How to do it:

  1. Right-click the password box and select Inspect.
  2. DevTools will highlight a line of code that looks something like this: <input type="password">.
  3. Double-click the word password to edit it.
  4. Delete the word password, type text, and hit Enter.
  5. The asterisks in the box will instantly change into plain text, revealing your forgotten password!

6. Edit Any Text on the Screen (The Fake Screenshot Trick)

If you want to prank a friend with a fake news headline, make a custom meme, or fix a typo on a page before taking a screenshot for a presentation, you can rewrite the internet locally on your screen.

How to do it:

  1. Right-click the headline or text you want to change and click Inspect.
  2. The text will be visible in the highlighted HTML code.
  3. Double-click the actual text inside the DevTools panel.
  4. Delete it, type whatever you want, and hit Enter. The webpage will instantly update with your custom text.

Note: This only changes the page on your computer. Once you refresh, it goes back to normal.

7. Fool Websites into Thinking You’re on a Phone

Some websites hide certain features on their desktop versions to force you to use mobile. Others simply look terrible on a wide desktop screen. You can force the website to serve you the mobile version right from your PC.

How to do it:

  1. Open DevTools (F12).
  2. Near the top-left corner of the DevTools panel, click the icon that looks like a phone sitting in front of a tablet (or press Ctrl+Shift+M / Cmd+Shift+M).
  3. Your web page will shrink into a mobile screen size.
  4. At the top of the webpage, you will see a dropdown menu that says “Responsive” or a specific phone name like “iPhone 14 Pro”. Choose a phone model.
  5. Crucial step: Refresh the page (F5). The website will now treat your computer exactly like a mobile phone, often unlocking mobile-only features!

You are in control

The most important thing to remember about web browsers is that once a website is sent to your computer, you are in control of how it is displayed. Chrome DevTools just gives you the interface to exercise that control.

So the next time a website tries to trap you with an un-closeable pop-up, block you from copying a quote, or hide a page behind a fake blur, just hit F12. You don’t need to be a developer to take your browser back.

Next: Surviving vLLM Setup in Tricky Lab Environments