Why You Should Use "Inspect Element"?

There's one loyal companion in my product management journey that I've been particularly fond of.

Inspect Element.

‍

This browser feature is like the WD-40 of the web world.

Such a simple tool but so many uses.

In case you haven't been introduced to the wonders of "Inspect Element", it's a developer tool provided by most web browsers that allows you to temporarily view & modify the HTML/CSS of any web page in run time on your local machine.

You can then technically:

• Edit/delete any text
• Modify/add html blocks
• Change fonts
• Modify color of elements
• Resize various elements
• Affect line spacing etc.

So, how does this help?

Well, I've used this in many scenarios like:

• Modifying areas of a web page, taking a snapshot & sharing my ideas with designers
• Rather than re-constructing an existing page on a wireframe tool, updating it in HTML/CSS & using that
• Figuring out what CSS parameter works best (e.g. line spacing adjustment) and sharing that with my front-end developer
• Testing out what a new font would look like on the site by changing one CSS property
• Troubleshooting links
• Finding links to original hi-res images & video files running in embedded players
• Understanding what a page looks like on mobile & tablets
• Checking meta-data and og-tags of my site
• Looking into tools and tech stacks used by competitor
• If I've forgotten the password to a site but it gets pre-populated by the browser at the time of login, I can use Inspect to change the "type" of the password field to normal to change the dots to plain text

...and so on.

If you're a product manager of a web platform & want to amp up your game, make sure you've befriended "Inspect Element".

(Funnily enough, I had to consciously avoid abbreviating Inspect Element to "IE" as that would confuse it with something with an equally notorious reputation).

See more: How To Use "Inspect Element"?