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
0
430

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
Laravel Spark
Avatar for Levan Velijanashvili stichoza
3
500
D3.js - Data-Driven Documents
Avatar for Levan Velijanashvili stichoza
0
250
Gulp - The Streaming Build System
Avatar for Levan Velijanashvili stichoza
2
380

Other Decks in Technology

See All in Technology
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
Avatar for Yuto Osawa osawa
1
280
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
9
73k
roppongirb_20250911
Avatar for Kuniaki IGARASHI igaiga
1
230
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
130
いま注目のAIエージェントを作ってみよう
Avatar for Marimo supermarimobros
0
240
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
Avatar for oracle4engineer oracle4engineer
PRO
4
10k
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
Avatar for Yuki Miida miichan
2
180
下手な強制、ダメ！絶対！ 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは？
Avatar for Masataka Tsukamoto tsukaman
2
450
AWSを利用する上で知っておきたい名前解決のはなし（10分版）
Avatar for nagisa_53 nagisa53
10
3.1k
DroidKaigi 2025 Androidエンジニアとしてのキャリア
Avatar for mhidaka mhidaka
2
250
Platform開発が先行する Platform Engineeringの違和感
Avatar for KintoTech_Dev kintotechdev
4
570
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
Avatar for shinaps shinaps
2
450

Featured

See All Featured
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
840
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
810
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k

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