JavaScript
Best Practises Debbuging und
Logging
Martin Ruprecht I 22. April 2010




                                   © ...
Qualität




     Mayflower GmbH I 2
Qualität?




      Mayflower GmbH I 3
Qualitätsfördernde Maßnahmen



I   Coding Style & Code Conventions
I   „Know your friends“
    ·instanceof, typeof, hasOw...
Qualitätsfördernde Maßnahmen



I   „eval() is evil“
I keine Kurzschreibweisen
I Semicolon insertion!
I Vernünftige Variab...
Qualitätsfördernde Maßnahmen



I Testen
I Unobtrusive JavaScript
I Serverseitiges Loggen / Protokollieren
I keine Augment...
Tools
        Mayflower GmbH I 7
Debugging mit JavaScript



ITools
IFirebug (http://getfirebug.com/docs.html)
IFiddler / JSON-Viewer




                 ...
Debugging JavaScript



IFirebug Console
ILogging
IAutocomplete
ILive fixen/entwickeln/testen
IAnzeigen von AJAX-Calls
ITr...
Debugging JavaScript



IFirebug Console: Logging
IIm Quellcode console.log()
Iz.B. console.log(„UserId: “ + this.userId) ...
Debugging JavaScript



IFirebug Console: Autocomplete mit Tab-Taste
IFirebug Console: Trace
Iconsole.trace()
IZeigt zulet...
Debugging JavaScript



IFirebug Script
IAnzeigen aller geladenen JavaScripts

IIm Quellcode: debugger;

IBreakpoints / Co...
Debugging JavaScript



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



 IJSON-Viewer
 IBessere Darstellung von JSON-Daten
{"response":{"entries":[{"nam
e":"Root","entry_...
...und wir?




         Mayflower GmbH I 15
Logging JavaScript mit IE 8



Iwindow.console.log('userId: ' + this.userId);




                                        ...
Logging JavaScript mit Safari



Iwindow.console.log('userId: ' + this.userId);




                                      ...
Vielen Dank für Ihre
     Aufmerksamkeit!




        Kontakt   Martin Ruprecht
                  martin.ruprecht@mayflowe...
Upcoming SlideShare
Loading in...5
×

JS Best Practises Debugging und Logging

1,181

Published on

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!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,181
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JS Best Practises Debugging und Logging

  1. 1. JavaScript Best Practises Debbuging und Logging Martin Ruprecht I 22. April 2010 © Mayflower GmbH 2010
  2. 2. Qualität Mayflower GmbH I 2
  3. 3. Qualität? Mayflower GmbH I 3
  4. 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. 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. 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. 7. Tools Mayflower GmbH I 7
  8. 8. Debugging mit JavaScript ITools IFirebug (http://getfirebug.com/docs.html) IFiddler / JSON-Viewer Mayflower GmbH I 8
  9. 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. 10. Debugging JavaScript IFirebug Console: Logging IIm Quellcode console.log() Iz.B. console.log(„UserId: “ + this.userId) // UserId: 123 Mayflower GmbH I 10
  11. 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. 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. 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. 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. 15. ...und wir? Mayflower GmbH I 15
  16. 16. Logging JavaScript mit IE 8 Iwindow.console.log('userId: ' + this.userId); Mayflower GmbH I 16
  17. 17. Logging JavaScript mit Safari Iwindow.console.log('userId: ' + this.userId); Mayflower GmbH I 17
  18. 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

×