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
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
920
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Anthropic Cookbook のおすすめレシピ
schroneko
7
880
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
300
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
110
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
ゆるい個人開発のススメ
kuroppe1819
10
990
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
We Have a Design System, Now What?
morganepeng
43
6.7k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Designing for Performance
lara
601
67k
Navigating Team Friction
lara
178
13k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
A Tale of Four Properties
chriscoyier
151
22k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
The Invisible Side of Design
smashingmag
294
49k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
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