Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Master of DevTools

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
33
Being a Developer
Avatar for Levan Velijanashvili stichoza
0
37
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
410

Other Decks in Technology

See All in Technology
プロダクトエンジニアに必要な「いい感じ」に作る能力 〜たくさん作れる時代に、どこまで作るかの決め方〜
Avatar for Jotaro Nishime jnishime_dresscode
2
1.3k
DINO-EdgeQuery:Edge-First Polygon Decoding for Building Footprint Extraction from Satellite Imagery
Avatar for Yuji Kobayashi lehupa
0
140
Beyond the Hype: Practical AI for Your Oracle Database with MCP
Avatar for thatjeffsmith thatjeffsmith
1
250
Sony-DroidKaigi2026
Avatar for ソニー株式会社 sony
1
310
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
Avatar for LayerX layerx
PRO
2
1.2k
Self Healing Rollouts: Automating Production Fixes with Agentic AI
Avatar for Kevin Dubois kdubois
0
150
Bet AI Day 2026丨How We Bet AI: AIとともに働く場をつくる
Avatar for LayerX layerx
PRO
1
2.2k
AIエージェントの開発・提供におけるセキュリティリスクの論点と対策
Avatar for GMO Flatt Security flatt_security
1
560
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
170
いま、生成AIにKaggleをどこまで 任せられるか — ROGIIコンペでの進め方とTips
Avatar for monnu k951286
3
1.4k
AI活用の現在地、 ちゃんと見えてますか？/XPfest-2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
150
コスト最適化の「めんどくさい」を AWS FinOps Agent でチョット楽にする
Avatar for kaz classmethod_kaz
0
140

Featured

See All Featured
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
380
Design in an AI World
Avatar for tapps tapps
1
300
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
460
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
540
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
310
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
550
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
4
560
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k

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