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.6k
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
2.9k
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
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
Avatar for Koichi NAKAGAWA knakagawa
1
110
KotlinConf 2025 現地参加の土産話
Avatar for Takehata Naoto n_takehata
0
100
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
既存デザインを変更せずにタップ領域を広げる方法
Avatar for Tiphaine tahia910
1
230
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
Avatar for Taiyu Yoshizawa nekoya3
0
410
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
0
350
都市をデータで見るってこういうこと　PLATEAU属性情報入門
Avatar for nokonoko1203 nokonoko1203
1
520
Passkeys for Java Developers
Avatar for Yoshikazu Nojima ynojima
3
860
A comprehensive view of refactoring
Avatar for Marabesi marabesi
0
790
A2A プロトコルを試してみる
Avatar for azukiazusa azukiazusa1
2
510
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
Avatar for GreenFlagProject greenflagproject
1
120
Julia という言語について （FP in Julia « SIDE: F »） for 関数型まつり2025
Avatar for GOTOH Shunsuke antimon2
3
960

Featured

See All Featured
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
910

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