このセッションでは Google Chrome の Developer Tools が持つインスペクトやデバッグ、チューニング、プロファイラなどの豊富な機能を解説します。また、Developer Tools の機能がどのように組み込まれているか、実装面についてもご紹介いたします。

1. Google Chrome Developer Tools
Alexei Masterov
product manager
masterov@google.com
Mikhail Naganov
software engineer
mnaganov@google.com

2. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

3. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

4. What is Chrome Developer Tools?
It is:
to Chrome what Firebug is to Firefox
not a Firebug port for Chrome
a part of standard Chrome distribution
WebKit Web Inspector, working on top of
V8 JavaScript engine in the Chrome's
multi-process architecture

5. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

6. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

7. Elements Panel

8. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

9. Resources Panel

10. Resources Panel (continued)

11. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

12. Scripts Panel

13. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

14. Timeline Panel

15. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

16. Profiles Panel

17. Storage Panel

18. Audits Panel

19. Console Panel

20. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

21. New Features
Open DevTools in "Inspect Element" mode:
< > + <SHIFT> + C
<CTRL> + <SHIFT> + C

22. New Features
Live editing of JavaScript

23. New Features
DOM Breakpoints

24. Agenda
What is Chrome Developer Tools?
Using Developer Tools
Story 0: Mastering DOM
Story 1: Analyzing Network Activity
Story 2: Debugging JavaScript
Story 3: Identifying performance issues
Story 4: Understanding memory usage
New Features
Links & How to contribute
Q&A

25. Links & How to contribute
http://www.chromium.org/devtools

26. Links & How to contribute
http://crbug.com/new

27. Спасибо! ありがとうございます! Danke!
Thank you!
Q&A