Use code PERFMATTERS for an extra 10% off!
  1. Home
  2. Docs
  3. Tips
  4. How to find and fix JavaScript console errors

How to find and fix JavaScript console errors

When it comes to working with WordPress or any kind of website, JavaScript (JS) console errors provide clues that make it easier to track down why a feature might not be functioning properly. Common things we see that break in WordPress include sliders, mobile menus, image galleries, popups, etc. These all rely on JS (many on jQuery) to load.

To resolve these issues, you might need to exclude JS from deferral or delay when using Perfmatters. Make sure to check out our common JS exclusions list. We’re constantly updating our documentation with different plugins and themes. 

If an exclusion is always needed, we’ll add it to the core of Perfmatters to work automatically behind the scenes. However, we take performance very seriously, and if there is a scenario where it’s only needed some of the time, we might not add it because we want you to be able to squeeze out every ms of performance using our plugin. Sometimes this can mean it takes a little more work, but your site will be faster in the end.

Every WordPress site is different, so it’s impossible to cover every scenario. We’re always happy to help if you can’t figure it out on your own; just send us a message.

Tracking down JavaScript delay exclusion

Some JS exclusions can be quick and easy, and others might take a little work to track down. In this example, we’ll be using the Atarim WordPress plugin, which touches on all points (excluding JS files and inline JS). The problem is when we have the Delay All Scripts option enabled in Perfmatters, the plugin doesn’t load the feedback forms properly. 

The first step is to exclude the JavaScript files from delay. You can find these in the network tab Chrome DevTools or using a tool with a waterfall view like GTmetrix

Chrome DevTools network tab
Chrome DevTools network tab

Typically a plugin will have its JS loading from its respective plugin folder, such as:

/wp-content/plugins/nameofplugin/jsfile.js

 It could be a single JS file or multiple JS files. 

In this instance, with Atarim, there are multiple JS files. You can try excluding just one JS file that you think might pertain to the problem. However, sometimes JS also has dependencies that need to load in the right order (meaning you might have to exclude more than one). In this instance, there were only a few small JS files, so we excluded the entire plugin’s JS by adding the following to the Excluded from Delay field in Perfmatters:

/wp-content/plugins/atarim-client-interface/
Exclude plugin's JS from delay
Exclude plugin’s JS from delay

You can always work your way backward. For example, try excluding the entire plugin’s JS first. If that fixes the issue, you could try hunting down individual exclusions.

In some cases, just adding the JS files for exclusion will fix your problem, and you’re good to go. However, after excluding the JS files from delay, Atarim still wasn’t working. This is where we go to the console in Chrome DevTools and look at any red errors that are showing up.

Chrome DevTools console tab
Chrome DevTools console tab

The first error we see is:

Uncaught ReferenceError: jQuery is not defined

This is the most common error you’ll probably see, as many things rely on jQuery, and when we excluded the Atarim scripts above, we changed the order of how the scripts load. We need jQuery excluded as well so that the original JS files and jQuery are all excluded from delay and loading in the same order.

jQuery is not defined error
jQuery is not defined error

To do this, we add the following to the Excluded from Delay field in Perfmatters:

jquery.min.js
Exclude jQuery from delay
Exclude jQuery from delay

After doing that, we then see the following errors. Since we’ve already included the scripts it mentions below; it means these are coming from inline JS.

Inline JS console errors
Inline JS console errors

You can view the source code of the site and do a quick search, and you’ll most likely find these. Here we can see there is a separate inline JS line for jQuery_WPF. This also needs to be excluded.

jQuery_WPF
jQuery_WPF

We also see the other line containing upgrade_url. This also needs to be excluded.

upgrade_url JS
upgrade_url JS

Our exclusions now look like this:

JS delay exclusions to fix console errors
JS delay exclusions to fix console errors

We test again, and the Atarim plugin is now working properly.

What if there are no console errors?

It’s pretty rare, but in some instances, there might not be any console errors to help you troubleshoot further what JS needs to be excluded from delay. In this scenario, here is what we recommend doing.

Take a look at the section breaking on your site and see if you can figure out what plugin is adding that functionality. Try excluding the JS for the entire plugin. If that resolves it, you can then add more fine-grain JS exclusions until you track down exactly what is needed. Or you could leave the entire plugin’s JS excluded.

Was this article helpful?

Related Articles