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
2.1k
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.9k
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
490
fetch is the new XHR
Avatar for othree othree
6
3.5k

Other Decks in Programming

See All in Programming
GitHub Copilotを使いこなせ！/mastering_github_copilot!
Avatar for Kota Kageyama kotakageyama
2
760
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
Avatar for 小島舞子 / Maiko Kojima maikokojima
0
760
TransformerからMCPまで（現代AIを理解するための羅針盤）
Avatar for MIKIO KUBO mickey_kubo
7
6k
Bakuraku E2E Scenario Test System Architecture #bakuraku_qa_study
Avatar for teyamagu teyamagu
PRO
0
260
Kotlin 2.2が切り拓く: コンテキストパラメータで書く関数型DSLと新しい依存管理のかたち
Avatar for Kenichi SUZUKI knih
0
290
例外処理を理解して、設計段階からエラーを見つけやすく、起こりにくく
Avatar for Takuma Kajikawa kajitack
3
150
チームのテスト力を総合的に鍛えてシフトレフトを推進する/Shifting Left with Software Testing Improvements
Avatar for Hiroki Iseri goyoki
2
540
NIKKEI Tech Talk#38
Avatar for cipepser cipepser
0
380
AIと人間の共創開発！OSSで試行錯誤した開発スタイル
Avatar for mae616 mae616
2
880
AI駆動開発カンファレンスAutumn2025 _AI駆動開発にはAI駆動品質保証
Avatar for Autify autifyhq
0
120
開発組織の戦略的な役割と 設計スキル向上の効果
Avatar for 増田 亨 masuda220
PRO
10
2.1k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
Avatar for Masahiro Nishimi masahiro_nishimi
4
18k

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
72
4.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k

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