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:

Next, I'll define the page callback:

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

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:

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

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

The Devel module has a great feature called Theme Developer which makes theming a breeze. When enabled, you'll see a box in the bottom left of your browser window, themer info. This functionality helps answer the question: how do I change the way this piece of my theme looks? If you enable the themer info checkbox and moveover your theme, you'll noticed that various html structures will be highlighted in red, very much like the essential Firefox plugin, Firebug.

Let's say you wanted to redesign the appearance of the search form in your theme. If you click on search form using the themer info, you'll get a window full of useful information, similar to this:

This window tells you which functions and templates are used to create the html, and which functions and templates you can define to override the themable output. Check out the section called "File used". It should tell you that the search form uses it's own template file found here: modules/search/search-theme-form.tpl.php. In this case, we're in luck. You can simply copy that file into your theme directory and modify it as necessary.

In other situations, a function is used instead of a template tpl.php file. If you use the themer info tool and click on the navigation menu you'll notice a function was used (theme_menu_tree):

To modify the themable output, you'll have to create a function in your template.php called YOURTHEME_menu_tree. Before you go any further, read the API documentation for the function your are replacing. For this example, browse to: http://api.drupal.org/api/function/theme_menu_tree. Since Drupal will be passing a predefined set of arguments to our new function, it's best practice to use the same number and name of arguments that Drupal uses. Check out the sections in the API documentation called definition and code. You'll see that the theme_menu_tree function accepts one argument ($tree):

So, in your template.php file, define your new function. The first thing you should do it get acquainted with the structure of the arguments and what the function returns (array, object, html, etc). In the code below, I'm using the PHP function print_r to show the structure of the argument. Now, you can modify to your heart's content.

Now, you should be on your way to overriding the themable output of any piece of your site.