フロントエンドデベロッパのためのGoogle Chrome DevTools
by Yuya Saito from Rich Media2015.6.27 @ Remixing#remixingdevAll AboutDevToolsIt's
View Slide
Yuya SaitoUX Engineerat Rich MediaO
frontendweekly.tokyofrontendweekly.tokyo'SPOUFOE8FFLMZɺຖिϑϩϯτΤϯυ։ൃʹؔ࿈͢ΔهࣄɺνϡʔτϦΞϧɺಈըεϥΠυͳͲΛɺΩϡϨʔγϣϯͯ͠ϝʔϧͰ͓ಧ͚͠·͢ɻ
Setup彊⪒
GoogleChromeCanaryby Googled.pr/15MoB
嫣傈،حفر٦ز⚛遤؎ٝأز٦ٕתח㠨
Developer Toolsexperiments剣⸬חׅ
chrome://flags/#enable-devtools-experiments
Settings鏣㹀
developerchrome.comby Googled.pr/15JYp
d.pr/i/1ji0X
Experimental
穠圓㠨سًُؗٝزכ קרזְ
SHIFT * 6
What’s Newwith DevTools?DevToolsך剑倜堣腉
Animation Timeline
Frame Viewerin Timeline
Filmstrip in Networkand Timeline
Blackboxing JavaScriptAccessibility InspectionPromises Inspector
Working withWorkspaceWorkspace⢪ְֿזׅ
Workspace?0.
Get Ready1.
Map Your Source2.
LESSSassStylus?
Iterate!3.
Editor in DevToolsTipsabout
1.⦼وؐأװؗ٦ن٦سד㢌刿דֹ
2.وٕثؕ٦إ堣腉
Finally剑䖓ח
“As a web developer, learning the internalsof browser operations helps you makebetter decisions and knowthe justifications behind developmentbest practices.— Paul IrishPaul IrishPaul Irish
“ـٓؐؠⰻ鿇ך⫴ֹ㷕ע✲כ8FC涪罏חהג״״ְ鍑寸遤ֲֿהծ׃ג涪חֶֽكأزفؙٓذ؍أך胜䖓ח֮呎䬿椚鍑ֿׅהחאזָկ— Paul Irish
PerformanceMatters!
Thank You!@cssradarFollow me