Effiziente Fehlersuche in  Web 2.0-Anwendungen
Agenda <ul><li>Kurze  Vorstellung
Eingebaute Firefox-Tools
Webdeveloper Toolbar
Firebug
Weitere Firefox-Tools
Weitere Tools für Internet Explorer, Safari und andere Browser
Fragen & (hoffentlich) Antworten </li></ul>
Martin Leyrer <ul><li>Alter Sack (Netscape 0.x, frühe 90er)
Anhänger des &quot; Progressive Enhancement &quot;
KEIN JavaScript & CSS Guru
Lasse mich gerne vom Code anderer „inspirieren“
Fan von „fertigen“ Frameworks </li></ul>
Hintergrundfarbe
Error-Console Strg-Shift-J
Web Developer Toolbar <ul><li>Anzeige div. Infos
(De-)Aktivieren von JavaScript, Bildern, Cache, ...
Forms
Cookies
Tools
View Generated Source !!! </li></ul>
 
Firebug ist ... <ul><li>Firefox Plugin
JavaScript Debugger
DOM Viewer
Nächste SlideShare
Wird geladen in …5
×

Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition

1.312 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie, Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.312
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • 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>

    ×