Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition

1,356 views

Published on

Moderne Anwendungen bestehen nicht mehr aus ein wenig HTML sowie Code am Server. Cascading Style Sheets (CSS), JavaScript und AJAX machen die Anwendungen einerseits benutzerfreundlicher, andererseits auch schwerer zu entwickeln und zu pflegen. Mit dem Open Source Browser Firefox und einer Handvoll von Open Source Plug-Ins kann sich der Entwickler sein Leben aber deutlich einfacher machen. Diese Session behandelt Firefox-Erweiterungen, die sich in der Praxis bei der Entwicklung großer Web 2.0 Anwendungen bewährt haben. Gezeigt werden "am lebenden Objekt" unter anderem die Webdeveloper Toolbar sowie Firebug. Der Bogen der vorgestellten Tools erstreckt sich aber noch weiter und beinhaltet u.a. Sicherheitschecks, WAI-Tools und noch viel mehr.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition

  1. 1. Effiziente Fehlersuche in Web 2.0-Anwendungen
  2. 2. Agenda <ul><li>Kurze Vorstellung
  3. 3. Eingebaute Firefox-Tools
  4. 4. Webdeveloper Toolbar
  5. 5. Firebug
  6. 6. Weitere Firefox-Tools
  7. 7. Weitere Tools für Internet Explorer, Safari und andere Browser
  8. 8. Fragen & (hoffentlich) Antworten </li></ul>
  9. 9. Martin Leyrer <ul><li>Alter Sack (Netscape 0.x, frühe 90er)
  10. 10. Anhänger des &quot; Progressive Enhancement &quot;
  11. 11. KEIN JavaScript & CSS Guru
  12. 12. Lasse mich gerne vom Code anderer „inspirieren“
  13. 13. Fan von „fertigen“ Frameworks </li></ul>
  14. 14. Hintergrundfarbe
  15. 15. Error-Console Strg-Shift-J
  16. 16. Web Developer Toolbar <ul><li>Anzeige div. Infos
  17. 17. (De-)Aktivieren von JavaScript, Bildern, Cache, ...
  18. 18. Forms
  19. 19. Cookies
  20. 20. Tools
  21. 21. View Generated Source !!! </li></ul>
  22. 23. Firebug ist ... <ul><li>Firefox Plugin
  23. 24. JavaScript Debugger
  24. 25. DOM Viewer
  25. 26. CSS Viewer
  26. 27. JavaScript Logging Engine
  27. 28. und ... </li></ul>
  28. 29. http://www.flickr.com/photos/teagrrl/78941282/
  29. 30. Firebug aufrufen F12
  30. 31. Die Tabs <ul><li>Console
  31. 32. HTML
  32. 33. CSS
  33. 34. Script
  34. 35. Dom
  35. 36. Net </li></ul>
  36. 37. Console <ul><li>console.log(“We are at point A”);
  37. 38. console.info(“We are at point B”);
  38. 39. console.warn(“At point C!”);
  39. 40. console.error(“We reached point D :-(“);
  40. 41. AJAX-Calls
  41. 42. Wird von Frameworks wie Dojo, .... genutzt
  42. 43. Firebug „Light“ für IE </li></ul>
  43. 45. HTML-Ansicht <ul><li>Elemente werden hervorgehoben
  44. 46. HTML editierbar
  45. 47. Rechte Maustaste -> Inspect um Elemente zu finden </li></ul>
  46. 48. HTML/CSS-Ansicht <ul><li>CSS kann durchsucht werden
  47. 49. CSS editierbar & Live Update
  48. 50. CSS-Vererbung sichtbar
  49. 51. Box-Modell </li></ul>
  50. 52. JavaScript-Debugger <ul><li>Full debugger
  51. 53. Breakpoints
  52. 54. Variable value on hover
  53. 55. Step in, Step over, etc.
  54. 56. Watches
  55. 57. debugger(); </li></ul>
  56. 58. Netzwerk-Ansicht <ul><li>Anzeige der Ladezeiten aller Elemente der Webseite
  57. 59. HTTP-Header des Requests sowie der Antwort des Servers </li></ul>
  58. 60. YSlow <ul><li>Performance-Analyse & Tipps
  59. 61. Statistik über Ladezeiten
  60. 62. JSLint & andere Tools
  61. 63. Gedacht für „große“ Seiten </li></ul>
  62. 64. „ME-Tools“ <ul><li>XSS Me </li><ul><li>Überprüft Forms auf Cross Site Scripting Probleme
  63. 65. Lange Laufzeit
  64. 66. Kein Wundermittel </li></ul></ul><ul><li>SQL Inject Me
  65. 67. Überprüft Datenbankzugriffe via Forms auf SQL-Injections
  66. 68. Ebenfalls kein Wundermittel </li></ul>
  67. 69. Hackbar <ul><li>URL-Manipulation (encode/decode)
  68. 70. XSS & SQL-Injection Überprüfung </li></ul>
  69. 71. Firefox-Tools <ul><li>Webdeveloper Toolbar
  70. 72. https://addons.mozilla.org/en-US/firefox/addon/60
  71. 73. Firebug
  72. 74. https://addons.mozilla.org/de/firefox/addon/1843
  73. 75. YSlow
  74. 76. https://addons.mozilla.org/de/firefox/addon/5369
  75. 77. XSS Me
  76. 78. https://addons.mozilla.org/en-US/firefox/addon/7598 </li></ul><ul><li>SQL Inject Me https://addons.mozilla.org/en-US/firefox/addon/7597
  77. 79. Hackbar
  78. 80. https://addons.mozilla.org/en-US/firefox/addon/3899
  79. 81. Venkman JavaScript Debugger
  80. 82. http://www.mozilla.org/projects/venkman/ </li></ul>
  81. 83. Internet Explorer 8 Entwicklertoools <ul><li>Debugger
  82. 84. Firebug-ähnlich
  83. 85. On-the-fly Änderungen </li></ul><ul><li>http://www.microsoft.com/germany/windows/internet-explorer/default.aspx </li></ul>
  84. 86. Weitere IE-Tools <ul><li>Internet Explorer Developer Toolbar IEDevToolBarSetup.msi
  85. 87. Companion.JS Javascript debugger for IE
  86. 88. DebugBar (kostenpflichtig!) Development Bar (IE sidebar)
  87. 89. Microsoft Script Debugger Scripting Debugging im IE </li></ul>
  88. 90. Tools für Safari & Andere <ul><li>Safari Web Inspector
  89. 91. Drosera Debugger
  90. 92. Opera Dragonfly
  91. 93. Fiddler Web Debugging Proxy
  92. 94. Debugging using Apache as proxy </li></ul>
  93. 95. Danke für die Aufmerksamkeit ! <ul><li>Blog: http://martin.leyrer.priv.at
  94. 96. E-Mail: [email_address]
  95. 97. Jabber: [email_address]
  96. 98. Twitter: leyrer </li></ul>

×