Javascript debuggen mit console.log und Firebug

Firebug ist ja bekannterweise eine äußerst hilfreiche Extension für den beliebten Browser Mozilla Firefox.
Wenn in Javascript-Werte zu debuggen sind, dann ist die Konsolen-Ansicht in Firebug sehr hilfreich, wie ich festgestellt habe. Anstelle des oft verwendeten Vorgehens, einen alert() einzubauen, kann man hier viel schöner mit console.log arbeiten.

Hier eine kurze Demo anhand des nachstehenden HTML-Codes:

<html>
<head>
<title>testpage</title>
</head>
<body>
<p>dies ist die Testseite</p>
<script language="javascript" type="text/javascript">
var i = 'ich bin der zu debuggende String';
console.log('i value is %d', i);
</script>
</body>
</html>

Mittels dieser Technik kann man gut Variablen-Werte unter Live-Bedingungen debuggen, ohne störende Alert-Fenster einzublenden. Im Firebug ist der jeweilige Wert dann direkt zu sehen:

console.log in Firebug

console.log in Firebug

Links:
Mozilla Firefox
Firebug Extension

CSS-Optimierung mit dem Firebug-Plugin CSS Usage

Ich muss sagen, das sieht ziemlich vielversprechend aus auf die ersten paar Blicke zum CSS-Optimieren. Der dazugehörige Tipp kam vom Kollegen Michael Hnat von Bluegras: das Firebug-Plugin „CSS-Usage“ (erhältlich unter https://addons.mozilla.org/en-US/firefox/addon/10704). CSS-Usage erweitert Firebug um einen zusätzlichen Tab, wenn man den ausgewählt hat, kann man die Website scannen.

CSS Usage

CSS Usage

Nachdem der Scan beendet ist, sieht man die einzelnen Klassen aller beteiligten Stylesheets mit verschiedenen Farben gekennzeichnet. So sind zum Beispiel nicht verwendete Klassen mit rot markiert, was einem durchaus gut helfen kann, Altlasten loszuwerden. Hellgrün markierte Klassen wurden auf der momentan gescannten Seite gefunden, dunkelgrüne Klassen auf einer der vorher besuchten, man kann sich also größere Teile einer Website anschauen und übereinander scannen.

Man kann sich dann auch noch eine bereinigte Version des CSS exportieren, wo die nicht benutzten Klassen direkt auskommentiert sind, auf dieser Basis kann man die Stylesheets schon recht gut ausmisten. Momentan klappt die Anzeige der Zeilennummern noch nicht richtig, aber die Anhaltspunkte, die man durch das Add-On bekommt, sind wirklich sehr hilfreich. Wenn Ihr noch mehr darüber wissen wollt, könnt Ihr auch mal auf http://spaghetticoder.org/cssusage/ vorbeischauen.