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
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.
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
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)
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)
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.
Record Behaviors (animation,
drawing) to see how long they are taking to draw.
Memory monitoring to check
for any memory leaks
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
Take a Heap shot to
find any memory leaks of elements not collected.
Consoles allow you
to type any Javas Script functions you have in your page and it would return
Select elements to
find them in your html by using
$(".className") or element
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.