The first time I opened Inspect Element, I was on my university portal. I right-clicked, changed some text in the DOM, and the page changed.
A refresh wiped it, obviously. But after that the web stopped looking like television. It looked like something people had built, with the blueprints left inside.
For a while it felt like getting away with something. You can rewrite a headline, change a number on a bank page, or skip a form check, all on your own screen. Faking screenshots gets old fast, though, and then the interesting part starts: working out how the thing was built.
Breaking other people's sites (on my machine)
A lot of my frontend education came from wrecking websites locally. I deleted layout elements to see whether the page coped. I pushed margin into the thousands to find where a layout gave up. I removed whole stylesheets to see the bare HTML underneath, and paused minified React bundles in the Sources tab to follow the data around.
Every wrecked layout was a free lesson. The web is generous that way. You can't read the source of a compiled iOS app, but a website ships its blueprints with the product.
Drag the responsive viewport and you can watch clamp() recalculate. Open the network waterfall and you see which script is holding everything else up. One stray click listener on document explained event delegation to me better than most articles about it.
Then you build with it
The tools I used to take sites apart are the ones I build with now. I throttle to "Fast 3G" with a 4x slower CPU to feel how an app runs on a cheap Android phone on a train. I check my own headers and cookies the way an attacker would. Coverage tells me how much of the CSS I ship never runs, which is usually embarrassing. Network overrides let me fake a failing API to test error states without touching the backend.
You stop seeing magic and start seeing decisions, including the hurried ones under the hero section.