Chrome Developer Tools Quick Tips

Here is a quick overview of the Chrome Developer Tools that I have used the most.

First of all, how have the Developer Tools helped me?

When I was learning Bootstrap and how to layout sites I would frequently right click on the page and then click on Inspect. This allowed me to  examine the HTML and CSS, specifically the grid layouts.


I would also change the browser size to see how the layout adjusted to a smaller window. This allowed me to simulate the appearance of the site on different devices. Furthermore I would use the device preview to see how my sites should look on my phone.


Another helpful feature of Developer Tools was Network Activity. Basically it let me know if the information was being sent from the page to the destination.

For instance with the recipe API I am entered “Fish” and this shows that the query was sent.


The JSON response can be seen here:



Another helpful tool was the push pin that allowed me to see what hyperlinks look like in different states. Before I learned this I would have to manually hover my mouse to see the style changes.


These are just a few of the tools available. I am sure I will update this blog as my knowledge and skills with Chrome  Developer Tools deepens and improves 🙂


Chrome DevTools Overview

A Web Inspector Tutorial for Front-End Developers



3 thoughts on “Chrome Developer Tools Quick Tips

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s