Upgrade to Pro — share decks privately, control downloads, hide ads and more …

It’s All About DevTools

It’s All About DevTools

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

Yuya Saito

June 27, 2015
Tweet

More Decks by Yuya Saito

Other Decks in Programming

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