Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
It’s All About DevTools
Yuya Saito
June 27, 2015
Programming
0
83
It’s All About DevTools
フロントエンドデベロッパのためのGoogle Chrome DevTools
Yuya Saito
June 27, 2015
Tweet
Share
More Decks by Yuya Saito
See All by Yuya Saito
studiomohawk
2
3.3k
studiomohawk
10
1.6k
studiomohawk
8
700
studiomohawk
21
8.9k
studiomohawk
5
320
studiomohawk
5
270
studiomohawk
9
490
studiomohawk
6
1.4k
studiomohawk
16
4.8k
Other Decks in Programming
See All in Programming
daiki_0816
0
150
daipresents
0
320
clusterinc
0
280
sh_akira
3
120
d_endo
1
510
yattom
31
11k
gtongy
0
460
thatjeffsmith
0
1.4k
joytomo
1
530
progate
2
500
deepu105
1
190
daipresents
8
3k
Featured
See All Featured
tammielis
237
23k
rasmusluckow
318
19k
chriscoyier
146
20k
phodgson
88
4k
lynnandtonic
272
16k
skipperchong
8
780
kneath
294
39k
jrom
116
7.2k
swwweet
206
6.9k
rocio
155
11k
chriscoyier
779
240k
morganepeng
94
14k
Transcript
by Yuya Saito from Rich Media 2015.6.27 @ Remixing #remixingdev
All About DevTools It's
Yuya Saito UX Engineer at Rich Media O
frontendweekly.tokyo frontendweekly.tokyo 'SPOUFOE8FFLMZɺ ຖिϑϩϯτΤϯυ։ൃʹؔ࿈͢Δ هࣄɺνϡʔτϦΞϧɺಈըεϥΠυͳͲΛɺ ΩϡϨʔγϣϯͯ͠ϝʔϧͰ͓ಧ͚͠·͢ɻ
Setup 彊⪒
None
Google Chrome Canary by Google d.pr/15MoB
嫣傈،حفر٦ز ⚛遤؎ٝأز٦ٕ תח 㠨
None
Developer Tools experiments 剣⸬חׅ
chrome://flags/#enable-devtools-experiments
Settings 鏣㹀
developer chrome.com by Google d.pr/15JYp
d.pr/i/1ji0X
Experimental
穠圓 㠨 سًُؗٝزכ קר זְ
None
SHIFT * 6
What’s New with DevTools? DevToolsך剑倜堣腉
Animation Timeline
None
None
Frame Viewer in Timeline
None
None
Filmstrip in Network and Timeline
None
None
Blackboxing JavaScript Accessibility Inspection Promises Inspector
Working with Workspace Workspace⢪ְֿזׅ
Workspace? 0.
Get Ready 1.
None
None
Map Your Source 2.
None
None
LESS Sass Stylus?
Iterate! 3.
None
Editor in DevTools Tipsabout
1.⦼وؐأװؗ٦ن٦سד 㢌刿דֹ
2.وٕثؕ٦إ堣腉
Finally 剑䖓ח
“ 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
“ ـٓؐؠⰻ鿇ך⫴ֹ㷕ע✲כ8FC涪罏ח הג״״ְ鍑寸遤ֲֿהծ ׃ג涪חֶֽكأزفؙٓذ؍أך 胜䖓ח֮呎䬿椚鍑ֿׅהחאזָկ — Paul Irish
Performance Matters!
None
Thank You! @cssradar Follow me