SlideShare ist ein Scribd-Unternehmen logo
JavaScript
Best Practises Debbuging und
Logging
Martin Ruprecht I 22. April 2010




                                   © Mayflower GmbH 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, hasOwnProperty, parseInt, toString,
     === vs. ==
I Keine globalen Variablen („Globals“)
I Mögliche Fehlerquellen kennen
    ·
    Datentypen-Fehler
    ·
    AJAX-Fehler




                                                         Mayflower GmbH I 4
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
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
Tools
        Mayflower GmbH I 7
Debugging mit JavaScript



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




                                             Mayflower GmbH I 8
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
Debugging JavaScript



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




                                                             Mayflower GmbH I 10
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
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
Debugging JavaScript



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




                                     Mayflower GmbH I 13
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
...und wir?




         Mayflower GmbH I 15
Logging JavaScript mit IE 8



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




                                                 Mayflower GmbH I 16
Logging JavaScript mit Safari



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




                                                 Mayflower GmbH I 17
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

Weitere ähnliche Inhalte

Andere mochten auch

2012 Confoo: Changing the Face of Identity in Ecommerce
2012 Confoo: Changing the Face of Identity in Ecommerce2012 Confoo: Changing the Face of Identity in Ecommerce
2012 Confoo: Changing the Face of Identity in Ecommerce
Jonathan LeBlanc
 
Hybrid Cloud PHPUK2012
Hybrid Cloud PHPUK2012Hybrid Cloud PHPUK2012
Hybrid Cloud PHPUK2012
Combell NV
 
Real time voice call integration - Confoo 2012
Real time voice call integration - Confoo 2012Real time voice call integration - Confoo 2012
Real time voice call integration - Confoo 2012
Michael Peacock
 
The Contextual Experience of the Mobile Web
The Contextual Experience of the Mobile WebThe Contextual Experience of the Mobile Web
The Contextual Experience of the Mobile Web
Jeff Carouth
 
Frontend caching - PHP Day, Italy, 2011
Frontend caching - PHP Day, Italy, 2011Frontend caching - PHP Day, Italy, 2011
Frontend caching - PHP Day, Italy, 2011
Helgi Þormar Þorbjörnsson
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
Chris Mills
 
The Original Hypertext Preprocessor
The Original Hypertext PreprocessorThe Original Hypertext Preprocessor
The Original Hypertext Preprocessor
Drew McLellan
 
2012 03-02-sdl-sgi-v03
2012 03-02-sdl-sgi-v032012 03-02-sdl-sgi-v03
2012 03-02-sdl-sgi-v03
Sébastien GIORIA
 
Décrire son projet php dans des rapports confoo 2011
Décrire son projet php dans des rapports   confoo 2011Décrire son projet php dans des rapports   confoo 2011
Décrire son projet php dans des rapports confoo 2011
ALTER WAY
 
Deliberate practice
Deliberate practiceDeliberate practice
Deliberate practice
Marcello Duarte
 
Verlernte Agilität - Schleichende Fehler in agilen Prozessen
Verlernte Agilität - Schleichende Fehler in agilen ProzessenVerlernte Agilität - Schleichende Fehler in agilen Prozessen
Verlernte Agilität - Schleichende Fehler in agilen Prozessen
Sebastian Bauer
 
ZeroMQ Is The Answer: PHP Tek 11 Version
ZeroMQ Is The Answer: PHP Tek 11 VersionZeroMQ Is The Answer: PHP Tek 11 Version
ZeroMQ Is The Answer: PHP Tek 11 Version
Ian Barber
 
In The Shadow Of The Ninja
In The Shadow Of The NinjaIn The Shadow Of The Ninja
In The Shadow Of The Ninja
zburnham
 
Confoo 2011-planifier-accessibilite-dans-votre-organisation
Confoo 2011-planifier-accessibilite-dans-votre-organisationConfoo 2011-planifier-accessibilite-dans-votre-organisation
Confoo 2011-planifier-accessibilite-dans-votre-organisation
AccessibilitéWeb
 
Practical PHP 5.3
Practical PHP 5.3Practical PHP 5.3
Practical PHP 5.3
Nate Abele
 
Develop and deploy using Hybrid Cloud Strategies confoo2012
Develop and deploy using Hybrid Cloud Strategies confoo2012Develop and deploy using Hybrid Cloud Strategies confoo2012
Develop and deploy using Hybrid Cloud Strategies confoo2012
Combell NV
 
