A tutorial to enable Firebug console.log in Magento

Firebug is probably one of the most used extensions for developpers.

One of the common firebug extension usage is to log and debug elements in console; this is done through the syntax:


console.log(somethingtolog);

Problem is this syntax does not render anything with Magento. This tutorial will help you to reactivate this functionnality:

Why cannot we use console.log syntax within Magento?

For security reasons, Varien has rendered silently all the methods availables on console object. This is made in the js/varien/js.js javascript file:

js.js file is loaded on frontend and adminhtml default layout; so in every page, we won’t be able to use console

Well, and how are we gonna be able to use it?

How will we be able to reuse the console methods?

I hope that you’ve not thought of edit js.js and comment the varien code…. 🙂

We will keep the native functions but want to be able to use it for developments purpose.

Because this is a javascript framework file, we cannot use the skin overload mechanism. So, we’ll load a copy of the native script but only for development purposes

Make a copy of the original js.js file

cd js/varien
cp js.js jswithconsole.js

Commnent the original code source that disables the console methods

In the copy, we’ll comment the console function overload. You should have something like this:

Load firebug console native methods only for Magento developments purposes

In vhost configuration file, or .htaccess file, we’ll replace our file with the new one containing the following rewrite rule:

<IfModule mod_rewrite.c>

############################################
## enable rewrites

    Options +FollowSymLinks
    RewriteEngine on
## begin update to load a specific file 
## which enable firebug console when developper mode is set
## http://blog.kyp.fr
    RewriteCond %{REQUEST_URI} js/varien/js.js
    RewriteCond %{ENV:MAGE_IS_DEVELOPER_MODE} =1
    RewriteRule ^js/varien/js.js$ /js/varien/jswithconsole\.js [R=302,L]
## end update
...
</ifModule>

Make sure that MAGE_IS_DEVELOPER_MODE value can be tested

The only problem with this rewrite rule is that we test a value for an environnement variable. It will never work if you used to declare MAGE_IS_DEVELOPER_MODE with the following syntax:

	<Directory /your/magento/root/folder>
		Options Indexes FollowSymLinks MultiViews
		AllowOverride All
		Order allow,deny
		allow from all
		DirectoryIndex index.php
		setEnv MAGE_IS_DEVELOPER_MODE "1"
	</Directory>

One way to ensure that testing environnement value will work could be the following MAGE_IS_DEVELOPER_MODE definition:

	<Directory /your/magento/root/folder>
		Options Indexes FollowSymLinks MultiViews
		AllowOverride All
		Order allow,deny
		allow from all
		DirectoryIndex index.php
		#setEnv MAGE_IS_DEVELOPER_MODE "1"
		SetEnvIf _ .* MAGE_IS_DEVELOPER_MODE=1
	</Directory>