google developer day 2010 japan: google chrome の developer tools (ミカイル ナガノフ,...
DESCRIPTION
このセッションでは Google Chrome の Developer Tools が持つインスペクトやデバッグ、チューニング、プロファイラなどの豊富な機能を解説します。また、Developer Tools の機能がどのように組み込まれているか、実装面についてもご紹介いたします。TRANSCRIPT
Google Chrome Developer Tools
Alexei Masterovproduct manager
Mikhail Naganovsoftware engineer
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issuesStory 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issuesStory 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
What is Chrome Developer Tools?
It is:to Chrome what Firebug is to Firefoxnot a Firebug port for Chromea part of standard Chrome distributionWebKit Web Inspector, working on top ofV8 JavaScript engine in the Chrome'smulti-process architecture
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issuesStory 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issuesStory 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
Elements Panel
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issuesStory 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
Resources Panel
Resources Panel (continued)
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issuesStory 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
Scripts Panel
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issuesStory 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
Timeline Panel
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issuesStory 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
Profiles Panel
Storage Panel
Audits Panel
Console Panel
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issues Story 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
New FeaturesOpen DevTools in "Inspect Element" mode:
< > + <SHIFT> + C
<CTRL> + <SHIFT> + C
New Features
Live editing of JavaScript
New Features
DOM Breakpoints
AgendaWhat is Chrome Developer Tools?Using Developer Tools
Story 0: Mastering DOMStory 1: Analyzing Network ActivityStory 2: Debugging JavaScriptStory 3: Identifying performance issuesStory 4: Understanding memory usage
New FeaturesLinks & How to contributeQ&A
Links & How to contribute
http://www.chromium.org/devtools
Links & How to contributehttp://crbug.com/new
Спасибо! ありがとうございます! Danke!
Thank you!
Q&A