Use MageBridge with Advanced Module Manager - Yireo

Using the JavaScript Error Console

When working with Joomla! and Magento combined, JavaScript errors might easily occur. Step 1 in solving a JavaScript error is identifying it properly. To do this, you will need to work with the JavaScript Error Console of your browser. This tutorial gives you the basics.

JavaScript console in Internet Explorer

When Internet Explorer encounters errors with JavaScript, you can easily find a little yellow icon at the bottom of your window mentioning that the HTML-document has finished loading but with errors on page. Note that for this to work, you need to have the configuration option Disable Script Debugging unticked.

When you click on this icon, a popup will appear with further details on this error. Unfortunately this does not give you much help. JavaScript error-messages in IE are known to be cryptic and vague. We recommend you to not investigate issues with IE at all, but instead use Chrome or FireFox.

JavaScript console in Firefox

The console of Firefox is much more helpful. It can be opened under Tools > Error Console. If you have the Webdeveloper Toolbar installed, it can be found under Tools > Web Developer > Error Console.

The console shows you various buttons for listing messages (All, Errors, Warnings, Messages), while the Clear button allows you to remove those messages. While warnings and general messages might be useful as well, they might make you crazy because CSS validation warnings might easily fill up the listings. Instead, focus on the Errors. If any JavaScript error occurs, it will appear here.

JavaScript console in Chrome

The console in Google Chrome is a bit hidden away: You need to click on the little Configuration-icon in the top-right, after which a menu expands. Navigate then to Tools > JavaScript Console.

Once opened, the console offers you various developer tools to help you debugging issues. For instance, you can inspect the various HTML-elements or see which resources are needed to display the page. In this case, only the Console is of importance.

JavaScript console in Safari

Last but not least, there is also Safari. However, debugging JavaScript in Safari is by default not possible: You will need to modify some settings through a Terminal. If you make a websearch for the keywords enable safari debug menu, you will get various hits on how to do this. Once the debug menu is enabled, you can navigate to the Error Console easily. However, we recommend not to use Safari for JavaScript debugging, but to use either Chrome or Firefox instead.