Scrum, Kanban oder vielleicht beides?
Scrum, Kanban oder vielleicht beides?Scrum, Kanban oder vielleicht beides?
Scrum, Kanban oder vielleicht beides?
Dominik Jungowski
 
Zend framework service
Zend framework serviceZend framework service
Zend framework service
Michelangelo van Dam
 
An year of Pomodoros
An year of PomodorosAn year of Pomodoros
An year of Pomodoros
Giorgio Sironi
 

Andere mochten auch (19)

2012 Confoo: Changing the Face of Identity in Ecommerce
2012 Confoo: Changing the Face of Identity in Ecommerce2012 Confoo: Changing the Face of Identity in Ecommerce
2012 Confoo: Changing the Face of Identity in Ecommerce
 
Hybrid Cloud PHPUK2012
Hybrid Cloud PHPUK2012Hybrid Cloud PHPUK2012
Hybrid Cloud PHPUK2012
 
Real time voice call integration - Confoo 2012
Real time voice call integration - Confoo 2012Real time voice call integration - Confoo 2012
Real time voice call integration - Confoo 2012
 
The Contextual Experience of the Mobile Web
The Contextual Experience of the Mobile WebThe Contextual Experience of the Mobile Web
The Contextual Experience of the Mobile Web
 
Frontend caching - PHP Day, Italy, 2011
Frontend caching - PHP Day, Italy, 2011Frontend caching - PHP Day, Italy, 2011
Frontend caching - PHP Day, Italy, 2011
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
The Original Hypertext Preprocessor
The Original Hypertext PreprocessorThe Original Hypertext Preprocessor
The Original Hypertext Preprocessor
 
2012 03-02-sdl-sgi-v03
2012 03-02-sdl-sgi-v032012 03-02-sdl-sgi-v03
2012 03-02-sdl-sgi-v03
 
Décrire son projet php dans des rapports confoo 2011
Décrire son projet php dans des rapports   confoo 2011Décrire son projet php dans des rapports   confoo 2011
Décrire son projet php dans des rapports confoo 2011
 
Deliberate practice
Deliberate practiceDeliberate practice
Deliberate practice
 
Verlernte Agilität - Schleichende Fehler in agilen Prozessen
Verlernte Agilität - Schleichende Fehler in agilen ProzessenVerlernte Agilität - Schleichende Fehler in agilen Prozessen
Verlernte Agilität - Schleichende Fehler in agilen Prozessen
 
ZeroMQ Is The Answer: PHP Tek 11 Version
ZeroMQ Is The Answer: PHP Tek 11 VersionZeroMQ Is The Answer: PHP Tek 11 Version
ZeroMQ Is The Answer: PHP Tek 11 Version
 
In The Shadow Of The Ninja
In The Shadow Of The NinjaIn The Shadow Of The Ninja
In The Shadow Of The Ninja
 
Confoo 2011-planifier-accessibilite-dans-votre-organisation
Confoo 2011-planifier-accessibilite-dans-votre-organisationConfoo 2011-planifier-accessibilite-dans-votre-organisation
Confoo 2011-planifier-accessibilite-dans-votre-organisation
 
Practical PHP 5.3
Practical PHP 5.3Practical PHP 5.3
Practical PHP 5.3
 
Develop and deploy using Hybrid Cloud Strategies confoo2012
Develop and deploy using Hybrid Cloud Strategies confoo2012Develop and deploy using Hybrid Cloud Strategies confoo2012
Develop and deploy using Hybrid Cloud Strategies confoo2012
 
Scrum, Kanban oder vielleicht beides?
Scrum, Kanban oder vielleicht beides?Scrum, Kanban oder vielleicht beides?
Scrum, Kanban oder vielleicht beides?
 
Zend framework service
Zend framework serviceZend framework service
Zend framework service
 
An year of Pomodoros
An year of PomodorosAn year of Pomodoros
An year of Pomodoros
 

Ähnlich wie JS Best Practises Debugging und Logging

Mobile Anwendungen mit SenchaTouch
Mobile Anwendungen mit SenchaTouchMobile Anwendungen mit SenchaTouch
Mobile Anwendungen mit SenchaTouch
Mayflower GmbH
 
Mobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit WebtechnologienMobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit Webtechnologien
Mayflower GmbH
 
Shell Fu for Developers
Shell Fu for DevelopersShell Fu for Developers
Shell Fu for Developers
Mayflower GmbH
 
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy StrategienResponsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Johannes Weber
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Mayflower GmbH
 
