Skip to content
This repository has been archived by the owner on Nov 8, 2023. It is now read-only.

Content Inventory

Jump to bottom
Joan Leon edited this page Jul 16, 2015 · 6 revisions

Existing content:

https://developers.google.com/chrome-developer-tools/docs/overview obviously http://blogs.adobe.com/cantrell/archives/2012/01/a-summary-of-the-webkit-developer-tools.html http://stackoverflow.com/tags/google-chrome-devtools/hot?filter=all High priority answers people want

Tips and Tricks

http://devtoolsecrets.com/ http://jtaby.com/2012/04/23/modern-web-development-part-1.html

http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1 Wait devtools can do that? by ilya http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/ Google IO 2011 http://www.youtube.com/watch?v=3pxf3Ju2row Google IO 2012 http://www.elijahmanor.com/2012/02/textmate-like-t-t-in-chrome-dev-tools.html early 2012 new features http://www.youtube.com/watch?v=nOEw9iiopwI Google Chrome Developer Tools: 12 Tricks to Develop Quicker https://plus.google.com/114738313102270607087/posts/2HxAr5SgBf1 styled logs http://www.youtube.com/watch?v=4mf_yNLlgic

Deep Dives

http://coding.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/ cpu and timeline http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-tools-markup-and-style/ good intro http://www.youtube.com/watch?v=Vp524yo0p44 paul on timeline frames mode https://developers.google.com/events/io/sessions/gooio2012/209/ Jankbusters - timeline http://net.tutsplus.com/tutorials/chrome-dev-tools-networking-and-the-console/

  • Network panel focus

Memory Profiling

(existing docs) io 2013 loreena john http://www.youtube.com/watch?v=x9Jlu_h_Lyw http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/ http://reinpk.blogspot.com/2012/03/using-heap-profiler-in-chrome-dev-tools.html http://gent.ilcore.com/2011/08/finding-memory-leaks.html http://zetafleet.com/blog/google-chromes-heap-profiler-and-memory-timeline (google io 2012 has memory profiling segment) 3 snapshot. https://groups.google.com/d/topic/google-chrome-developer-tools/pfhssg-h6es/discussion good thread. inspect(obj) and $0 from devtools/devrel meeting notes http://blog.tojicode.com/2012/03/javascript-memory-optimization-and.html

http://stackoverflow.com/questions/14167013/javascript-memory-and-leak-problems -- Nice answer from Konrad Dzwinel, especially in terms of how he presented the issue and provided solutions. Things that affect heap snapshot that you can control. http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-tools-javascript-and-performance/

Console API

https://getfirebug.com/wiki/index.php?title=Command_Line_API&oldid=7202 monitorEvents types http://anti-code.com/devtools-cheatsheet/#console-api

Extensions

The 25 best Google Chrome extensions for web designers http://www.netmagazine.com/features/33-fantastic-chrome-extensions http://pagespeed-velocity2011.appspot.com/#1 http://addyosmani.com/blog/devtools-extensions-for-webapp-developers/ https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd https://chrome.google.com/webstore/detail/grunt-devtools/fbiodiodggnlakggeeckkjccjhhjndnb https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk https://github.com/spect88/backbone-devtools http://sokolovstas.github.io/SublimeWebInspector/

Theming

Videos

developers.google.com

old videos mainly from Paul:

https://developers.google.com/chrome-developer-tools/docs/videos#getting_started https://developers.google.com/chrome-developer-tools/docs/videos#elements_resources https://developers.google.com/chrome-developer-tools/docs/videos#debugging https://developers.google.com/chrome-developer-tools/docs/videos#profiling https://developers.google.com/chrome-developer-tools/docs/videos#timeline https://developers.google.com/chrome-developer-tools/docs/videos#consolepower

I/O series:
2010:

https://www.youtube.com/v/TH7sJbyXHuk 2011: https://www.youtube.com/v/N8SS-rUEZPg 2012: https://www.youtube.com/v/3pxf3Ju2row

elsewhere http://www.youtube.com/watch?v=hAzhayTnhEI Jank Buster I/O 2012 http://vimeo.com/53073654 Patrick Dubroy at Oredev

Some of the links below are older, or cover specific use cases

Other https://github.com/simonowendesign/chrome-dev-tools-images

  • in case this is needed at all

I/O 2013 http://www.youtube.com/watch?v=kVSo4buDAEE https://www.youtube.com/watch?feature=player_embedded&v=x6qe_kVaBpg#****! **and many others. **

Breakpoint Episodes

People who talk about the DevTools

Clone this wiki locally