Friday, May 24, 2013

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.