Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

  • 3,084 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,084
On Slideshare
1,876
From Embeds
1,208
Number of Embeds
15

Actions

Shares
Downloads
8
Comments
1
Likes
3

Embeds 1,208

http://googledevjp.blogspot.jp 650
http://googledevjp.blogspot.com 541
http://googledevjp.blogspot.de 3
http://paper.li 2
http://googledevjp.blogspot.nl 2
http://googledevjp.blogspot.tw 1
http://googledevjp.blogspot.ru 1
http://googledevjp.blogspot.com.es 1
http://googledevjp.blogspot.co.uk 1
http://static.slidesharecdn.com 1
http://momosoft-proxy-server.appspot.com 1
http://googledevjp.blogspot.com.au 1
http://rrdsaas.appspot.com 1
http://atgapps.appspot.com 1
http://googledevjp.blogspot.com.tr 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Google Chrome Developer Tools Mikhail Naganov Alexei Masterov software engineer product manager mnaganov@google.com masterov@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