Drupal 6: Passing PHP variables to Javascript/jQuery and debugging with FireBug

In this tutorial I’ll show a way to pass PHP/Drupal variables to javascript/jquery using drupal_add_js(), and a way you can debug javascript variables using the FireBug console.

I’ll start by creating a hook_menu() implementation to establish a page callback:

function helper_menu() {

  $items = array();

  $items['js-vars'] = array(
    'title' => t('Javascript Variables'),
    'description' => t('Javascript Variables'),
    'page callback' => 'helper_page_callback_js_vars',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,

  return $items;


Next I’ll define the page callback:

function helper_page_callback_js_vars() {

  // include module javascript file
  drupal_add_js(drupal_get_path('module','helper') . '/js/helper.js');

  // define variables you'd like to pass to the DOM
  $js_vars = array(
    'js_vars' => array(
      'message' => t('Hello @username', array('@username' => $GLOBALS['user']->name)),
      'an_array' => array(
        'color' => t('red'),
        'name' => t('Eric'),

  // pass variables to javascript
  drupal_add_js($js_vars, 'setting');

  // generate some page output
  return "TEST";


And here is the contents of the javascript include file I stuck in my module directory:


  // debug variables directly in FireBug

  // popup mesage passed from Drupal


When viewing this page in a browser, you’ll see the following. The javascript popup window is using variables passed directly from a Drupal/PHP array:

javascript popup

The console.debug() javascript method was used to send data directly to the FireBug console. If you open FireBug, you’ll see the following:

FireBug Console

If you click on the Object shown, you can drill into the variables further:

FireBug Console