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
99
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.6k
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
2k
Guiding Through The JavaScript Frameworks
studiomohawk
8
1k
CSSI: CSS Investigation
studiomohawk
21
9.5k
Performance in CSS
studiomohawk
5
360
Refactoring: What, Why and When
studiomohawk
5
290
Refactoring CSS
studiomohawk
9
530
Leveling Up Your Front-end skills
studiomohawk
6
1.4k
A Recipe for Modern Mobile Front-end Development
studiomohawk
16
5.5k
Other Decks in Programming
See All in Programming
GraphQL あるいは React における自律的なデータ取得について
quramy
11
2.8k
What you can do with Ruby on WebAssembly
kateinoigakukun
0
160
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
260
Rustではじめる負荷試験
skanehira
5
1.2k
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Why Prism?
kddnewton
4
1.7k
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
The Shape of a Service Object
inem
0
490
Kotlin 2.0 and Beyond
antonarhipov
2
150
REXML改善のその後
naitoh
0
190
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
130
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
150
Featured
See All Featured
The Mythical Team-Month
searls
218
43k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Designing with Data
zakiwarfel
98
5k
Gamification - CAS2011
davidbonilla
79
4.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Thoughts on Productivity
jonyablonski
66
4.2k
Visualization
eitanlees
142
15k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Building Your Own Lightsaber
phodgson
101
6k
Agile that works and the tools we love
rasmusluckow
327
20k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
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