It’s All About DevTools

It’s All About DevTools

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

June 27, 2015
Tweet

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

  4. Setup 彊⪒

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

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

  8. None
  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. 穠圓 㠨׸׷ سًُؗٝزכ קר זְ

  16. None
  17. SHIFT * 6

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

  19. Animation Timeline

  20. None
  21. None
  22. Frame Viewer in Timeline

  23. None
  24. None
  25. Filmstrip in Network and Timeline

  26. None
  27. None
  28. Blackboxing JavaScript Accessibility Inspection Promises Inspector

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

  30. Workspace? 0.

  31. Get Ready 1.

  32. None
  33. None
  34. Map Your Source 2.

  35. None
  36. None
  37. LESS Sass Stylus?

  38. Iterate! 3.

  39. None
  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!

  47. None
  48. Thank You! @cssradar Follow me