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
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
Avatar for GENIEE ,Inc geniee_inc
0
110
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
Avatar for Swimmy reoandroider
0
110
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう！ #FEC余熱NIGHT
Avatar for Masayuki Izumi izumin5210
3
540
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
320
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
Avatar for imkaoru imkaoru
4
850
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
NixOS + Kubernetesで構築する自宅サーバーのすべて
Avatar for ichi-h ichi_h3
0
950
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
160
AI Agent 時代的開發者生存指南
Avatar for 高見龍 eddie
2
1.6k
iOSエンジニア向けの英語学習アプリを作る！
Avatar for yukawashouhei yukawashouhei
0
200
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
Avatar for ternbusty ternbusty
3
200
開発生産性を上げるための生成AI活用術
Avatar for starfish719 starfish719
3
1.1k

Featured

See All Featured
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
620
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
12
900
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
232
18k

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