Web Developer Tools in Modern Browsers

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
January 12, 2013

Web Developer Tools in Modern Browsers

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

January 12, 2013
Tweet

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