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

It’s All About DevTools

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
June 27, 2015
Programming
0
85

It’s All About DevTools

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

June 27, 2015
Tweet

More Decks by Yuya Saito

See All by Yuya Saito
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
2
3.4k
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
10
1.7k
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
8
750
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
21
9k
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
5
320
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
5
270
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
9
490
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
6
1.4k
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
16
4.9k

Other Decks in Programming

See All in Programming
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230
45fec3b965f9269bc8d6d2cf5bd93a13?s=48 haru067
2
540
79fe3c13c618a61329298bdd6a86ec42?s=48 basthomas
0
130
5d138ccf47c8d79aa8f0d29900f9e07b?s=48 rollbear
0
230
70adfe7679427fa498899769e632b672?s=48 itok
1
400
B5ea40fde5be980a112c4ea58ad3bd39?s=48 shoheimitani
0
130
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
130
0ed400174f90a4bcee05f3455597932f?s=48 ohbarye
3
240
89d1ae72e8683e44c744f4cab8d99f39?s=48 brainpadpr
1
1.5k
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
2
210
5f57d2d205e77e185986459c1b89a874?s=48 jeroenmols
2
260
D4133d8efb46ae872d7a563b619bfc83?s=48 jmatsu
1
1k

Featured

See All Featured
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
449
36k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
61
6.8k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
96
3.4k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
15
1k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
122
16k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
298
39k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.6k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
224
15k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
256
17k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
36k

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