Lange Jahre wurde Javascript von vielen Entwicklern nicht so ernst genommen. Durch den vermehrten Einsatz von AJAX und der einfachen Handhabung von Javascript-Frameworks und Libraries ist die Akzeptanz gestiegen und Javascript ist aus der Webentwicklung nicht mehr wegzudenken.Unter dem Titel "Best Practises- Debugging und Logging JS" zeigt uns Martin Ruprecht in zwei Vorträgen Mittel und Wege, wie man effektiv die Fehlersuche mit Javascript betreibt. In diesem ersten Vortrag werden qualitätssichernde Maßnahmen für die Entwicklung mit Javascript aufgezeigt. Die "Donnerstags-Vorträge" werden sowohl in Würzburg als auch in München gehalten. Bei Interesse einfach das Blog beobachten, um auf dem Laufenden zu bleiben!

1. JavaScript
Best Practises Debbuging und
Logging
Martin Ruprecht I 22. April 2010
© Mayflower GmbH 2010

2. Qualität
Mayflower GmbH I 2

3. Qualität?
Mayflower GmbH I 3

4. Qualitätsfördernde Maßnahmen
I Coding Style & Code Conventions
I „Know your friends“
·instanceof, typeof, hasOwnProperty, parseInt, toString,
=== vs. ==
I Keine globalen Variablen („Globals“)
I Mögliche Fehlerquellen kennen
·
Datentypen-Fehler
·
AJAX-Fehler
Mayflower GmbH I 4

5. Qualitätsfördernde Maßnahmen
I „eval() is evil“
I keine Kurzschreibweisen
I Semicolon insertion!
I Vernünftige Variablendeklaration!
I Feature detection vs. Browser detection
Mayflower GmbH I 5

6. Qualitätsfördernde Maßnahmen
I Testen
I Unobtrusive JavaScript
I Serverseitiges Loggen / Protokollieren
I keine Augmentation
I Libraries und Frameworks
Mayflower GmbH I 6

7. Tools
Mayflower GmbH I 7

8. Debugging mit JavaScript
ITools
IFirebug (http://getfirebug.com/docs.html)
IFiddler / JSON-Viewer
Mayflower GmbH I 8

9. Debugging JavaScript
IFirebug Console
ILogging
IAutocomplete
ILive fixen/entwickeln/testen
IAnzeigen von AJAX-Calls
ITraces
IProfiling
IAssertions
I„Command line“ Funktionen
Mayflower GmbH I 9

10. Debugging JavaScript
IFirebug Console: Logging
IIm Quellcode console.log()
Iz.B. console.log(„UserId: “ + this.userId) // UserId: 123
Mayflower GmbH I 10

11. Debugging JavaScript
IFirebug Console: Autocomplete mit Tab-Taste
IFirebug Console: Trace
Iconsole.trace()
IZeigt zuletzt aufgerufene Funktionen und deren Parameter
IZeigt jeweils Datei und Zeile der jeweiligen Funktion
IFirebug Console: „Command line“ Funktion
I*.toString() gibt nützliche Informationen über eine Funktion
aus, z.B. MediaCenter.showAlert.toString()
Mayflower GmbH I 11

12. Debugging JavaScript
IFirebug Script
IAnzeigen aller geladenen JavaScripts
IIm Quellcode: debugger;
IBreakpoints / Conditional Breakpoints
INach setzen eines Breakpoints Seite neu laden!
Mayflower GmbH I 12

13. Debugging JavaScript
IFiddler
Ihttp://www.fiddler2.com
ILogging von Http(s) Traffic
IAnzeige von Requests und Response
IErstellen von Requests
Mayflower GmbH I 13

14. Debugging JavaScript
IJSON-Viewer
IBessere Darstellung von JSON-Daten
{"response":{"entries":[{"nam
e":"Root","entry_type":"folde
r","entry_subtype":"ROOT","i
d":0,"files":0,"folders":1,
"projects":0,"parent_id":"","id VS.
path":"/0/","writable":false,"
user_id":"1","download_atta
chment_url":
"/download/a/pc/1.0/t/07
dd232ca5464d3a0b9eaacd8
65adbde","folder":true,"proje
ct":false,"file":false,"
Mayflower GmbH I 14

15. ...und wir?
Mayflower GmbH I 15

16. Logging JavaScript mit IE 8
Iwindow.console.log('userId: ' + this.userId);
Mayflower GmbH I 16

17. Logging JavaScript mit Safari
Iwindow.console.log('userId: ' + this.userId);
Mayflower GmbH I 17

18. Vielen Dank für Ihre
Aufmerksamkeit!
Kontakt Martin Ruprecht
martin.ruprecht@mayflower.de
+49 89 242054 1116
Mayflower GmbH
Mannhardtstrasse 6
80538 München
25.06.2010 Mayflower GmbH 18