1. Effiziente Fehlersuche inWeb 2.0-Anwendungen

2. Agenda

KurzeVorstellung

3. Eingebaute Firefox-Tools 4. Webdeveloper Toolbar 5. Firebug 6. Weitere Firefox-Tools 7. Weitere Tools fr Internet Explorer, Safari und andere Browser 8. Fragen & (hoffentlich) Antworten 9. Martin Leyrer

Alter Sack (Netscape 0.x, frhe 90er)

10. Anhnger des " Progressive Enhancement " 11. KEIN JavaScript & CSS Guru 12. Lasse mich gerne vom Code anderer inspirieren 13. Fan von fertigen Frameworks 14. Hintergrundfarbe 15. Error-Console Strg-Shift-J 16. Web Developer Toolbar

Anzeige div. Infos

17. (De-)Aktivieren von JavaScript, Bildern, Cache, ... 18. Forms 19. Cookies 20. Tools 21. View Generated Source !!! 22. 23. Firebug ist ...

Firefox Plugin

24. JavaScript Debugger 25. DOM Viewer 26. CSS Viewer 27. JavaScript Logging Engine 28. und ... 29. http://www.flickr.com/photos/teagrrl/78941282/ 30. Firebug aufrufen F12 31. Die Tabs

Console

32. HTML 33. CSS 34. Script 35. Dom 36. Net 37. Console

console.log(We are at point A);

38. console.info(We are at point B); 39. console.warn(At point C!); 40. console.error(We reached point D :-(); 41. AJAX-Calls 42. Wird von Frameworks wie Dojo, .... genutzt 43. Firebug Light fr IE 44. 45. HTML-Ansicht

Elemente werden hervorgehoben

46. HTML editierbar 47. Rechte Maustaste -> Inspect um Elemente zu finden 48. HTML/CSS-Ansicht

CSS kann durchsucht werden

49. CSS editierbar & Live Update 50. CSS-Vererbung sichtbar 51. Box-Modell 52. JavaScript-Debugger

Full debugger

53. Breakpoints 54. Variable value on hover 55. Step in, Step over, etc. 56. Watches 57. debugger(); 58. Netzwerk-Ansicht

Anzeige der Ladezeiten aller Elemente der Webseite

59. HTTP-Header des Requests sowie der Antwort des Servers 60. YSlow

Performance-Analyse & Tipps

61. Statistik ber Ladezeiten 62. JSLint & andere Tools 63. Gedacht fr groe Seiten 64. ME-Tools

XSS Me

berprft Forms auf Cross Site Scripting Probleme

65. Lange Laufzeit 66. Kein Wundermittel

SQL Inject Me

67. berprft Datenbankzugriffe via Forms auf SQL-Injections 68. Ebenfalls kein Wundermittel 69. Hackbar

URL-Manipulation (encode/decode)

70. XSS & SQL-Injection berprfung 71. Firefox-Tools

Webdeveloper Toolbar

72. https://addons.mozilla.org/en-US/firefox/addon/60 73. Firebug 74. https://addons.mozilla.org/de/firefox/addon/1843 75. YSlow 76. https://addons.mozilla.org/de/firefox/addon/5369 77. XSS Me 78. https://addons.mozilla.org/en-US/firefox/addon/7598

SQL Inject Me https://addons.mozilla.org/en-US/firefox/addon/7597

79. Hackbar 80. https://addons.mozilla.org/en-US/firefox/addon/3899 81. Venkman JavaScript Debugger 82. http://www.mozilla.org/projects/venkman/ 83. Internet Explorer 8 Entwicklertoools

Debugger

84. Firebug-hnlich 85. On-the-fly nderungen

http://www.microsoft.com/germany/windows/internet-explorer/default.aspx

86. Weitere IE-Tools

Internet Explorer Developer Toolbar IEDevToolBarSetup.msi

87. Companion.JS Javascript debugger for IE 88. DebugBar (kostenpflichtig!) Development Bar (IE sidebar) 89. Microsoft Script Debugger Scripting Debugging im IE 90. Tools fr Safari & Andere

Safari Web Inspector

91. Drosera Debugger 92. Opera Dragonfly 93. Fiddler Web Debugging Proxy 94. Debugging using Apache as proxy 95. Danke fr die Aufmerksamkeit !

Blog: http://martin.leyrer.priv.at

96. E-Mail: [email_address] 97. Jabber: [email_address] 98. Twitter: leyrer