Mozilla Audio Data API
Mozilla Audio Data API Mozilla Audio Data API
Mozilla Audio Data API
Mayflower GmbH
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
Jens Klein
 
Symfony2
Symfony2Symfony2
Symfony2
Mayflower GmbH
 
BDD
BDDBDD
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
Mayflower GmbH
 
Hands-on: Coding for Data-Journalism
Hands-on: Coding for Data-JournalismHands-on: Coding for Data-Journalism
Hands-on: Coding for Data-Journalism
Open Data Network
 
Gearman - Distributed Job System
Gearman - Distributed Job SystemGearman - Distributed Job System
Gearman - Distributed Job System
Mayflower GmbH
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
Codeception VisualCeption
Codeception VisualCeptionCodeception VisualCeption
Codeception VisualCeption
Sebastian Neubert
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Martin Leyrer
 
Stored Procedures in MySQL
Stored Procedures in MySQLStored Procedures in MySQL
Stored Procedures in MySQL
Mayflower GmbH
 
PHP Dependency und Paket Management mit Composer
PHP Dependency und Paket Management mit ComposerPHP Dependency und Paket Management mit Composer
PHP Dependency und Paket Management mit Composer
Mayflower GmbH
 
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutsch
Hanns Nolan
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
Martin Leyrer
 

Ähnlich wie JS Best Practises Debugging und Logging (20)

Mobile Anwendungen mit SenchaTouch
Mobile Anwendungen mit SenchaTouchMobile Anwendungen mit SenchaTouch
Mobile Anwendungen mit SenchaTouch
 
Mobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit WebtechnologienMobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit Webtechnologien
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Shell Fu for Developers
Shell Fu for DevelopersShell Fu for Developers
Shell Fu for Developers
 
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy StrategienResponsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
 
Mozilla Audio Data API
Mozilla Audio Data API Mozilla Audio Data API
Mozilla Audio Data API
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
 
Symfony2
Symfony2Symfony2
Symfony2
 
BDD
BDDBDD
BDD
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Hands-on: Coding for Data-Journalism
Hands-on: Coding for Data-JournalismHands-on: Coding for Data-Journalism
Hands-on: Coding for Data-Journalism
 
Gearman - Distributed Job System
Gearman - Distributed Job SystemGearman - Distributed Job System
Gearman - Distributed Job System
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Codeception VisualCeption
Codeception VisualCeptionCodeception VisualCeption
Codeception VisualCeption
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
 
Stored Procedures in MySQL
Stored Procedures in MySQLStored Procedures in MySQL
Stored Procedures in MySQL
 
PHP Dependency und Paket Management mit Composer
PHP Dependency und Paket Management mit ComposerPHP Dependency und Paket Management mit Composer
PHP Dependency und Paket Management mit Composer
 
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutsch
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
 

Mehr von Mayflower GmbH

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mayflower GmbH
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
Mayflower GmbH
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
Mayflower GmbH
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
Mayflower GmbH
 
Vom Entwickler zur Führungskraft
Vom Entwickler zur FührungskraftVom Entwickler zur Führungskraft
Vom Entwickler zur Führungskraft
Mayflower GmbH
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
Mayflower GmbH
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
Mayflower GmbH
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
Mayflower GmbH
 
Usability im web
Usability im webUsability im web
Usability im web
Mayflower GmbH
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
Mayflower GmbH
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
Mayflower GmbH
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
Mayflower GmbH
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
Mayflower GmbH
 
Pair Programming Mythbusters
Pair Programming MythbustersPair Programming Mythbusters
Pair Programming Mythbusters
Mayflower GmbH
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
Mayflower GmbH
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
Mayflower GmbH
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
Mayflower GmbH
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
Mayflower GmbH
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
Mayflower GmbH
 
Mongo DB - Segen oder Fluch
Mongo DB - Segen oder FluchMongo DB - Segen oder Fluch
Mongo DB - Segen oder Fluch
Mayflower GmbH
 

Mehr von Mayflower GmbH (20)

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
 
Vom Entwickler zur Führungskraft
Vom Entwickler zur FührungskraftVom Entwickler zur Führungskraft
Vom Entwickler zur Führungskraft
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
 
Usability im web
Usability im webUsability im web
Usability im web
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Pair Programming Mythbusters
Pair Programming MythbustersPair Programming Mythbusters
Pair Programming Mythbusters
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
 
Mongo DB - Segen oder Fluch
Mongo DB - Segen oder FluchMongo DB - Segen oder Fluch
Mongo DB - Segen oder Fluch
 

JS Best Practises Debugging und Logging

  • 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