© Mayflower GmbH 2011

J avaScript Best Practise Debugging und Logging

Martin Ruprecht I 03. Februar 2011

Mayflower GmbH I 2

Mayflower GmbH I 3

Mayflower GmbH I 4

1997

alert( )

Mayflower GmbH I 5

1997

alert( )

2011

console.log( )

Mayflower GmbH I 6

1997

alert( )

2010

console.log( )

201*

Mayflower GmbH I 7

1997

alert( )

2010

console.log( )

201*

„HTML5 is about moving from documents to

applications and from hacks to solutions.“

– Chris Heilmann, Mozilla Foundation

Mayflower GmbH I 8

Tools

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

Debugging Strategien

I Untersuchen von HTML-Elementen

I Aufzeichnen von Log-Nachrichten

I Breakpoints

I Prototyping

Mayflower GmbH I 12

Untersuchen von HTML-Elementen

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

Aufzeichnen von Log-Nachrichten

Mayflower GmbH I 15

Breakpoints

I debugger;

I Individuelle Breakpoints

I Conditional Breakpoints

Mayflower GmbH I 16

Fehler gefunden?

I Stack Trace·console.trace( )

I Live Fixen / Testen / weiter entwickeln

Mayflower GmbH I 17

Fehler nicht gefunden?

I Google

I Kollegen fragen

I kurze Pause machen

I genaue Problemdefinition

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

DEMO

14.03.11 Mayflower GmbH 20

Vielen Dank für Ihre Aufmerksamkeit!

Kontakt

Martin Ruprechtmartin.ruprecht@mayflower.de+49 89 242054 1116 Mayflower GmbHMannhardtstrasse6 80538 München