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 🙂
A Web Inspector Tutorial for Front-End Developers
bryanttunbutr 
Hmm, I didn’t know about that last tip (API testing in devtools), thanks!
Nonetheless, when you’re working with non-trivial APIs, apps like Postman come in handy 🙂
LikeLike
Thanks Postman looks helpful 🙂
LikeLike