Arbeiten mit der Konsole

[j-l-n]

Die Konsole ist beim Entwickeln von enormen Nutzen, da man sofort den Wert von Variablen, die Eigenschaften von Elementen und etliche andere Informationen anzeigen lassen kann.
Insbesondere Console.trace() ist praktisch, da man dadurch einen Stacktrace durchführen kann.

Konsole öffnen:

• Firefox: Web-Entwickler > Werkzeuge ein-/ausblenden > Konsole oder STRG+UMSCHALT+I oder F12
• Chrome: Tools > Entwicklertools > Console oder STRG+UMSCHALT+J oder F12
• IE: Entwicklertools > Konsole oder F12
• Opera: Extras > Weiteres > Entwicklerwerkzeuge > Konsole oder STRG+UMSCHALT+I
• Safari: ALT+CMD+C

weitere Infos zur Konsole und Doku: Console - Web API Interfaces | MDN



Nützliche Info:
Verkettet man eine Meldung beispielsweise mit einer Variable wie hier

var div = document.getElementById("element");
console.log("Element " + div + " mit der ID 'element'");

, so wird nur "Element: [object HTMLDivElement] mit der ID 'element'" ohne weitere Informationen zum Element angezeigt.
Ein sehr nützlicher Trick, um hier die volle Funktionalität der Konsole beizubehalten: die Verkettung folgendermaßen durchzuführen:

var div = document.getElementById("element");
console.log("Element ", div, " mit der ID 'element'");

Nun wird ein klickbares Element in der Konsole angezeigt,
"Element: " <div id="element"> " mit der ID 'element'", zu dem weitere Eigenschaften und Informationen angezeigt werden können.

 

[j-l-n]

kleine Ergänzung: Geht hier auch mit F12.

Richtig, danke. Mit STRG+UMSCHALT+J gelangt man jedoch direkt zum Konsolen-Tab: Keyboard Shortcuts - Google Chrome

 

[mikdoe]

Noch weitere Debug-Möglichkeiten: https://medium.com/outsystems-experts/beyond-console-debugging-tricks-f7d0d7f5df4#.lz3c6vjt1

und eine JS Lib: https://github.com/i-break-codes/logerr

 

[mikdoe]

Querverweis: http://forum.jswelt.de/javascript-faq/48897-finde-fehlerkonsole.html

 

[mikdoe]

Performance messen:

var t0 = performance.now();
...code...
var t1 = performance.now();
console.log('Dauer: '+(t0-ti));