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
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
150
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
250
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1k
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
750
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
150
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
100
Node.js 2025: What's new and what's next
ruyadorno
0
250
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Embracing the Ebb and Flow
colly
88
4.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Scaling GitHub
holman
463
140k
It's Worth the Effort
3n
187
28k
Being A Developer After 40
akosma
91
590k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Cult of Friendly URLs
andyhume
79
6.6k
Docker and Python
trallard
46
3.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Practical Orchestrator
shlominoach
190
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
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