Top Banner

of 27

°ë¦¬ê°€ ë°ë‍ë ¬ë¬ ê°œë°œ‍ ë„구

Dec 20, 2014

ReportDownload

Technology

크롬 개발자 도구들의 다양한 기능들을 살펴봅니다.

  • 1. 2014.03.19 naver_ * Based on chrome 33

2. index 1. Workspaces 2. Local Modifications 3. Console API 4. Command Line API 5. Experiments 6. Remote Debugging 7. Flame Chart 8. Rendering 9. Finding forced synchronous layouts 10. Mobile Emulation 11. Audits 12. Layer Panel 13. Breakpoints 14. Miscellaneous 15. Plugin : JS Runtime Inspector 3. Workspaces element DOM element css/JS element.style inline style element , Sources Ctrl + S (Mac : command + S) 1. Workspace 2. 4. Local Modifications history 5. console.assert(expression, string); console.count(string); console.time(string) / console.timeEnd(string) Console API 6. console.group(), console.groupCollapsed() / console.groupEnd() . console.table([ ]); debugger Console API 7. %s %d, %i %f Floating point %o DOM %O JavaScript %c CSS https://developers.google.com/chrome-developer-tools/docs/console-api Console API console.log(object [, object, ]) . 8. API, . . $(selector) document.querySelector - CSS $$(selector) document.querySelectorAll - CSS $x(selector) Xpath $_ $0 ~ $4 Elements 5 DOM copy(object) inspect(object) Elements . Command Line API 9. Command Line API getEventListeners(object) keys() key 10. Command Line API monitorEvents(object[, events]) unmonitorEvents(object[, events]) monitor(function[, ]) unmonitor(function[, ]) 11. chrome://flags/#enable-devtools-experiments chrome://flags > . Experiments 12. Windows usb http://developer.android.com/tools/extras/oem-usb.html Remote Debugging 13. Screencast , Remote Debugging 14. Port Forwarding Port forwarding , usb . Remote Debugging 15. Android 4.4 (KitKat) WebView : https://developers.google.com/chrome/mobile/docs/webview/overview#what_version_of_chrome_is_it_based_on 4.4 30.0.0.0 OS Remote Debugging 16. Profiles > Record JavaScript CPU profile Name The name of the function. Self time How long it took to complete the current invocation of the function, including only the statements in the function itself, not including any functions that it called. Total time The time it took to complete the current invocation of this function and any functions that it called. Aggregated self time Aggregate time for all invocations of the function across the recording, not including functions called by this function. Aggregated total time Aggregate total time for all invocations of the function, including functions called by this function. Flame Chart 17. Console Tab > Rendering > Show Paint rectangles . fixed Paint Demo : http://css3exp.com/moon/ Show FPS meter . Android GPU Enable continuous page repainting . * DOM tree 'H' , . Rendering 18. . , , (forced synchronous layouts) . element.offsetTop/offsetLeft/offsetWidth/offsetHeight element.scrollTop/Left/Width/Height element.clientTop/Left/Width/Height focus() getBoundingClientRect() getClientRects() innerText / outerText scrollByLines() / scrollByPages() scrollIntoView() / scrollIntoViewIfNeeded() "layout-thrashing" . Timeline , . Demo : https://developers.google.com/chrome-developer-tools/docs/demos/too-much-layout/ Finding forced synchronous layouts 19. UA, , pixel ratio, GPS . shift Mobile Emulation 20. . Audits 21. Demo : http://www.webkit.org/blog-files/3d-transforms/poster-circle.html Layers Panel Experiments > Show Layers Panel . 22. Elements > Break on : Element Breakpoints Sources > Pause on exceptions 3 : () Sources > breakpoint 23. Network > Replay XHR : XHR Sources > Watch Expressions : Miscellaneous 24. . (Windows ChromeOS ) Shift + PgUp/PgDown : 3 Shift + Arrow, PgUp/PgDown : 2 Arrow : 1 Alt + Arrow : Miscellaneous 25. Plugin : JS Runtime Inspector https://chrome.google.com/webstore/detail/js-runtime-inspector/iilpjebedgohcmlffhnkhbjhabkdhfmn 26. http://www.html5rocks.com/en/tutorials/developertools/mobile/ http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ https://developers.google.com/chrome-developer-tools/ https://plus.google.com/u/0/+FrancoisBeaufort/posts/ef6ZatGpNMP http://discover-devtools.codeschool.com/ Reference 27. . fin.