How do I find my JavaScript console errors?

Finding JavaScript errors

Often we have found that the Responsive Menu plugin will not respond to clicks on the menu button itself because a piece of custom coded JavaScript or JavaScript added by another plugin or your theme is causing errors.

If there is a fatal JavaScript error on your page then it will kill any more JavaScript from loading and working on the page meaning that the Responsive Menu functionality will be killed by the offending JavaScript.

The good news is that it is very easy to find these errors (although fixing them is not always so straight forward).

Almost every major browser provides users with a set of Web Developer Tools that can be used for debugging CSS, HTML and JavaScript among other things. To bring up the Web Developer Tools in most browsers all you need to do is hit the F12 key, which will bring up a screen at the bottom of your browser that will look similar to the below:

Firefox Developer Tools

As you will see we are currently in the HTML tab which gives us a view of all the HTML code on the current page. You can click on each of the different elements and the CSS applied to these sections are automatically updated in the right hand pane, the beauty is you can edit the declarations on the fly and see your changes in real time.

For our purposes here however, we are interested in the tab labelled Console. This is used for developers for JavaScript debugging so is perfect for us. Please note that sometimes the Developer Tools need to have the Console tab selected before loading the page for all JavaScript logs to show up, so first up, hit the Console tab and reload the page. If there are any errors it will look something like the below:

Firebug Console Errors

In this example we can see that we have some errors that need fixing (shown in red). The good news is that the console errors will usually show you the exact file and the exact line as well as the exact error so if you are comfortable in fixing this yourself you can go in and do it yourself, if not you have a very clear and concise error to provide to a web developer or online community like Stack Overflow to look for help.

Unfortunately, fixing these errors is different every time and is out of the scope of plugin support so I can’t offer any guidance on fixing the actual errors but at least you now know where to look and how to determine if you even have any JavaScript errors after all.