It’s All About DevTools

フロントエンドデベロッパのためのGoogle Chrome DevTools

Transcript

1. by Yuya Saito from Rich Media 2015.6.27 @ Remixing #remixingdev All About DevTools It's
2. Yuya Saito UX Engineer at Rich Media O
3. frontendweekly.tokyo frontendweekly.tokyo 'SPOUFOE
   8FFLMZ͸ɺ
   ຖिϑϩϯτΤϯυ։ൃʹؔ࿈͢Δ
   هࣄɺνϡʔτϦΞϧɺಈըεϥΠυͳͲΛɺ
   ΩϡϨʔγϣϯͯ͠ϝʔϧͰ͓ಧ͚͠·͢ɻ
4. Setup 彊⪒
6. Google Chrome Canary by Google d.pr/15MoB
7. 嫣傈،حفر٦ز ⚛遤؎ٝأز٦ٕ ׋תח 㠨׸׷
9. Developer Tools experiments ׾剣⸬חׅ׷
10. chrome://flags/#enable-devtools-experiments
11. Settings 鏣㹀
12. developer chrome.com by Google d.pr/15JYp
13. d.pr/i/1ji0X
14. Experimental
15. 穠圓 㠨׸׷ سًُؗٝزכ קר זְ
17. SHIFT * 6
18. What’s New with DevTools? DevToolsך剑倜堣腉
19. Animation Timeline
22. Frame Viewer in Timeline
25. Filmstrip in Network and Timeline
28. Blackboxing JavaScript Accessibility Inspection Promises Inspector
29. Working with Workspace Workspace׾⢪ְֿזׅ
30. Workspace? 0.
31. Get Ready 1.
34. Map Your Source 2.
37. LESS Sass Stylus?
38. Iterate! 3.
40. Editor in DevTools Tipsabout
41. 1.⦼׾وؐأװؗ٦ن٦سד
    㢌刿דֹ׷
42. 2.وٕثؕ٦إ堣腉
43. Finally 剑䖓ח
44. “ As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices. — Paul Irish Paul Irish Paul Irish
45. “ ـٓؐؠⰻ鿇ך⫴ֹ׾㷕ע✲כ8FCꟚ涪罏ח ה׏ג״׶״ְ鍑寸׾遤ֲֿהծ
    ׉׃גꟚ涪חֶֽ׷كأزفؙٓذ؍أך
    胜䖓ח֮׷呎䬿׾椚鍑ׅ׷ֿהחאזָ׷կ — Paul Irish
46. Performance Matters!
48. Thank You! @cssradar Follow me