Getting Started with Chrome Developer Tools

I found a great site called Code School (all free for the 5/24 - 5/27 weekend) with a very well made hand on tutorials for different Web technologies. The Google Chrome Developer Tools  course was free. It was so interesting and engaging that I finished the full course in one day.

Here is a list of features that are included in the Chrome Developer Tools. If you do not have the time to take the course, I highly suggest skimming the features and go back to learn them if you needed the tools.

Elements:

• Gives you the ability to Drag and drop HTML Lines, Edit the HTML,
• Look up the CSS items  and where they are inheriting the elements.
• Ability to change to cursor dependent events (elements like onhover, infocus ..etc) to edit the CSS

Resources:

• Look up all the files used to create the site (CSS, JS, images) and highlight any missing ones
• Local storage shows any saved JSON calls (I have yet to test this with forms, but Get and Post data should be shown here)

Network:

• Shows the calls (Get and Post) made to show all of the files and when they started (server is limited to a number of files it can call in time. So it is a great idea to combine and minify files.
• To use: Press the black circle at the bottom and it would start recording then Refresh the page.
• Options to disable cashed items under settings (small gear on the bottom right)

Sources:

• A text editor. Access all of your (js) files and ability to edit.
• Right click and click on Local modifications for the option to save your files or revert.

Timeline:

• Record Behaviors (animation, drawing) to see how long they are taking to draw.
• Memory monitoring to check for any memory leaks

Profile:

• Monitor the speed of the JS to help with finding parts of the codes that are slowing the page
• Monitor CSS to find how long the JS is taking to select the elements (e.g. #elementName vs .elementClass)
• Take a Heap shot to find any memory leaks of elements not collected.

Console:

Consoles allow you to type any Javas Script functions you have in your page and it would return the result.

Select elements to find them in your html by using  $(".className") or element

Lots of goodies that could be found on the google API support.

Chrome Developer tool is a must learn if you are doing any web development. I have to admit that one feature that I miss from IE dev tool is being able to use the cursor to highlight and click on an element on the web page.