Is your hand on a mouse?
No? Put your hand on your mouse then.
Now, right click within your browser and click inspect element…
and there we have it ladies & gents, the tool which has made my life – and internship in particular – a gazillion times easier.
So, why is inspect element awesome? You tell me. Try it out yourself!
Hover over the code, change the styling of the element you’ve selected, admire the magic!
But on a serious note (in TL;DR fashion), as my internship has me performing a lot of web development, as you can guess I end up using a lot of css and we all know how much of a pain in the backside it is to use – hence why most people use a css pre-processor nowadays such as sass or less.
So for example, if I’ve applied a class or ID to an element yet it seems like my styling is not being applied, I can simply inspect that element and view which classes within the stylesheet are being applied to it and in what order. This can help me debug what the problem is, see if there are any styles from another stylesheet overriding mine or if nothing is being applied whatsoever for example.
Another example of when it can be incredibly useful is where you want to edit an existing style but can’t be bothered minimising your browser, opening your editor, finding the line of css, making the change, saving the file, minimising out of the editor again then refreshing your browser to preview the change (only to find you don’t like it). So instead, the inspect element tool allows you to simply make an on the fly change to the css (which isn’t saved) which is also portrayed on the page without the need of a refresh, which saves a ridiculous amount of time!
But anyways guys, the next time you’re doing some web related development, try inspect element out =)
And until next time… bye!