16 Awesome Chrome Dev Tools Features

How did I miss this? Back at Google I/O in May, Paul Irish & Pavel Feldman gave an awe-inspiring 45 minute presentation to set about enlightening the web debugging community. If you’ve got the time, I highly recommend watching the video below. For those with tighter schedules to keep, skip to the summary of the main points beneath.

Styling

  • Cycle through colour formats
    Styles Accordion > Click Color Swatch
  • Create a new selector and rule-set on-the-fly
    Styles Config > New Style Rule
  • Edit style resources in-line
    Resources Tab > Double-click Any Stylesheet > Edit > CTRL /⌘ + S
  • Save updated stylesheets
    Right-click Any Stylesheet > Save As
  • View and revert to previous revisions
    Expand Any Stylesheet > Right-click Timestamp > Revert
The last few points show Chrome Dev Tools entering the giant world of the IDE, however Pavel was quick to point out this is not a path they’re planning to follow too deeply.

Network

  • Easily view the exchange of cookies
    Select Any HTTP Request > Cookies Tab

Pavel also pointed out that a JSON tab should be available soon, to assist navigation through the returned structure.

Timeline

  • Record a session, view the make up of loading, scripting and rendering events
    Record Icon > Perform action/s > Record Icon

Console

Scripting

This is where the Chrome Dev Tools really shines, and with Paul Irish joining from the Firebug team – expect more great things to come.

  • Beautify obfuscated code, and set breakpoints against the results (that’s gotta be some fancy, behind-the-scenes mapping magic)
  • Access scope variables inside the console, while stopped at a breakpoint
  • Add breakpoints to DOM elements, for instance, when the innerHTML is updated
  • Add breakpoints to user keyboard and mouse actions, DOM mutations, Timers and other events
  • Jump straight to the relevant line of code, from the Timeline tab’s scripting events
  • Inline editing a la stylesheets, remember to hit CTRL /⌘ + S to save
  • Remote debugging. Since the Dev Tools are essentially a single page web-app, they are exposed via HTTP from the local Chrome client. More at http://code.google.com/chrome/devtools/docs/remote-debugging.html
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s