It’s All About 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 '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