Debug JavaScript Errors in WordPress with Browser Console

Sometimes, your WordPress or WooCommerce site just stops behaving. Menus don’t expand, buttons stop working, or the media uploader refuses to open. It’s frustrating, and in many cases, the root cause is a JavaScript error.

The good news? You don’t need to be a developer to find the error. Your browser already has the tools to help you diagnose the issue, and once you know where to look, you’ll be better equipped to troubleshoot or ask for support the right way.

Here’s a simple step-by-step guide to finding and reporting JavaScript errors on your WordPress site.

Step 1: Check in Another Browser First

Before diving in, open your site in a second browser (e.g. try Firefox if you’re using Chrome). Why?

• If the issue doesn’t show up there, it might be a browser-specific quirk or caching problem.

• If the issue happens in both, it’s almost certainly a script error.

Take note of which browsers are affected, this will help later if you reach out for support.

Step 2: Enable SCRIPT_DEBUG in WordPress

To make sure you’re loading the uncompressed versions of JavaScript files (which are easier to debug), you’ll need to enable SCRIPT_DEBUG.

1. Open your site’s wp-config.php file.

2. Add this line before the line that says “That’s all, stop editing!”:

define( 'SCRIPT_DEBUG', true );

Now reload your site and check if the issue is resolved.

• If it goes away, you’ve likely uncovered a minification or caching problem. You can disable SCRIPT_DEBUG and report the issue to the plugin or theme developer.

• If it persists, move on to the next step.

Step 3: Use Developer Tools to Identify the Error

All modern browsers come with built-in developer tools. Here’s how to access them:

In Chrome:

• Press Ctrl + Shift + J (Windows) or Cmd + Option + J (Mac)

• Or go to View > Developer > Developer Tools, then click the Console tab

In Firefox:

• Press Ctrl + Shift + K (Windows) or Cmd + Option + K (Mac)

• Or go to Tools > Web Developer > Web Console

In Safari:

• First go to Safari > Preferences > Advanced, and enable “Show Develop menu”

• Then go to Develop > Show JavaScript Console

In Edge or Internet Explorer:

• Press F12, then click on the Console tab

Step 4: Look for the Error

Once the Console tab is open:

• Reload your site

• Look for errors in red - these are likely the source of your problem

Common ones include:

• Uncaught TypeError

• jQuery is not defined

• Cannot read property 'x' of undefined

Click the error to see where it happened - it will usually show you the file name and line number, like this:

jquery.js:2 Uncaught TypeError: Cannot read property 'x' of undefined

Step 5: Take a Screenshot or Copy the Error

This is the most important part if you’re contacting support. Here’s what to include in your message:

• The browser(s) where the issue appears

• Whether enabling SCRIPT_DEBUG helped

• The exact error message

• The file and line number where it occurred

• Bonus: the full stack trace (you can usually expand the error for more detail)

• A link to the page where the error happens

If you’re contacting WooCommerce support, support agent often ask for this info when troubleshooting issues with things like the checkout, payment buttons, or the product editor.

Bonus: What If You See jQuery is not defined?

This one’s common, and usually means:

• jQuery didn’t load at all (maybe it’s been dequeued or moved)

• A plugin or theme is trying to use jQuery before it’s available

There’s a dedicated guide on fixing this, but feel free to reach out if you’re stuck, and be sure to include the console message.

Final Tips

• Don’t forget to turn off SCRIPT_DEBUG after testing (set it back to false)

• If the issue only appears when logged in, try disabling your browser extensions, some interfere with the admin dashboard

• Still unsure? Send the debug info to your theme/plugin developer or post in the WordPress support forums

JavaScript issues can be frustrating, but catching them early (and understanding what’s going on) gives you a big head start. Whether you’re building a custom theme or just running a busy WooCommerce store, using the browser console is a simple but powerful way to stay in control.

Need help understanding a console error? Share it in the comment - I’m here to help.