Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools
Google IO 2010: Google Chrome Developer Tools
Transcript of Google IO 2010: Google Chrome Developer Tools
![Page 1: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/1.jpg)
![Page 2: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/2.jpg)
Google ChromeDeveloper ToolsPavel Feldman, Anders Sandholm5/19/2010
View live notes and ask questions about this session on Google Wave: http://bit.ly/bujAfR
![Page 3: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/3.jpg)
Agenda
What is Chrome Developer Tools?
Project history
Developer Tools overview
Story 1: Debugging JavaScript
Story 2: Identifying performance issues
Story 3: Understanding memory usage
Developer Tools internal design
Links & How to contribute
Q&A
![Page 4: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/4.jpg)
What is Chrome Developer Tools?
It is to Chrome what Firebug is to Firefox
It is not a Firebug port for Chrome though
It is a part of standard Chrome distribution
It is WebKit Web Inspector, working on top of V8 JavaScript engine in the Chrome multi-process architecture
![Page 5: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/5.jpg)
Agenda
What is Chrome Developer Tools?
Project historyDeveloper Tools overview
Story 1: Debugging JavaScript
Story 2: Identifying performance issues
Story 3: Understanding memory usage
Developer Tools internal design
Links & How to contribute
Q&A
![Page 6: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/6.jpg)
Project history
![Page 7: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/7.jpg)
Agenda
What is Chrome Developer Tools?
Project history
Developer Tools overviewStory 1: Debugging JavaScript
Story 2: Identifying performance issues
Story 3: Understanding memory usage
Developer Tools internal design
Links & How to contribute
Q&A
![Page 8: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/8.jpg)
Developer Tools overviewElements Panel
![Page 9: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/9.jpg)
Developer Tools overviewResources Panel
![Page 10: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/10.jpg)
Developer Tools overviewResources Panel. Content
![Page 11: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/11.jpg)
Developer Tools overviewScripts Panel
![Page 12: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/12.jpg)
Developer Tools overviewTimeline Panel
![Page 13: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/13.jpg)
Developer Tools overviewProfiles Panel. CPU
![Page 14: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/14.jpg)
Developer Tools overviewProfiles Panel. Heap
![Page 15: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/15.jpg)
Developer Tools overviewStorage Panel
![Page 16: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/16.jpg)
Developer Tools overviewAudits Panel
![Page 17: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/17.jpg)
Developer Tools overviewConsole Panel
![Page 18: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/18.jpg)
Agenda
What is Chrome Developer Tools?
Project history
Developer Tools overview
Story 1: Debugging JavaScriptStory 2: Identifying performance issues
Story 3: Understanding memory usage
Developer Tools internal design
Links & How to contribute
Q&A
![Page 19: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/19.jpg)
Story 1: Debugging JavaScript
![Page 20: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/20.jpg)
Agenda
What is Chrome Developer Tools?
Project history
Developer Tools overview
Story 1: Debugging JavaScript
Story 2: Identifying performance issuesStory 3: Understanding memory usage
Developer Tools internal design
Links & How to contribute
Q&A
![Page 21: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/21.jpg)
Story 2: Identifying performance issues
![Page 22: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/22.jpg)
...going beyond JavaScript
![Page 23: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/23.jpg)
Agenda
What is Chrome Developer Tools?
Project history
Developer Tools overview
Story 1: Debugging JavaScript
Story 2: Identifying performance issues
Story 3: Understanding memory usageDeveloper Tools internal design
Links & How to contribute
Q&A
![Page 24: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/24.jpg)
Story 3: Understanding memory usage
![Page 25: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/25.jpg)
Agenda
What is Chrome Developer Tools?
Project history
Developer Tools overview
Story 1: Debugging JavaScript
Story 2: Identifying performance issues
Story 3: Understanding memory usage
Developer Tools internal designLinks & How to contribute
Q&A
![Page 26: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/26.jpg)
Developer Tools internal design
Development process
Open Source
WebKit ("upstream")
V8
Chromium ("downstream")
Dependency updates
Daily WebKit updates
Regular V8 updates
Early access & release channels
Stable, Beta, Dev
![Page 27: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/27.jpg)
Developer Tools internal design
Inspected Page Frontend Page
![Page 28: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/28.jpg)
Links
http://chromium.org/devtools
http://chromium.org
http://webkit.org
How to contributehttp://crbug.com
http://webkit.org/new-inspector-bug
irc://irc.freenode.net/#webkit-inspector
![Page 29: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/29.jpg)
Google ChromeDeveloper ToolsPavel Feldman, Anders Sandholm5/19/2010
View live notes and ask questions about this session on Google Wave: http://bit.ly/bujAfR
![Page 30: Google IO 2010: Google Chrome Developer Tools](https://reader035.fdocuments.net/reader035/viewer/2022071600/613d2b30736caf36b75a20e3/html5/thumbnails/30.jpg)