Turing tarpit » debugging

Wordpress Logger: A plugin that displays log messages to the Safari and Firefox console from PHP

Chandima Cumaranatunge — Tue, 12 May 2009 06:04:05 +0000

Essential debugging tool for plugin and theme developers.

Display log messages from PHP in the browser console in Safari and Firefox (with firebug). You no longer have to use print_r statements from PHP to figure out what is going on in the code. Besides, print_r statements mess up the DOM and HTML layout.

Features

Log debug messages directly from themes and plugins.
Display log messages in the browser console, without muddying up the browser display.
Displays complex structures such as arrays and objects in pretty print.
Shows the line number and file from where the message was logged ( you won’t lose track of log statements ).

Screenshots

Firefox console showing debug messages.

Safari console showing debug messages

Installation

Verify that you have PHP5, which is required for this plugin.
Download the whole wplogger folder into the /wp-content/plugins/ directory.
Activate the plugin through the Plugins menu in WordPress.

Requirements

Make sure that your theme template has a footer ( index.php should have a get_footer() function call at the end).
Turn on the console in your browser:
- Firefox: The Firebug extension needs to be installed and activated.
- Safari: Show the Error Console from the Debug/Develop menu.
  Details on how to enable the Debug menu for Safari on OSX and Windows.

Usage

After activating the plugin, the following PHP function call can log any PHP expression to the console log.

$wplogger->log( php_expression [, message_type] );

The message_type is optional and can be any one of the following constants:

WPLOG_ERR
WPLOG_WARNING
WPLOG_INFO
WPLOG_DEBUG

Use cases

Logging from template files

This is from inside the loop to display post IDs.

 $wplogger->log( 'Post ID: '.$post->ID ); ?>

Output:

[Information: from line 20 in file index.php] Post ID: 125
[Information: from line 20 in file index.php] Post ID: 116
[Information: from line 20 in file index.php] Post ID: 65

Logging from PHP files

This is from functions.php ( always a good idea to check if $wplogger is available ). Note the message type set to warning through the second parameter.

if ($wplogger) $wplogger->log( get_option('active_plugins'), WPLOG_WARNING );

Output:

[Warning: from line 55 in file functions.php] array (
	  0 => 'wplogger/wplogger.php',
	  1 => '12seconds-widget/12seconds-widget.php',
	  2 => 'get-the-image/get-the-image.php',
)

Logging from plugins

This is from inside a plugin function. Note the global statement to get $wplogger into current scope.

global $wplogger; $wplogger->log( 'No images attached to this post', WPLOG_ERR );

Output:

[Error: from line 206 in file get-the-image.php] No images attached to this post

Credits

Code that forces the wplogger plugin to load first was adapted from the WordPress FirePHP plugin developed by Ivan Weiller.

This plugin is based on PEAR Log, the logging framework that is part of the PHP PEAR library. Current maintainers Jon Parise, Jan Schneider, and Chuck Hagenbuch. PEAR Log is based on code first developed for the Horde 1.3 framework – original authors Chuck Hagenbuch, and Jon Parise.

Download Plugin

Feature requests and critiques

This is the first iteration of the wplogger plugin. Please comment on how you would like to see it improved.

PureMVC Console – Shines a light inside the MVC triad

Chandima Cumaranatunge — Mon, 02 Mar 2009 22:31:38 +0000

I was checking the PureMVC website today and came across PureMVC Console developed by the good folks at Kap Lab. This is an absolutely invaluable tool to figure out in real-time what is going on inside the Flex PureMVC framework in a running application. PureMVC is quite lightweight and is very good at keeping things hidden under the hood. However, during development it is essential to get a snapshot of application state and the sequence of notifications. This is exactly what PureMVC Console does. It provides you with a flashlight to peer into your Notifications, Commands, Mediators and Proxies and track notifications and application flow in response to user gestures and other events.

For example, if you need to know the state of your value objects at any point, just click on the Proxiestab and select the proxy.

If you want to check the sequence of actions taking place in your application from startup, just click on the PureMVC flow tab. This is very useful for debugging as it provides a record of the command invocation sequence and will help answer questions like “why did this command execute before this other one?”

I am a big fan of the Xray logger developed for Flash AS2 and had to try out this console right away as this is the first console with similar utility for AS3, I integrated the console into the Employee Admin demo (developed by Cliff Hall).

Employee Admin Demo with integrated Console

Click on the button below to open the Employee Admin demo. Make sure that you hit Ctrl+Alt+F6 to open the console ( Alt = Option in OSX ).

Integrating the console into the Employee Admin Demo

The console is very easy to integrate into a new or existing app – just follow the integration guide. The ease of integration is a huge plus as it is simply injected before the application is invoked.

1. Add the PureMVC Console SWC into your library

First drag-and-drop the PureMVC Console swc file into the libs folder in your Flex project. There is a different swc if you are using the multi-core version of PureMVC.

2. Add the console component into your application

For an MXML app, you need to add an additional xmlns:kapit="fr.kapit.*" name space attribute to the tag and then add the component before the closing tag (see integration guide). I added this to the EmployeeAdmin.mxml file which is the default application for the project.

3. Add a new SwitchFacade parent class for you application facade

The next step is to create a new SwitchFacade class and modify your application facade so that it inherits from SwitchFacade ( instead of the PureMVC Facade class ). The SwitchFacade class is the same for all apps and can be copied and pasted from the integration guide. Make sure you create the SwitchFacade class in the same location in the folder hierarchy where you current application facade class resides. You can right click on the enclosing folder (employeeadmin in my case) and create New > ActionScript Class and type in SwitchFacade for the class name. Now copy and paste the code.

Injecting the SwitchFacade class allows you to control the integration of the console using compiler directives as opposed to changing code when it comes time to ship the application. SwitchFacade extends the PureMVC Facade class if the CONFIG::release directive is set. Conversely, if the CONFIG::debug directive is set ( and CONFIG::release is unset), SwitchFacade extends DebugFacade that has all the debug stuff required by the console.

4. Set the compiler directives

To control which facade gets extended you need to add the CONFIG::release and CONFIG::debug directives in the compiler options. Right click on the Project folder and choose properties from the contextual menu. Now click on Flex Compiler option to add the additional compiler directives in the Additional Compiler Arguments field.

-define=CONFIG::release,false -define=CONFIG::debug,true

Reset the directives for the release version.

Recap of cool features:

Very easy to integrate into a new or existing app.
Works with the standard version of Flash ( does not need the debugger version ).
Integration is controlled by using compiler options ( just change a compiler option for the release version ).

Simple to integrate and keeps out of the way of you doing the job of coding and debugging – excellent!