How to use the Inspect tool in Google Chrome and Mozilla Firefox

Have you ever wonder what's Inspect tool? Good for you, because I never really did wonder about it. Just when I was able to work as a Virtual Assistant that's the time that I was introduce to using it since it's very helpful specially to web developers.

And since I'm frequently using Google Chrome and Mozilla Firefox then I would share to you the perks of knowing this tool.

Note: You must be familiar with basic html or just simple Google it.

First and the best purpose of inspect tool is that it would let you test your website changes temporarily.

So if you don't want to mess with your codes then you might want to check what would happen if you add or change a line of code in a specific line. This goes for Chrome and Mozilla.

Here's an example, what if I want to check the look of my blog if I change the font size.

So first thing to do is point your cursor to the specific element that you want to change or test.
Then right click to that element and you will see different options, just find Inspect Element(available for Chrome and Mozilla).

Now it will show like this(above).

At the right side you can see element style, you can insert there the changes that you want to have.

So we'll try changing the font size, lets see what would happen.

As you can see now I've changed the font size and color. Isn't that simple? You can also explore more of it's function.

Now let me show you some perks that I have discovered.

Are you familiar with google doodles games? This is just a simple example of doing a little trick with this tool. But please use it responsibly, this is just for fun.

So I was playing this Soccer 2012 and I want to have the highest score and I can't seem to reach it.

It seems that I just got zero for this round, so what can we do with this?

Then that's pretty amazing though and how on earth got that score? Let me show you how.

I just point my cursor to the zero score then right click and then inspect element.

Then I've just added a lot of zero's at this part. And then right click to the other starts and copied this code:

And pasted to the other blank holes element style, pretty easy.

BUT AGAIN: This is JUST FOR FUN!

Mozilla has this option for 3D, and it really amazes me.

After clicking the inspect element you'll find the 3D button(highlighted). It shows the layers of the website.

These are the few things that I know, I hope it helps. :)