Chrome Developer Toolsを使いこなそう!
69
Chrome Developer Tools を 使いこなそう! 2013/04/02 Google Developers Live Japan #3 このスライドを使ったセッションはこちら → http://bit.ly/YYtStr Toru Yoshikawa (@yoshikawat)
-
Upload
yoshikawat -
Category
Technology
-
view
20.889 -
download
8
description
4/2のGoogle Developers Live Japan #3の資料です。
Transcript of Chrome Developer Toolsを使いこなそう!
- 1. Chrome Developer Tools 2013/04/02 Google Developers Live Japan #3 http://bit.ly/YYtStr Toru Yoshikawa (@yoshikawa_t)
- 2. Who? / Toru Yoshikawa@yoshikawa_t Google Developer Experts (Chrome) html5j/HTML5 Web jQuery Mobile Sublime Text 2 Japan Users Group allWeb/jQuery Mobile Blog: http://d.hatena.ne.jp/pikotea/
- 3. Chrome DevTools for beginners (http:// www.slideshare.net/yoshikawa_t/chrome- devtools-for-beginners)
- 4. Elements Resources Web Storage Network Sources JavaScriptTimeline Proles CPUCSSAudits Console JavaScript
- 5. AgendaSourcesTipsJavaScriptTimelineTimelineProles
- 6. SourcesTips
- 7. Sources
- 8. Content scripts Chrome Extensions
- 9. ElementsSourcesLocal Modications...
- 10.
- 11. Command+O Command+Shift+O Command+L CommandOptionF
- 12.
- 13. MinifyJavaScript MinifyJavaScript
- 14. JavaScript
- 15. JavaScript1. 2. 3. 4. 2
- 16. Breakpoints debugger
- 17. Watch ExpressionsCall StackScope VariableConsole
- 18. Watch Expressions
- 19. Call Stack
- 20. Scope Variables
- 21. Console
- 22. Pause/Continue (F8)Step over (F10)Step into (F11)Step out (Shift+F11)
- 23.
- 24. Breakpoints DOM Breakpoints XHR Breakpoints Event Listener Breakpoints Exception Workers
- 25. Breakpointstrue
- 26. DOM Breakpoints ElementsEvent Listener BreakpointsDOM Mutation
- 27. XHR BreakpointsXHR(Ajax)URLXHR Breakpoints
- 28. Event Listener Breakpoints Animation, Timer requestAnimationFramesetTimeout Control, Device resizescroll, deviceorientation Clipboard Touch, Mouse, Keyboard DOM Mutation DOM
- 29. ExceptionExceptionExceptioncatchException
- 30. WorkersWeb WorkersWeb WorkerJS
- 31. LiveEdit!JavaScript
- 32. Timeline
- 33.
- 34. Timeline
- 35. Timeline GC 15ms
- 36. Timeline Loading Scripting JS Rendering DOM Painting opacitybox-shadow
- 37. Events Loading > Scripting > JavaScript Rendering, Painting > DOMDOMContentLoadedload
- 38. Frames30FPS60FPS30FPS24FPSFPS60FPS
- 39.
- 40.
- 41. Loading
- 42. Loading Send Request Receive Response Receive Data Finish Loading HTMLJavaScriptdocument.write()Parse HTML innerHTML
- 43. Scripting
- 44. Scripting Evaluate Script JavaScriptFunction Call Event Install Timer setIntervalsetTimeoutTimer Fired Remove Timer GC Event GCXHR Ready State Change XMLHttpRequstCreate WebSocket WebSocketDestroy WebSocket WebSocketRequest Animation Frame requestAnimationFrameAnimation Frame Fired
- 45. RenderingDOMDOM
- 46. Rendering Recalculate Style DOMLayout
- 47. Rendering
- 48. Painting
- 49. Painting Composite Layers Paint Scroll Image Decode Image Resize
- 50. TimelineProles
- 51.
- 52. MemoryGCGC
- 53. Memory (Counters) [ - ] DOM Node CountEvent Listener Count iframe Proles
- 54. ProlesCPUCSS SelectorHeap SnapshotTake Heap Snapshot
- 55. ProlesTimelineStartCPU Proleconsole.prole() console.proleEnd()
- 56. Proles (Heap Snapshots) 2
- 57. Proles (Heap Snapshots) GC # New > # Deleted > # Delta > Alloc. Size > Freed Size > Size Delta >
- 58. Objects retaining tree
- 59. Tips
- 60. Chrome Developer Tools chrome://agsSettings
- 61. Page Speed Accessibility Developer Tools AuditsjQuery Debugger jQueryElementsDevTools autosave ElementsSourcesAngularJS Batarang AngularJSRailsPanel Ruby on Rails
- 62. DevTools autosave
- 63. MNML Theme (https://github.com/frontdevDE/mnml-devtools-theme)
- 64. Custom.cssMac ~/Library/Application Support/Google/Chrome/Default/ User StyleSheets/Custom.cssWindows C:UsersYourUsernameAppDataLocalGoogleChrome User DataDefaultUser StyleSheetsCustom.cssDevTools chrome-devtools://devtools/devTools.css
- 65. MNML Themehttps://github.com/frontdevDE/mnml-devtools-theme Monokai Darkhttps://gist.github.com/bc12d6bb85b96042e8Tomorrow Themehttps://gist.github.com/1163300IR_Black Themehttps://gist.github.com/1150520Solarized Darkhttps://gist.github.com/2174604Ruby Bluehttps://github.com/chrisbateman/ChromeDevToolsTheme-RubyBlue/Expressohttps://gist.github.com/1207219Inversionhttps://github.com/mohsen1/Chrome-Dev-tools-dark-themeDark Themehttps://github.com/xajler/chrome-devtools-dark-themeDark Devhttps://github.com/simonsmith/DarkDevWebLight ThemeTheme: https://gist.github.com/1325072
- 66. http://anti-code.com/devtools-cheatsheet/
- 67. Chrome Developer ToolsChrome Developer ToolsRemote debugChrome Developer Tools
- 68. Thank you!! (@yoshikawa_t)
- 69. Resourceshttps://developers.google.com/chrome-developer-tools/https://developers.google.com/live/chrome/http://anti-code.com/devtools-cheatsheet/