Einfaches PHP Debugging in Browser Console

Ich nutze die Console im Browser der gern um Debug-Inhalte auszugeben. Insbesondere bei Kunden-Sites kann ich so recht unscheinbar arbeiten und muss nicht die Oberfläche mit Debug-Meldungen zu zerstören, auch wenn man dies natürlich via Rechtabfrage filtern sollte. Im folgenden eine kleine Funktion, die mir den Inhalt in die Console schreibt, ohne Helferlein. Dies ist auch im Plugin Debug Objects untergebracht und kann beim Einsatz des Plugins direkt genutzt werden.

Der Screenshot demonstriert dies an einem komplexen Objekt in der Ausgabe und dient nur dem Verständnis. Den Inhalt, den ihr ausgeben wollt, liegt natürlich in eurer Hand.
debug-to-console

Die einfache Variante, die allerdings keine Objekte verarbeiten kann - lediglich Strings und Arrays. Im weiteren Verlauf dann eine etwas aufwendigere Funktion, die Objekte zulässt.


	/**
	 * Simple helper to debug to the console
	 * 
	 * @param  Array, String $data
	 * @return String
	 */
	function debug_to_console( $data ) {

		if ( is_array( $data ) )
			$output = "<script>console.log( 'Debug Objects: " . implode( ',', $data) . "' );</script>";
		else
			$output = "<script>console.log( 'Debug Objects: " . $data . "' );</script>";

		echo $output;
	}

Will man Objekte nutzen, so muss die Funktion erweitert werden. Will man Beispielsweise den Inhalt des globalen Objektes der WordPress Datenbank ausgeben, siehe folgende Zeilen


global $wpdb;
debug_to_console( $wpdb );

dann genügt die einfache Helferfunktion nicht, darum eine erweiterte Version, die auch Objekte ausgibt.


	/**
	 * Simple helper to debug to the console
	 * 
	 * @param  Array, Object, String $data
	 * @return String
	 */
	function debug_to_console( $data ) {
		
		$output = '';
		
		if ( is_array( $data ) ) {
			$output .= "<script>console.warn( 'Debug Objects with Array.' ); console.log( '" . implode( ',', $data) . "' );</script>";
		} else if ( is_object( $data ) ) {
			$data    = var_export( $data, TRUE );
			$data    = explode( "\n", $data );
			foreach( $data as $line ) {
				if ( trim( $line ) ) {
					$line    = addslashes( $line );
					$output .= "console.log( '{$line}' );";
				}
			}
			$output = "<script>console.warn( 'Debug Objects with Object.' ); $output</script>";
		} else {
			$output .= "<script>console.log( 'Debug Objects: {$data}' );</script>";
		}
		
		echo $output;
	}

Als schlanke und effiziente Lösung nutze ich gern folgende kleine Funktion, ohne Overhead.


	/**
	 * Simple helper to debug to the console
	 * 
	 * @param  object, array, string $data
	 * @return string
	 */
	function debug_to_console( $data ) {
		
		$output = '';

		// new and smaller version, easier to maintain
		$output .= 'console.info( \'Debug in Console via Debug Objects Plugin:\' );';
		$output .= 'console.log(' . json_encode( $data ) . ');';

		echo '';
	}

Den aktuellen Code findet ihr auf Github, dem Link folgen.

Chrome Logger – ChromePHP

Der Webinspector in Chromium ist mir ans Herz gewachsen, Firebug ist für mich nur notwendig, wenn ich im Firefox validieren muss. In diesem Zusammenhang habe ich auch das Debuggen im PHP Umfeld dort abgebildet. Bin ich nicht komplett in der IDE und man braucht diverse Daten im Debuggmodus, dann kann man dies über die Wege var_dump() in der Applikation ausgeben oder alternativ in Chromium mit Hilfe der Erweiterung Chrome Logger und der Library ChromePHP tun. Somit wird die Oberfläche nicht durch die Debug-Ausgaben zerstört und kann in Systemen bei Kunden sauber in die Konsole des Webinspector überführt werden. Dazu einige Hinweise.

chromephp-wp

Um die Möglichkeit in der PHP Welt in die Konsole des Webinspector zu debuggen, ist die Chrome Erweiterung Chrome Logger notwendig. Parallel muss eine Library ChromePHP eingebunden werden. Im einfachsten Fall ist dies via include im jeweiligen Projekt schnell erstellt. Alternativ kann, sinnvoll in Entwicklungsumgebunden, der Include in der php.ini abgelegt werden; via auto_prepend_file. Dies könnte beispielsweise wie folgt hinterlegt sein, je nachdem wo die Library abgelegt ist.


auto_prepend_file = /var/www/ChromePhp.php

Im WordPress Umfeld, was meine wichtigste Applikation in der Entwicklung ist, kann man es ebenfalls via Plugin rein holen. Dazu gibt es einige Lösungen bei Github. Ich für meinen Teil nutze das Plugin Debug Objects, was die Library inkludiert. Dies versetzt mich auch einfach in die Lage, beim Kunden auf der Plattform in die Konsole zu debuggen.

Außerdem der Hinweis, der Chrome Logger ist ebenso im Umfeld von node.js, Ruby und Pythen nutzbar.

WordPress Lightbox Plugin