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.

  • 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 .elementClass)
  • 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 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.