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
   

   View Slide

2. Yuya Saito
   UX Engineer
   at Rich Media
   O
   

   View Slide

3. frontendweekly.tokyo
   frontendweekly.tokyo
   'SPOUFOE8FFLMZ͸ɺ
   ຖिϑϩϯτΤϯυ։ൃʹؔ࿈͢Δ
   هࣄɺνϡʔτϦΞϧɺಈըεϥΠυͳͲΛɺ
   ΩϡϨʔγϣϯͯ͠ϝʔϧͰ͓ಧ͚͠·͢ɻ
   

   View Slide

4. Setup
   彊⪒
   

   View Slide

5. View Slide

6. Google
   Chrome
   Canary
   by Google
   d.pr/15MoB
   

   View Slide

7. 嫣傈،حفر٦ز
   ⚛遤؎ٝأز٦ٕ
   ׋תח
   㠨׸׷
   

   View Slide

8. View Slide

9. Developer Tools
   experiments
   ׾剣⸬חׅ׷
   

   View Slide

10. chrome://flags/#enable-devtools-experiments
    

    View Slide

11. Settings
    鏣㹀
    

    View Slide

12. developer
    chrome.com
    by Google
    d.pr/15JYp
    

    View Slide

13. d.pr/i/1ji0X
    

    View Slide

14. Experimental
    

    View Slide

15. 穠圓
    㠨׸׷
    سًُؗٝزכ קר
    זְ
    

    View Slide

16. View Slide

17. SHIFT * 6
    

    View Slide

18. What’s New
    with DevTools?
    DevToolsך剑倜堣腉
    

    View Slide

19. Animation Timeline
    

    View Slide

20. View Slide

21. View Slide

22. Frame Viewer
    in Timeline
    

    View Slide

23. View Slide

24. View Slide

25. Filmstrip in Network
    and Timeline
    

    View Slide

26. View Slide

27. View Slide

28. Blackboxing JavaScript
    Accessibility Inspection
    Promises Inspector
    

    View Slide

29. Working with
    Workspace
    Workspace׾⢪ְֿזׅ
    

    View Slide

30. Workspace?
    0.
    

    View Slide

31. Get Ready
    1.
    

    View Slide

32. View Slide

33. View Slide

34. Map Your Source
    2.
    

    View Slide

35. View Slide

36. View Slide

37. LESS
    Sass
    Stylus?
    

    View Slide

38. Iterate!
    3.
    

    View Slide

39. View Slide

40. Editor in DevTools
    Tipsabout
    

    View Slide

41. 1.⦼׾وؐأװؗ٦ن٦سד
    㢌刿דֹ׷
    

    View Slide

42. 2.وٕثؕ٦إ堣腉
    

    View Slide

43. Finally
    剑䖓ח
    

    View Slide

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
    

    View Slide

45. “
    ـٓؐؠⰻ鿇ך⫴ֹ׾㷕ע✲כ8FCꟚ涪罏ח
    ה׏ג״׶״ְ鍑寸׾遤ֲֿהծ
    ׉׃גꟚ涪חֶֽ׷كأزفؙٓذ؍أך
    胜䖓ח֮׷呎䬿׾椚鍑ׅ׷ֿהחאזָ׷կ
    — Paul Irish
    

    View Slide

46. Performance
    Matters!
    

    View Slide

47. View Slide

48. Thank You!
    @cssradar
    Follow me
    

    View Slide