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
95
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.3k
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
1.9k
Guiding Through The JavaScript Frameworks
studiomohawk
8
990
CSSI: CSS Investigation
studiomohawk
21
9.4k
Performance in CSS
studiomohawk
5
350
Refactoring: What, Why and When
studiomohawk
5
290
Refactoring CSS
studiomohawk
9
520
Leveling Up Your Front-end skills
studiomohawk
6
1.4k
A Recipe for Modern Mobile Front-end Development
studiomohawk
16
5.4k
Other Decks in Programming
See All in Programming
Site Reliability Engineering for GMO
pyama86
8
1.1k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.2k
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
500
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
430
WebGLで始める コンピュータグラフィックス入門
heller77
0
280
AmperとFleetを使ったAndroidアプリ
yoppie
0
260
Polars入門
daikikatsuragawa
1
180
Hanami and htmx
bkuhlmann
0
230
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
490
Documentation for users with AsciiDoc and Antora
ahus1
0
370
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Automating Front-end Workflow
addyosmani
1357
200k
Design by the Numbers
sachag
274
18k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Web Components: a chance to create the future
zenorocha
306
41k
Done Done
chrislema
178
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Music & Morning Musume
bryan
41
5.6k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
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