Das Dokument befasst sich mit bewährten Methoden für Debugging und Logging in JavaScript, einschließlich verschiedenen Tools wie Firebug und Entwicklertools. Es beschreibt Strategien zum Untersuchen von HTML-Elementen, Aufzeichnen von Log-Nachrichten und Setzen von Breakpoints. Abschließend wird das Logging als unverzichtbarer Bestandteil im Entwicklungsprozess hervorgehoben, der auch in produktiven Umgebungen eingesetzt werden kann.

1. J avaScript Best Practise
Debugging und Logging
Martin Ruprecht I 03. Februar 2011
©Mayflower GmbH 2011

2. Mayflower GmbH I 2

3. Mayflower GmbH I 3

4. 1997
alert( )
Mayflower GmbH I 4

5. 1997 2011
alert( ) console.log( )
Mayflower GmbH I 5

6. 1997 2010 201*
alert( ) console.log( )
Mayflower GmbH I 6

7. 1997 2010 201*
alert( ) console.log( )
„HTML5 is about moving
from documents to
applications and from
hacks to solutions.“
– Chris Heilmann, Mozilla Foundation
Mayflower GmbH I 7

8. Tools
Mayflower GmbH I 8

9. Tools
I Firebug, Firebug Lite
I Entwickler Tools (IE und Chrome)
I Webinspector Safari
I Web Developer Toolbar
I YSLOW (Performance Debugging)
I CompanionJS
I Fiddler
I ...
Mayflower GmbH I 9

10. Firebug? Webinspector? Entwickler Tools?
I Shortcuts
·Ctrl + A, Ctrl + C, Ctrl + V, Pfeil nach oben
I Autocomplete mit TAB
I *.toString( )
I *.toJson( )
Mayflower GmbH I 10

11. Debugging Strategien
I Untersuchen von HTML-Elementen
I Aufzeichnen von Log-Nachrichten
I Breakpoints
I Prototyping
Mayflower GmbH I 11

12. Untersuchen von HTML-Elementen
Mayflower GmbH I 12

13. Aufzeichnen von Log-Nachrichten
I console.log/warn/error/info/exception/assert
· Unterschiedliche Ausgabe nach Level in Konsole
I console.dir(object )
· Schreibt object formatiert in die Konsole
I console.count( )
· Zähler, z.B. für Funktionsaufrufe
Mayflower GmbH I 13

14. Aufzeichnen von Log-Nachrichten
Mayflower GmbH I 14

15. Breakpoints
I debugger;
I Individuelle Breakpoints
I Conditional Breakpoints
Mayflower GmbH I 15

16. Fehler gefunden?
I Stack Trace
· console.trace( )
I Live Fixen / Testen / weiter entwickeln
Mayflower GmbH I 16

17. Fehler nicht gefunden?
I Google
I Kollegen fragen
I kurze Pause machen
I genaue Problemdefinition
Mayflower GmbH I 17

18. Fazit: Real life logging
I Logging auch an den Server
I unabhängig vom Browser einsetzbar
I auch in Produktion
I unterschiedliche Levels
Mayflower GmbH I 18

19. DEMO
Mayflower GmbH I 19

20. Vielen Dank für Ihre
Aufmerksamkeit!
Kontakt Martin Ruprecht
martin.ruprecht@mayflower.de
+49 89 242054 1116
Mayflower GmbH
Mannhardtstrasse6
80538 München
14.03.11 Mayflower GmbH 20