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
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
2.1k
Modern HTML Email Development
Avatar for othree othree
3
2.7k
MRT & GIT
Avatar for othree othree
1
2.3k
YAJS.vim and Vim Syntax Highlight
Avatar for othree othree
1
3k
Web Trends to 2015
Avatar for othree othree
4
330
Transducer
Avatar for othree othree
9
3.1k
HITCON 11 Photographer
Avatar for othree othree
4
520
fetch is the new XHR
Avatar for othree othree
6
3.6k

Other Decks in Programming

See All in Programming
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
280
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
180
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
130
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
510
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
170
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
210
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
ThorVG Viewer In VS Code
Avatar for Nor-s nors
0
770
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
51
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
180
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.7k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
55
Done Done
Avatar for chrislema chrislema
186
16k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k

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