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

Master of DevTools

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Levan Velijanashvili Levan Velijanashvili
December 20, 2013
Technology
470
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
26
Being a Developer
Avatar for Levan Velijanashvili stichoza
0
27
Laravel Spark
Avatar for Levan Velijanashvili stichoza
3
530
D3.js - Data-Driven Documents
Avatar for Levan Velijanashvili stichoza
0
280
Gulp - The Streaming Build System
Avatar for Levan Velijanashvili stichoza
2
400

Other Decks in Technology

See All in Technology
AI時代における最適なQA組織の作り方
Avatar for ymty ymty
3
250
BPaaSで進むAIオペレーションの現在地 AI実装が効く領域とスケーラビリティの選定と実装
Avatar for KentaroFujii kentarofujii
0
220
デジタル・デザイン構想 by Sayaka Ishizuka
Avatar for Sayaka Ishizuka y150saya
0
130
FinOps X 2026 Recap from Engineer Side #JapanFinOps
Avatar for Satoshi Matsuzawa (Matt) chacco38
0
180
『AIに負けない』より『AIと遊ぶ』」〜ワクワクが最強のテスト・QA学習戦略_公開用
Avatar for odan tomohiro odan611
1
200
週末にループ・エンジニアリングの理解を深めるためのスライド
Avatar for 長津孝輔 nagatsu
0
680
きのこカンファレンス2026_肩書きを外したとき私は誰か
Avatar for yamasatimi yamasatimi
1
110
技術・能力を向上する原理原則 #きのこセッションa #きのこ2026
Avatar for bash0C7 bash0c7
0
190
本当の”仕事”を手放せる未来が見えた
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
200
AI 不只幫你寫 Code： 當專案從 300 暴增到 1500， 我們如何撐住 DevOps
Avatar for Bo-Yi Wu appleboy
0
300
Kotlin 開発のツラミを爆破した話！ / Explode the difficulty of Kotlin dev!
Avatar for Kengo TODA eller86
0
120
なぜ人は自分のプロジェクトを 「なんちゃってアジャイル」と 自嘲するのか
Avatar for Kozo Taira kozotaira
0
200

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
620
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
220
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
330
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
620
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
740
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
950
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
610
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
870
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
470

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