Using the Chrome Developer Tools

Chrome Developer Tools involved the next Thinkful project I added and it was a brief introduction to what was available to a developer. There’s a lot of tools available from there, and I know I’ve only scratched the surface, but it’s great how useful that little bit of knowledge has been.

I spent most of my time using the elements tab to view how the html tags were structure and to view the styles implemented there. Changing the styles also allowed me to get a glimpse on how the rest of the page was marked up and it was a great way to figure out the right positions without editing the stylesheets over and over again.

The console tab was the second most panel that I spend my time with because it’s great for debugging and allows anyone to run a snippet of Javascript code to see how it works. I’m getting into the habit of adding multiple console logs in my Javascript script to see how a variable changes when it’s called. This allows me a window to see if the functions I write are behaving the way I expect them to.

Other than those two, I’ve also been using the resource tab to check if the assets are being loaded correctly and the sources tab to see the exact scripts being loaded. I’m looking into another add on to Chrome called RailsPanel to see how much it could help me when I write Rails applications.

Comments