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
100
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
290
Refactoring CSS
studiomohawk
9
540
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
CI改善もDatadogとともに
taumu
0
110
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Unity Android XR入門
sakutama_11
0
140
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Featured
See All Featured
Done Done
chrislema
182
16k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
BBQ
matthewcrist
86
9.5k
Site-Speed That Sticks
csswizardry
3
370
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
A better future with KSS
kneath
238
17k
Automating Front-end Workflow
addyosmani
1367
200k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
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