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

Master of DevTools

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Levan Velijanashvili Levan Velijanashvili
December 20, 2013
Technology
0
450

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
Tweet

More Decks by Levan Velijanashvili

See All by Levan Velijanashvili
Making Dumb Devices Smart
Avatar for Levan Velijanashvili stichoza
0
10
Being a Developer
Avatar for Levan Velijanashvili stichoza
0
8
Laravel Spark
Avatar for Levan Velijanashvili stichoza
3
510
D3.js - Data-Driven Documents
Avatar for Levan Velijanashvili stichoza
0
260
Gulp - The Streaming Build System
Avatar for Levan Velijanashvili stichoza
2
390

Other Decks in Technology

See All in Technology
クラウド × シリコンの Mashup - AWS チップ開発で広がる AI 基盤の選択肢
Avatar for Hiroshi Tokoyo htokoyo
2
250
Everything Claude Code を眺める
Avatar for Oikon oikon48
3
2.9k
最強のAIエージェントを諦めたら品質が上がった話 / how quality improved after giving up on the strongest AI agent
Avatar for kt2 kt2mikan
0
180
Agent ServerはWeb Serverではない。ADKで考えるAgentOps
Avatar for 為藤アキラ akiratameto
0
100
OCI Security サービス 概要
Avatar for oracle4engineer oracle4engineer
PRO
2
13k
Kubernetesにおける推論基盤
Avatar for ry ry
1
380
プラットフォームエンジニアリングはAI時代の開発者をどう救うのか
Avatar for Kazuto Kusama jacopen
2
520
JAWS Days 2026 楽しく学ぼう！ 認証認可 入門/20260307-jaws-days-novice-lane-auth
Avatar for opelab opelab
11
2.2k
社内レビューは機能しているのか
Avatar for Jun Matsuba matsuba
0
130
S3はフラットである –AWS公式SDKにも存在した、 署名付きURLにおけるパストラバーサル脆弱性– / JAWS DAYS 2026
Avatar for GMO Flatt Security flatt_security
0
1.8k
フロントエンド刷新 4年間の軌跡
Avatar for nus3 yotahada3
0
150
タスク管理も1on1も、もう「管理」じゃない ― KiroとBedrock AgentCoreで変わった"判断の仕事"
Avatar for Yusuke Shimizu yusukeshimizu
6
2.6k

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
230
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
860
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
80
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
200
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k

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