Google Developer Day 2010 Japan: Google Chrome の Developer Tools (ミカイル ナガノフ, アレクセイ マステロフ)

3,238 views
3,147 views

Published on

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

Published in: Technology, Business
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,238
On SlideShare
0
From Embeds
0
Number of Embeds
1,270
Actions
Shares
0
Downloads
9
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Google Developer Day 2010 Japan: Google Chrome の Developer Tools (ミカイル ナガノフ, アレクセイ マステロフ)

  1. 1. Google Chrome Developer Tools Alexei Masterov product manager masterov@google.com Mikhail Naganov software engineer mnaganov@google.com
  2. 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. 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. 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. 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. 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. 7. Elements Panel
  8. 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. 9. Resources Panel
  10. 10. Resources Panel (continued)
  11. 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. 12. Scripts Panel
  13. 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. 14. Timeline Panel
  15. 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. 16. Profiles Panel
  17. 17. Storage Panel
  18. 18. Audits Panel
  19. 19. Console Panel
  20. 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. 21. New Features Open DevTools in "Inspect Element" mode: < > + <SHIFT> + C <CTRL> + <SHIFT> + C
  22. 22. New Features Live editing of JavaScript
  23. 23. New Features DOM Breakpoints
  24. 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. 25. Links & How to contribute http://www.chromium.org/devtools
  26. 26. Links & How to contribute http://crbug.com/new
  27. 27. Спасибо! ありがとうございます! Danke! Thank you! Q&A

×