Software Engineer Mountain View

Chrome Dev Tools Reloaded

Google I/O ****: Wednesday, May 11, 12:30-1:30

Speakers

Paul Irish, Developer Advocate, Google Mountain View Pavel Feldman, Software Engineer, Google St. Petersburg Summary

Demonstrating how to use Google Chrome Dev Tools to modify, improve, and debug your web pages and web applications.

Contents

Chrome Dev Tools Reloaded

Speakers

Summary

Contents

Notes: Introduction

1. Styling Control & CSS Manipulation

2. Network interaction

3. Console API

4. Script Debugging

Announcing Remote Debugging

5. Extension API

6. We recommend

Q&A

Notes: Introduction

Dev Tools is just a web app, made out of CSS, HTML, and JS; for example, you can use it to modify its own appearance.

Quick overview of the Dev Tools: Developer tools built into browser. Can manipulate page directly in the browser, change all sorts of things on the fly. Keyboard shortcut to toggle back and forth between Dev Tools and the browser. 1. Styling Control & CSS Manipulation

Some Dev Tools CSS editing features:

● Tab between properties and values.

● Auto-complete everywhere, including values.

● Rotate through color-specifying modes, easy to tweak colors using keyboard keys.

● Gear icon lets you pick New Style Rule; it suggests a selector, and you can add a style.

● Dev Tools keeps track of the changes you make in the stylesheet; keeps a revision history.

● Right-click to Save As to save the changes back to your CSS file.

● Can copy a CSS pattern from another page, then paste it into your CSS.

● Freeform stylesheet editing in the UI.

2. Network interaction

Network panel: Shows network interaction. Each item requested from server has its own entry; timeline shows when each item was fetched. Can also view the raw request and response headers, the query string parameters, the content, and the cookies, including cookies not available to JS. Also an overview of the timing involved. The info comes from the network stack; Chrome has its own network stack, providing extremely precise timing info.

Start and stop recording to see things happening over time. Timeline then shows script execution and user interaction, etc.

3. Console API

Note that the console.log command accepts multiple arguments. In addition to console.log, there's a command-line API, documented on the Firebug wiki. Examples:

● document.body shows an expandable view of an element.

● dir(document.body) shows DOM view.

● inspect(document.body) shows Elements tab, with that element selected.

● Escape key toggles console on and off.

● $0 refers to whatever element is selected in DOM view. For example: $0.outerHTML.

● copy($0.outerHTML) puts it on the clipboard, just like selecting and copying. 4. Script Debugging

Can pause JS during execution to look at object states etc. Demo of debugging JS for "HoverCard" mini-app:

● Jump to line.

● Set breakpoint.

● When paused at breakpoint, can see various things.

● Can also use console to dump current values.

● Conditional breakpoints, etc. Also DOM Breakpoints: breakpoint on subtree modification. And Event Listener breakpoints; specify various events, including timer, to pause on.

● Timeline view can also be useful in seeing what's going on with events and timers and such.

● Can edit script source code in the Scripts panel of Dev Tools. For example, could log using console.log, or can add to or change the script in other ways.

● Can prettyprint code.

Announcing Remote Debugging

Launch Chrome Canary from command line, specify remote-debugging-port=1337. Then in another instance of Chrome (whether local or remote), you can view Dev Tools for that first instance by going to hostname:1337.

5. Extension API

Announcing Dev Tools Extension API:

● chrome.devtools.panels to add custom panels

● chrome.devtools.audits to add new audits

● chrome.devtools.resources exposes resources in HAR format. Currently in experimental phase for a couple of Chrome iterations; give feedback. 6. We recommend

Tips, suggestions, and help:

● Use Chrome Dev Channel or Canary.

● File bugs at new.crbug.com.

● Press ? for keyboard shortcuts.

● code.google.com/chrome/devtools has documentation and videos. Q&A

Q: When I get a 500 response and click in content tab, it's blank. A: We're working on this; will render HTML in a separate tab. Q: Possible to replay timing events?

A: Not at the moment. Working on saving first.

Q: (? Missed the question.)

A: First time entering the IDE space, don't want to go too far; we're a debugging tool. No plans for saving to disk from browser.

Q: Plans for tight integration with GWT?

A: Prettyprint parses JS source code and prettyprints it; creates mapping between the original and pretty versions. Can use this to work with translated languages like GWT, though not in the build yet.

Q: You mentioned remote debugging is available for RIM Playbook; is it available for other devices?

A: Currently not available on Honeycomb, only on Playbook, but in future iterations, everything using Mobile WebKit will have this feature.

Q: Search only searches current file; would like to search across files like Firebug. A: Popular request. Can search everything using resources panel. We don't have a search results panel, 'cause we don't have much screen real estate. We're working on this. Q: In other tools, you can search each file sequentially. A: There are too many files sometimes for that to be usable; a search-results page would be better.

Q: Any way to remove all breakpoints at once?

A: Can deactivate them all at once, but no current remove-all. File bug in crbug and star it; we prioritize bugs by number of stars.

(End of session.)

Contact this candidate