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.

inspect1

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.

inspect2

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.

inspect3

The JSON response can be seen here:

inspect4

 

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.

inspect5

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:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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