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
120
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.9k
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
390
Refactoring: What, Why and When
studiomohawk
5
300
Refactoring CSS
studiomohawk
9
570
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
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
33k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
420
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
140
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
3
580
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
530
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
970
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
6.1k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
620
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
11k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How to Ace a Technical Interview
jacobian
277
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
Being A Developer After 40
akosma
90
590k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Practical Orchestrator
shlominoach
188
11k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Optimising Largest Contentful Paint
csswizardry
37
3.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