Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Master of DevTools

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Levan Velijanashvili Levan Velijanashvili
December 20, 2013
Technology
480
0

Master of DevTools

My first talk at hack@CST hackathon about Chrome Developer Tools and web optimization

Avatar for Levan Velijanashvili

Levan Velijanashvili

December 20, 2013

More Decks by Levan Velijanashvili

See All by Levan Velijanashvili
Making Dumb Devices Smart
Avatar for Levan Velijanashvili stichoza
0
38
Being a Developer
Avatar for Levan Velijanashvili stichoza
0
40
Laravel Spark
Avatar for Levan Velijanashvili stichoza
3
540
D3.js - Data-Driven Documents
Avatar for Levan Velijanashvili stichoza
0
290
Gulp - The Streaming Build System
Avatar for Levan Velijanashvili stichoza
2
420

Other Decks in Technology

See All in Technology
パスキーの自動テストはどこまでいけるのか
Avatar for teamLab teamlab
PRO
0
260
OptunaHub: ブラックボックス最適化のためのプラットフォーム
Avatar for Preferred Networks pfn
PRO
0
140
夫婦で子育てするための育児標準化
Avatar for コドモン開発チーム codmoninc
PRO
0
370
フロントエンドカンファレンス関西2026 - 速すぎるUIに、待ち時間を
Avatar for teamLab teamlab
PRO
0
140
S3 Filesで挑む！ 八戸せんべい汁の食べ頃問題
Avatar for usanchuu usanchuu
0
100
アウトプット初心者、半年間のふりかえり
Avatar for aoi 4o1sobblue
0
440
スプシの手作業からの解脱 ~更新はClaude Codeに、見せ方と使い方はGASアプリに任せる~
Avatar for KentaroFujii kentarofujii
0
150
SAENM ~Jupyterで残すPoCの試行錯誤、未来の自分と仲間を助ける記録！~
Avatar for Manabu TERADA terapyon
0
110
Conditional PED-ANOVA: Hyperparameter Importance in Hierarchical & Dynamic Search Spaces
Avatar for Preferred Networks pfn
PRO
0
140
専門領域のAIをどう評価するか
Avatar for 弁護士ドットコム bengo4com
2
220
実践！ SRE × AI - ABEMA における AIOps -
Avatar for tetsuya28 tetsuya28
8
3.1k
re:Invent初参加で変わったこと、2回目にやってみたいこと（JAWS-UG彩の国埼玉 #12）
Avatar for 株式会社みずほ銀⾏ 情報数理⼯学研究所 デジタル技術開発部 mhrtech
2
230

Featured

See All Featured
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
10
1.2k
Designing for Performance
Avatar for Lara Hogan lara
612
70k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
28k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8.1k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
2
2.2k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
192
12k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
43k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
600
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
540

Transcript

  1. Developer Tools

  2. Topics DOM and Styles Editing Sources Debugging JavaScript Improving Network

    Performance Improving Performance Memory Profiling

  3. Bad old times No debuggers Early debuggers Lazy alert()

  4. JS

  5. 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; } }

  6. edit – save – test

  7. Chrome Developer Tools

  8. None
  9. None

  10. Elements DOM and CSS Document Object Model and Styles

  11. Let’s see in action (live examples here from screen)

  12. Editing Sources Modify Sources Export Changes Track Versions

  13. Console Log (Errors, Warnings, Info…) Command Line (Run JavaScript) etc.

  14. 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+"!")}

  15. Raw JavaScript: Min Version: 226 KB !!! 89 KB 226

    / 89 ≈ 2.5

  16. Levan Velijanashvili [email protected] twitter.com/Stichoza github.com/Stichoza