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

Web Developer Tools in Modern Browsers

Avatar for othree othree
January 12, 2013
Programming
12
7.1k

Web Developer Tools in Modern Browsers

Avatar for othree

othree

January 12, 2013
Tweet

More Decks by othree

See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
Avatar for othree othree
1
2k
WAT JavaScript Date
Avatar for othree othree
3
2k
Modern HTML Email Development
Avatar for othree othree
3
2.7k
MRT & GIT
Avatar for othree othree
1
2.2k
YAJS.vim and Vim Syntax Highlight
Avatar for othree othree
1
2.8k
Web Trends to 2015
Avatar for othree othree
4
320
Transducer
Avatar for othree othree
9
3k
HITCON 11 Photographer
Avatar for othree othree
4
480
fetch is the new XHR
Avatar for othree othree
6
3.5k

Other Decks in Programming

See All in Programming
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
Avatar for po3rin po3rin
5
1.9k
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
Avatar for Yutaro Muta yutailang0119
0
190
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
Avatar for yuhi yuhisatoxxx
3
470
Repenser les filtres API Platform: une nouvelle syntaxe
Avatar for Vincent Amstoutz vinceamstoutz
2
130
TokyoR#119 bignners session2 Visualization
Avatar for yu_sekiya kotatyamtema
0
110
Reactをクライアントで使わない
Avatar for Yusuke Wada yusukebe
7
5.5k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
3
470
半自動E2Eで手っ取り早くリグレッションテストを効率化しよう
Avatar for Ryuta Kibe beryu
6
2k
Local Peer-to-Peer APIはどのように使われていくのか？
Avatar for Hal hal_spidernight
2
380
CSS Linter の現在地 2025年のベストプラクティスを探る
Avatar for mattsuu ryo_manba
10
3k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
Avatar for Tetta Noguchi tetta_pdnt
0
6.5k
なぜGoのジェネリクスはこの形なのか？ Featherweight Goが明かす設計の核心
Avatar for Ryotaro ryotaros
7
720

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
20k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
830
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
23k

Transcript

  1. Web Developer Tools in Modern Browsers othree @ WebConf

  2. Past

  3. None
  4. None

  5. How Developers Debugging

  6. None
  7. None

  8. Problems • Only script debugging • Error messages are not

    useful

  9. The Most Powerful Debugging Function

  10. alert

  11. Present

  12. Text

  13. None
  14. None
  15. None
  16. None
  17. None

  18. Rich Internet Applications

  19. None

  20. 2004

  21. None

  22. Take Back the Web

  23. 2007

  24. None

  25. Firebug • First modern browser developer tool • by Joe

    Hewitt
  26. None
  27. None

  28. Modern Dev Tool Functions • Inspect DOM Tree • Style

    Lookup • Useful Debug Message • Monitor Network • Performance Tuning • ...

  29. Modern Dev Tools • Firebug for Firefox • Developer Tool

    for Chrome/Safari • Dragonfly for Opera
  30. None
  31. None
  32. None

  33. Demo Time

  34. One More Thing

  35. Firebug Lite

  36. Firebug Lite • Browser independent • Supports all major browser

    including IE

  37. Take a Look

  38. Further Reading

  39. Things I didn’t know about the WebKit inspector

  40. Wait, DevTools could do THAT?

  41. Improving Web App Performance With the Chrome DevTools Timeline and

    Profiles

  42. Using the Heap Profiler in Chrome Dev Tools

  43. Secrets of the Chrome Developer Tools

  44. My Workflow: Never having to leave DevTools

  45. Documents • Console API • Command Line API • Chrome

    Developer Tools • Opera Dragonfly Documentation

  46. Questions?

  47. me • othree • Twitter, Plurk, flickr, Github, PTT •

    Blog: https://blog.othree.net • F2E at HTC

  48. Thanks