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?
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 🙂