Firefox

Javascript debuggen mit console.log und Firebug

Posted on by marcus

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

Posted on by marcus

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.

einmal den Google Reader in schön bitte

Posted on by marcus

Wer wie ich den Google Reader schätzt und benutzt, um der täglichen Informationsflut Herr zu werden, der hat sich sicher auch schon oft gedacht: „Mann, ist das alles hässlich hier“! Gut, dass man Abhilfe schaffen kann. Mein Lieblings-Theme ist „Helvetireader“, ein minimalistisches Theme, das sich auf das Wesentliche beschränkt und leicht zu installieren ist.

Helvetireader

Helvetireader

Die Installation in Firefox, Opera, Chrome oder Safari ist fix gemacht:

1. Firefox Add-On Greasemonkey installieren
(https://addons.mozilla.org/en-US/firefox/addon/748)
2. http://helvetireader.com/ aufrufen
und dort „install as a userscript“ (http://helvetireader.com/)
3. schon fertig
der Google Reader erscheint in neuem Glanz

Wer meinen Geschmack nicht teilt, aber trotzdem einen neuen Look für seinen Reader sucht: weitere Themes lassen sich leicht durch eine Google-Suche finden.

Reblog this post [with Zemanta]

Scripte beobachten und debuggen mit Javascript Deobfuscator

Posted on by marcus
Scripte beobachten und debuggen mit Javascript Deobfuscator

Scripte beobachten und debuggen mit Javascript Deobfuscator

Abteilung kleine Helferlein: der Javascript Deobfuscator ist eine Firefox Extension, die sich prima eignet, um eventuellen Problemen mit JS-Code auf die Schliche zu kommen. Die Erweiterung zeigt an, welcher Skripte auf der Website ausgeführt werden, auch wenn der JS-Code dynamisch generiert wird. Die Extension ist über das Extras-Menü vom Firefox zu öffnen, die jeweilige Ansicht im Popup gibt Informationen, welche Skripte kompiliert beziehungsweise ausgeführt werden. Hier gibts die Extension zum Download.

Euer FCKEditor geht plötzlich nicht mehr im Firefox?

Posted on by marcus

Neues aus der Abteilung Kuriositäten: wenn Ihr den FCKEditor einsetzt und Euch wundert, dass dieser plötzlich unter Firefox 3.6 nicht mehr geht, dann hier die Lösung dazu: es liegt eher am Jahr 2010, ist halt unglücklich mit dem Erscheinen des neuen Firefox zusammengefallen. Im Connector werden die Gecko-Browser mit folgender Überprüfung versehen, wenn der Paramter checkBrowser aktiviert ist:

stResult = reFind( "gecko/(200[3-9][0-1][0-9][0-3][0-9])", sAgent, 1, true );

Prima, also wahrscheinlich so ziemlich das gleiche lustige Problem wie mit den EC-Karten.
Dies müsst Ihr also ersetzen durch eine zeitgemäße Prüfung, wenn Ihr den Editor auch weiterhin verwenden wollt:

stResult = reFind( "gecko/(20[0-9][0-9][0-1][0-9][0-3][0-9])", sAgent, 1, true );

Optional kann man natürlich auch den Browsercheck durch die Deaktivierung des Paramters checkBrowser komplett umgehen.