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
Master of DevTools
Search
Levan Velijanashvili
December 20, 2013
Technology
0
430
Master of DevTools
My first talk at hack@CST hackathon about Chrome Developer Tools and web optimization
Levan Velijanashvili
December 20, 2013
Tweet
Share
More Decks by Levan Velijanashvili
See All by Levan Velijanashvili
Laravel Spark
stichoza
3
500
D3.js - Data-Driven Documents
stichoza
0
250
Gulp - The Streaming Build System
stichoza
2
380
Other Decks in Technology
See All in Technology
初めてのDatabricks Apps開発
taka_aki
1
130
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
270
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
130
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
350
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2k
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
recruitengineers
PRO
3
100
Featured
See All Featured
Building an army of robots
kneath
306
46k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
870
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building Applications with DynamoDB
mza
96
6.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
BBQ
matthewcrist
89
9.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Designing for Performance
lara
610
69k
Six Lessons from altMBA
skipperchong
29
4k
Transcript
Developer Tools
Topics DOM and Styles Editing Sources Debugging JavaScript Improving Network
Performance Improving Performance Memory Profiling
Bad old times No debuggers Early debuggers Lazy alert()
JS
CSS .sidebar-levels h3 a { transition: border-color 0.2s ease-in-out; border:
2px solid #bebebe; border-radius: 50%; color: #777777; display: block; margin-top: 7px; text-align: center; width: 30px; } @media screen and (min-width: 1060px) { .sidebar-levels h3 a { margin-right: 30px; } }
edit – save – test
Chrome Developer Tools
None
None
Elements DOM and CSS Document Object Model and Styles
Let’s see in action (live examples here from screen)
Editing Sources Modify Sources Export Changes Track Versions
Console Log (Errors, Warnings, Info…) Command Line (Run JavaScript) etc.
Raw JavaScript Minified JavaScript function hello(name) { if (name.length >
16) { alert("No!"); } else { alert("Hi " + name + "!"); } } function hello(n){alert(n.length>16?"No!":"Hi “+n+"!")}
Raw JavaScript: Min Version: 226 KB !!! 89 KB 226
/ 89 ≈ 2.5
Levan Velijanashvili
[email protected]
twitter.com/Stichoza github.com/Stichoza