Last few weeks I have spend a lot of time fixing GD Star Rating bugs, and even more time trying to figure out bugs in other WordPress plugins. JavaScript code is very easy to break, and in most cases it will not going to affect the page rendering, only some of the elements.

People notice GD Star Rating stops functioning and they assume that the problem is with GD Star Rating. Rating is interactive feature and when it stops working, it is the first thing blog visitors see. But in most cases some other plugin uses JavaScript and when that stops working, all JavaScript stops working.

The best thing is to check each plugin you install on you blog to see if this plugin breaks something. To see JavaScript problems you need to have Mozilla Firefox borwser (version 2 or 3) and Firebug plugin. Firebug also have it’s own plugins like Firecookie. You can install that too.

Activating of Firebug

Once you install Firebug, you need to activate it for websites you want to use it with. So, open your blog in Firefox, and you can see an bug icon in the status bar. If you click on it, Firebug panel will open. You can see that all the features are disabled. Check all of them, and enable them for your website.

After you do that, plugin will reload the page, and you are ready to debug it. Once activated, Firebug will display all errors in JavaScript execution on each page, and it’s best debuging tool for such task.

JavaScript Bugs

If everything is fine with JavaScript code on the page you will still see bug icon on the toolbar. But, if not, if there is a bug in JavaScript on the page, you are not going to see bug, but the error message. Error message tells the number of errors found in the JavaScript execution.

If you click on the error message, Firebug console panel will open and you can see full error message. Message will show you exactly where the problem is, including the file with the bug. In case like on the picture you see the bug in jQuery code and call to a nonexisting function in a ‘contact-form-7.js’ file.

Such bug will cause all JavaScript code execution to fail, and plugin like GD Star Rating will stop working. So, the problem was not GD Star Rating but something else, altough the first thing you noticed is stars not accept clicks.

Next thing is for you to find where the JS file with bug comes from. On Firebug toolbar forth item is Script. If you click on it, you will see the JavaScript debuger console and you can see contents of each JS file loaded by the page. You need to find the ‘contact-form-7.js’ file on this list so you can see where the file is located.

And you can see that this file is loaded from plugin folder, and the plugin is ContactForm7. Now you know what needs to be fixed. If you disable this plugin, and if there are no more other errors, than blog should be working again, and rating stars should be working again. You need to check each error reported by Firebug and to disable or fix all plugins causing them. Also, please notice that some themes use JavaScript and jQuery and that theme can cause problems also.

Other problems

Sometimes page can fail if some of the files that were suppose to load are not loaded. You can see full list of all loaded files with Firefox panel called Net.

And as you can there is an CSS file that was not found and is not loaded. In this case CSS is not critical, but just the same there could be JavaScript file that failed to load, and that could cause all kinds of problems if that file was important like jquery.js is or some other essential JS files.

What’s Next?

My suggestion is to test each plugin you activate. A lot of plugins use JavaScript, and many of them have bugs. Using Firebug to find such bugs is, as you can see, easy and it will quickly reveal potential problems. You can try to contact authors of the plugin causing problems and inform him about the bug you found, and hope that they will fix it.

Next article will be about ajax problems.