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
83

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.3k
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
10
1.6k
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
8
700
32f242f75b63e7174b493446de54a6b8?s=48 studiomohawk
21
8.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.8k

Other Decks in Programming

See All in Programming
A581cbb76555d4854d3264a16fed5d13?s=48 daiki_0816
0
150
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
0
320
9e32efa81b675ecd55c166fb7b0a1890?s=48 clusterinc
0
280
091c8449decb2f3549c695b5f903865a?s=48 sh_akira
3
120
94dac49f3455009e22b372ab8cd60182?s=48 d_endo
1
510
Acd2f6f7498ea41881e161e191aa7c02?s=48 yattom
31
11k
8834a79ab8e0412b2130131817be73d9?s=48 gtongy
0
460
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
1.4k
A1792748885fe8f2555d9c718ee7ae53?s=48 joytomo
1
530
Ee974eb4dea26c2f17f42460366bb745?s=48 progate
2
500
7f408bc67dc9ae3b288ee92d16d3c4c2?s=48 deepu105
1
190
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
8
3k

Featured

See All Featured
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
146
20k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
88
4k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
272
16k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
8
780
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
116
7.2k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.9k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
779
240k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
94
14k

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