Notes From Chrome Developer Course at CodeSchool

First, the url to the course is: http://discover-devtools.codeschool.com/

 

Things I learned that I didn't already know:

 

VERY IMPORTANT: holding 'shift' while clicking on the refresh button will reload all assets (clear the cache for the page).

 

ELEMENTS AND STYLE PANELS

1. You can drag elements around in the dom inspector to move them around.

2. I never noticed the little toolbar the styles inspector (add a style, toggle element state, etc)

3. Toggling styles (using the checkboxes) is a great way to find out what rule is blowing up your layout

 

SOURCES PANEL

1. You can make edits to the source code in the source panel and then press ctrl + S to save a snapshot. Snapshots are saved in the browser cache. You can right click on the file in the sources panel and view the modifications that were made. You can right click and choose save to save those changes to a file.

 

CONSOLE PANEL

1. You can start typing code in the console and then press tab for intelli-sense (cool)

2. You can load an element from the DOM in the console like this $("#someElement")[0]

3. Typing $0 shows the last element that was selected in the elements panel, $1 shows the second to last (etc) - Note that the $ is refered to as 'bling'

 

DEBUGGER

1. You can press the 'pause on exception' button (in sources panel, lower left, it's round with the 'pause' icon) to jump to the line where an exception occurs

2. If you click that button 2 times, it not pause on exceptions that are caught.

3. When code is paused, you can hover over any previous lines to see the values of variables

4. You can press the button labeled '{}' (it's in the sources panel) to try to format code that has been minified so that you can read it better

 

TIMELINE/PROFILES

1. Install the plugin called 'Page Speed' from Google Web Store for tips on increasing/troublshooting the load performance of a page.

2. Use Frames view to show performance problems, use CPU profiler to isolate the problem.

3. Frames view will show you the rendering speed, you want it to stay between 30 and 60 FPS

4. Choose 'Frames' (from the left side of the Timeline panel), then press the record button at the bottom. Then interact with your page to trigger code and watch the frame rate.

5. In Profiles panel select 'Collect JavaScript CPU Profile' and then press 'start'. Then you can interact with the page. When you press the record button again to stop, you can get a profile of the % of proccess time spent on each method that is invoked.

6. In the Timeline panel, choose 'Memory' from the left, then press the record button to see how the heap size fluctuates.

7. In the Profiles panel, click the Profiles item on the left, then from the main content area of the Profiles panel choose 'Take Heap Snapshot'. You can compare heap snapshots, but I didn't catch how to do that.

8. When viewing a heap snapshot, items in red are elements that have been removed from the DOM, but not yet garbage collected, so you might be able to find memory leaks by using heap snapshots.

 

ALSO

You can download the Google Closure Compiler .jar file and us it to minify and concatenate files.

 

TASK MANAGER

You can also you the TASK MANAGER (under Tools) to look at memory and cpu consumption

http://blog.chromium.org/2011/05/chrome-developer-tools-put-javascript.html