Just watched a session on Chrome Developer tools, Shay Friedman from NDC London. Even though I use the Chrome Developer tools quite a lot, there was still a few new things to me. I took some quick notes while watching the video, so you don’t have to spend an hour watching it.
While on the source tab.
you can dynamically write
debugger; in the code file to make a break point
console.log("this is text", this);
Will log the object to the console with the text
Workspaces can be used to sync file changes to a folder
Counts the number of occurrences, to the console
All console.log statements following this statement will show as a group as in the console.
ends the grouping of the log statements.
You can use the devtools snippets to store collection of script snippets, a good resource is http://bgrins.github.io/devtools-snippets/.
Shift click color code box (change representation)
Search in HTML (can be CSS selectors)
Change text (to check for language specific texts and how they affect the design)
document.body.contentEditable = true
Developer Tools Settings
Make sure to Disable Cache when dev tools are opened.
Check: Show time stamps
Allow custom theme (get a black theme) (http://devthemez.com/themes/chrome-developer-tools)
Use the device testing functionality
Click events are changed to touch events
Check network speeds
Check Offline mode
The network tab
Blueline document ready
Red line (images+iframe) done loading
Latency should not take up most of the Time column
Size and content should not be the same (because then they are not zipped)
When there is an error, right click network tab, save as HAR with content (http://ericduran.github.io/chromeHAR/)