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
How to achieve interoperable digital identity across Asian countries
Avatar for Naohiro Fujie fujie
0
120
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
1
510
AIが書いたコードをAIが検証する！自律的なモバイルアプリ開発の実現
Avatar for henteko henteko
1
350
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題！？
Avatar for Databricks Japan databricksjapan
0
150
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
Avatar for スパイダープラス株式会社 spiderplus_cb
0
510
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
Avatar for Taichi Nakamura taichinakamura
0
480
PLaMoの事後学習を支える技術 / PFN LLMセミナー
Avatar for Preferred Networks pfn
PRO
9
3.9k
LLM時代にデータエンジニアの役割はどう変わるか？
Avatar for Ikki Miyazaki ikkimiyazaki
4
860
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを 習慣化できた話
Avatar for リリカル mhlyc
0
130
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
Avatar for oracle4engineer oracle4engineer
PRO
3
110
Escaping_the_Kraken_-_October_2025.pdf
Avatar for Maarten Dalmijn mdalmijn
0
150
英語は話せません！それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
Avatar for ニイオカ niioka_97
0
130

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.8k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
45
2.5k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
20k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k

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