blog.bartlweb - a technologist's external brain

Thema: Webentwicklung

Debugging mit der Firefox Extension Firebug

Die Firefox Extension Firebug bietet nicht nur die Möglichkeit HTML und CSS zu inspizieren sondern auch JavaScript Fehler anzuzeigen und vor allem JavaScript zu debuggen.

Dazu bietet Firebug eine Reihe von Befehlen um Debug- und Logging-Ausgaben in dessen Console zu schreiben:

console.debug();
console.log();
console.warn();
console.error();
console.info();

Achtung: Ist kein Firebug vorhanden bzw. in anderen Browsern als Firefox werfen diese JS-Befehle Fehler und verhindern so die Ausführung des eigentlich JavaScripts.

Anzahl der HTML-Elemente auf einer Website ermitteln

Gerade bei Performance-Kritischen Webapplikation kann oft ein schlanker Code wunder bewirken. Um alle auf der Website vorhanden HTML-Elemente zu zählen genügt ein einfacher JS-Befehl:

document.getElementsByTagName('*').length;

Conditional Comments

Microsoft hat für alle InternetExplorer Versionen bis Version 7 (ab IE8 nicht mehr) die Funktion der so genannten Conditional Comments integriert. Dabei handelt es sich um Anweisungen innerhalb von Kommentaren die nur vom InternetExplorer interpretiert werden und dazu genutzt werden können HTML-Code oder aber vor allem CSS und JS-Dateien nur in bestimmten IE Versionen einzubinden.

Das folgende Konstrukt ist das geläufigste wobei der erste HTML-Code in allen IE Versionen die <= 7 sind angezeigt wird und der zweite nur in <= IE6:

<!--[if lte IE 7]>
  ...
<![endif]-->
<!--[if lte IE 6]>
  ...
<![endif]-->

JS-Meldung beim Verlassen einer Webseite anzeigen

Um einen Benutzer beim Verlassen der Seite einen Warnhinweis (z.b. bezüglich einens nicht gespeicherten Formulars) einzublenden ist ein wenig JS von nöten:

window.onbeforeunload = function () {
  return "Meldungstext";
};

Die Meldung wird vom Browser generiert und kann aus Sicherheitsgründen, bis auf den Text, nicht verändert werden.

SQL-Abfrage in Typo3-Extension

Das Typo3-Framework bietet eine einfache möglichkeit SQL-Abfrage durchzuführen. Der untere Beispielcode zeigt ein einfaches Select-Statement:

$select = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
  'uid, title',    
  'pages',
  'hidden = 0 AND deleted = 0',
  '',
  'title DESC'
);
            
if($GLOBALS['TYPO3_DB']->sql_num_rows($select)>0) {
  while( $row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($select) ) {
    ...
  }
}

Einfaches Debuggen in Typo3

Typo3 bietet den Befehl t3lib_div::debug() mit dem ein komfortable Ausgabe von Variablen am Anfang jeder Seite und damit ein einfaches Debuggen möglich ist.

t3lib_div::debug($variable);

Im Zusammenhang mit einer if-Abfrage auf den GET-Parameter debug ist auch ein komfortables Live-Debugging auf eine bereits online gestellten Seite möglich da Debug-Informationen dann nur bei Aufruf der Url im Format: http://www.website.com/index.php?id=4&debug=1 ausgegeben werden.

if($_GET[debug] == 1) {
  t3lib_div::debug($printIds);
}

Anzeigen des DirectMail-Folder-Icons im Typo3-Backend

Bei neueren Versionen der Typo3 Extension DirectMail wird der DirectMail Sysfolder (Sysfolder mit PlugIn DirectMail) nicht mehr mit dem DirectMail-Icon versehen.

Das Ergänzen der Datei ext_tables.php im Installationspfad der Extension um folgende Zeile schafft Abhilfe:

// add folder icon
$ICON_TYPES['dmail'] = array('icon' => t3lib_extMgm::extRelPath($_EXTKEY).'ext_icon.gif');

Typo3-Installation mit UTF-8 Datenbank

Typo3 erstellt Datenbank-Tabellen während der Installation mit dem Assistenten leider nicht mit den Zeichensatz UTF-8 sonder mit LATIN. Die folgende Anleitung beschreibt wie man eine frische Typo3-Installation für den Einsatz mit UTF-8 konfiguriert und die Datenbank entsprechend umstellt. Achtung: Nicht bei einer bestehenden Installation anwenden, da alle Datenbankinhalte gelöscht werden.

Typo3 Installer

Führen Sie die Installation mit dem Installer wie gewohnt aus.

Install Tool

Setzen Sie nun die folgenden Parameter über das Install-Tool in der Sektion "All Configuration".

[SYS][setDBinit] = 'SET NAMES utf8';
[SYS][UTF8filesystem] = 1 (Haken setzen)
[BE][forceCharset] = 'utf-8'

Datenbank

Danach wird die Datenbank umgestellt. Verwenden Sie dazu das Tool "phpMyAdmin". Zunächst muss der Zeichensatz der Datenbank umgestellt werden.

Redirect IE6 via TypoScript

Des öfteren will man ältere Browser von seiner Webseite ausschließen und Benutzern einen netten Update-Hinweis liefern. Das folgende TypoScript leitet alle InternetExplorer Version die kleiner oder gleich 6 sind um (ausgenommen die Mobile Version).

PIDinRootline gibt dabei die ID der obersten Seite unter der sich alle anderen befinden an.

Ändern Sie die Url der Location entsprechend Ihren Bedürfnissen.

Constants

protocol = http
[globalString = IENV:TYPO3_SSL=1]
  protocol = https
[global]
host = www.domain.com
[globalString = IENV:HTTP_HOST=domain.com]
 host = domain.com
[globalString = IENV:HTTP_HOST=192.168.10.100]
  host = 192.168.10.100
[globalString = IENV:HTTP_HOST=domain.local]
  host = domain.local
[global]

Setup

#
# redirect not supported browsers - ie6 and below, but do not redirect iemobile
#
[browser=msie] AND [version= <7] AND [globalVar = TSFE:id=2]
[browser=msie] AND [version= <7] AND [device=pda]
[browser=msie] AND [version= <7]
  page.config.additionalHeaders = Location: {$protocol}://{$host}/index.php?id=2
[global]

Domain einer WordPress-Installation ändern

Leider benötigt WordPress in seiner Konfiguration immer noch die Angabe der Domain mit der auf die Installation zugegriffen werden soll. Ändert sich diese Domain funktioniert zunächst einmal nichts mehr. Doch zwei Zeilen die zur Konfiguration (wp-config.php) hinzugefügt werden bringen alles wieder ins Lot:

define('WP_HOME','http://wwww.domain.com');
define('WP_SITEURL','http://www.domain.com');