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

Web Developer Tools in Modern Browsers

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for othree othree
January 12, 2013
Programming
7.1k
12

Web Developer Tools in Modern Browsers

Avatar for othree

othree

January 12, 2013

More Decks by othree

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

Other Decks in Programming

See All in Programming
SREに優しいTerraform構成 modulesとstateの組み方
Avatar for hiyanger hiyanger
2
170
アクセシビリティ試験の"その後"を仕組み化する
Avatar for yuuumin yuuumiravy
1
200
Kingdom of the Machine
Avatar for yui-knk yui_knk
2
1.5k
サークル参加から学ぶ、小さな事業の回し方
Avatar for yuzneri yuzneri
0
170
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
300
Back to the roots of date
Avatar for jinroq jinroq
0
810
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
380
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
630
KMP × Kotlin 2.3 - How Android Got Slower While iOS Builds Improved by 47%
Avatar for Ryosuke Shimizu (RIO) rio432
0
170
PicoRuby for IoT: Connecting to the Cloud with MQTT
Avatar for Y_uuu yuuu
2
770
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
Avatar for Kiichi Sugihara kiichisugihara
1
270
WebAssembly を読み込むベストプラクティス 2026年春版 / Best Practices for Loading WebAssembly (Spring 2026)
Avatar for petamoriken / 森建 petamoriken
5
1.1k

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
230
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
6
35k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
240
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.7k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
110
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
170
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
610
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
330

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