On any web page in my browser (chrome), if I right-click anywhere on the screen, I get a menu with options like: cut paste undo redo etc,—And on the bottom line of the menu : “inspect”.
Clicking on “inspect” opens a side window full of code. I assume this is the html code which makes that web page work for me while I’m reading it…
But that code is totally incomprehensible to me, the user of that page. And, presumably, to millions of other users like me.
I suppose that for the programmers* out there, it means something and makes sense. But why would you need it? The web page is coded by, and owned by, somebody else, who wants me to use their website the way they designed it. Do they want random tech people copying it?
What do you smart folks do with that information in the “inspect” window?
And why is so much long, technical, and incomprehensible code placed within easy reach? Do they expect every monkey on the internet to read it with a simple click,–and in an obnoxious pop-up window which blocks the screen and prevents you from reading the content you are actually using? Why isn’t the ‘inspect’ option put in some other, less-accessible menu, where only people who need it will find it?
–
*(is there a difference between a programmer and a coder?)
–
My computer is Windows 10 with Chrome version 123.0.6312.86 (official build)(64 bit). If that is relevant.
It is indeed primarily for troubleshooting, maintaining and cleaning up code.
I do very little with inspect these days, I occasionally use it for more specific pasting of links. But that is rare.
There is probably a technical difference between a programmer and a coder but not one that really matters.
BTW: click the F12 key and you get the same results.
It does no harm and it is nice to be able to hit F12 and see what you did wrong in building the web page you’re working on or what style is being used or etc.
I find it occasionally useful to hack customize the page by deleting excessive ads, especially animated banners that are a burden on my bandwidth. If a page image is not directly copyable I can sometimes find a link to the original .jpeg.
If I’m using Selenium to drive the page for web-scraping or automated testing, I need to be able to identify specific elements to send commands to or pull information from. Also, in most webpages today, the HTML code is not written by a human; it is ‘dynamically’ produced by a web framework, so it has to be inspected in situ as they are produced and modified to understand the code and identify bugs.
If you’re not sure what you’d use it for, it’s not for you. Browsers all had a “view source” option from the beginning, as the overlap between www users and webmasters was higher back then.
As browsers became more complicated, “view source” was replaced by “inspect”. But the reason it’s there by default and not hidden in developer tools is, I think, tied to that history.
As a web developer I use “inspect” all day every day. I write some code and run it and if it doesn’t look quite right I fiddle with my CSS until it does and then go back and apply the CSS to the page and refresh. Saves a TON of work.
Also great for when you code something on a whim and hope it works and it looks like shit and you can’t figure out “why does it look like that?” and you use the inspection tools to drill down to your element to see what CSS is being applied.
Also invaluable for JavaScript errors. Used to be if you had a JS error it’d pop up an alert in the browser but now they happen silently but you can see a list of errors and line numbers and jump directly to the code that’s erroring.
And it shows network speed times and order of loading and stuff. It also has something called Lighthouse built in that helps you speed up your code.
Inspect also shows you all the code after the page is loaded, like when something is loaded using JavaScript. When you View Source you get the code that’s sent to the browser so you just see the call to JavaScript but not its output. So if you want to see the details of that output you use inspect tools.
Good for seeing how code changes when you click on something interactive. Click a button that changes the state of something else, you can view the new state of the other object. Another thing you can’t see with source.
And last week my partner was having trouble filling out a form on someone else’s site where a select box was too big for the modal pop up so I showed him how to go change the CSS of the model using inspect to make the panel bigger and it make his task instantly easier.
So yeah, it’s a development tool. Used by developers like me all day long. If you’re a developer and don’t know how to use it you’re putting yourself at a huge disadvantage.
Oh and to answer your question about letting people copy your code - that’s how the web has always worked. If you like the way something looks or works, you grab it and use it. Knowing how to re-shape it for your specific needs is the skill.
And most of the brilliance of how web site works is not visible in the freely available html, css and JavaScript. It’s hidden in server-side code connected to a database. You can’t access that from a browser. Even if you connected to the file server you still can’t access the code if it’s compiled. The source code exists apart from the packaged up compiled code.
Still, we all mostly share our source code anyway on places like GitHub and Stack Overflow and thousands of coding blogs and documentation. Once again the skill and the value comes from knowing which code to grab and how to manipulate it to work the way you need it to work.
I don’t understand the code at all, but I do sometimes use it to get a plain text viewing of something that is blocked by ads or other poorly placed images.
I use it from time to time. Most recently, I wanted to download a picture on an Insta page, but Meta obfuscates the image and doesn’t offer a download on the right-click menu. So I used Inspect to open the nested DIVs until I found the explicit image link, loaded that, and saved.
These are not things I do every day, but it’s useful when I need it.
Less than 90 seconds ago, my partner was WTF’ing because she received a Google Alert that a web page had referenced her within the last 24 hours (the Google Alert is a leftover from when she was a local political candidate and wanted to track any media coverage); when she clicked on it, it took her to an OnlyFans page. Close window, retry. This time to an explicit girlie TikTok page. I told her if she were curious, she could invoke the “show source” (same as “inspect”) and see whether the page code still has her name, and perhaps has been hijacked by a pornbot of some sort (or a reprehensible advertiser stuck evil code in what was purported to be a banner ad), or if the entire page got replaced.
Which, in retrospect, isn’t entirely correct & true. “Show page source” / “inspect” et al won’t necessarily show you what you want to see, if you’re wanting to see the code contents that your browser parses and processes. Modern web pages can be chock-full of scripts that execute so as to fetch other content, and the source code shows the calls to the script but not what the scripts fetch.
One way around that is to boss around Chrome from the command line. Chrome will run in headless mode and deposit the actual transmitted page code (i.e., the outcomes of all those scripts, not the calls to the scripts) so you get the page “as text” and can examine the results.
I use Inspect quite often. E.g., to identify something on a page I want to block. Often not even ads but some other annoying crap I never want to see. While ad blockers have features similar to this, the Inspect thing can do a lot more. Also some sites don’t allow things with media like downloading or sending to a separate window. I hit Inspect, find the media, do what I want with it.
Yeah, you have to know some web coding to doing anything serious, but it doesn’t take much to do the basics.
Lots of webdev folks have given great answers, but maybe pitched just over the OP’s head. I’ll try a summary:
The browser you use is the exact same browser that web developers use to look at their work from the inside while they’re working. In that line of work it’s real handy to have “Inspect” or “View source” available at a click. The people who create browsers are in cahoots with the people who create websites.
Some browsers do hide these features unless you activate a special “I’m a developer, not an end-user” mode. Some don’t bother with the separate mode, figuring those features being available isn’t going to hurt the end user’s usability of the browser enough to bother with camoflaging them.
Another reason for enabling by default is to avoid web sites trying to detect if a browser has it enabled and changing behaviour if it is.
Not as obvious as checking for ad-blockers, but of the same ilk. A common default across the various browser writers makes it a waste of time for sites trying to prevent those who do use the feature from being stymied.
Placing it on a top level menu remains a curious choice, but does no harm. It does advertise the capability quite clearly. So that might be considered a good thing.
The hidden wars of browsers and nefarious web sites is ongoing. Legitimate business interests vary greatly depending which side of the divide you stand. Which is why running with an ad-blocker and Noscript is essentially mandatory.
If you know what you’re doing, you can use the inspect view to get around ad blocker detectors and some paywalls. (Besides viewing the code, you can also modify it, for example by deleting an overlay that’s blocking your view of the content.)
It’s also useful if you use something like Tampermonkey to customize the way your browser presents the page.
Good answers here. My previous job was as a front end web developer, and I used the inspect function a lot. When you have code writing html, it gets complicated fast. I think there might even be a couple of functions for non-coders if you know your way around it.
The web site I was working on is a system for school management, and includes features such as allowing parents to see their children’s grades. One student found he could change the grade displayed via the inspect function, and had a little side business going “changing” other students’ grades. It did not, however, actually change the grade, just what was seen on the screen. Until the data was reloaded. Oops
Many big tech companies secretly post job adverts in this hidden menu on their website.
Okay, not quite. But they do kind of leave a secret message saying come work for us, apply here. It’s common knowledge that any monkey with a keyboard can view the source code and copy the layout of a website. Compare with behind the scenes extra features on a DVD release - useless for the masses. Kinda cool for the pros and enthusiasts.