Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
It’s All About DevTools
Search
Yuya Saito
June 27, 2015
Programming
0
110
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
Design System as a Product @ Frontrend Vol.8
studiomohawk
2
4.8k
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
2k
Guiding Through The JavaScript Frameworks
studiomohawk
8
1.1k
CSSI: CSS Investigation
studiomohawk
21
9.6k
Performance in CSS
studiomohawk
5
370
Refactoring: What, Why and When
studiomohawk
5
300
Refactoring CSS
studiomohawk
9
550
Leveling Up Your Front-end skills
studiomohawk
6
1.4k
A Recipe for Modern Mobile Front-end Development
studiomohawk
16
5.6k
Other Decks in Programming
See All in Programming
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
240
フロントエンドテストの育て方
quramy
9
2.6k
読もう! Android build ドキュメント
andpad
1
240
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
600
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.3k
Going Structural with Named Tuples
bishabosha
0
170
体得しよう!RSA暗号の原理と解読
laysakura
3
540
Let's Take a Peek at PHP Parser 5.x!
inouehi
0
100
ベクトル検索システムの気持ち
monochromegane
30
9k
OUPC2024 Day 1 解説
kowerkoint
0
400
SQL Server ベクトル検索
odashinsuke
0
120
ニックトレイン登壇資料
ryotakurokawa
0
140
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Music & Morning Musume
bryan
46
6.4k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
The Invisible Side of Design
smashingmag
299
50k
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