If your e-commerce website ever stops working normally, your browser console is the first place you should look to diagnose the issue(s). In most popular browsers, the console is quite easy to find. But if you’ve never braved your browser’s developer tools, then finding and fixing website errors may seem a bit elusive to you.
The Quirky Nature of JavaScript Errors
JavaScript is awesome and it has many advantages that enhance your e-commerce site. In fact, the CMS-powered plugins that drive many e-commerce stores rely on JavaScript to integrate all kinds of functionality that enhance the user experience.
But JavaScript also has a few minor drawbacks, chief of which is that one JavaScript error can bring all the other scripts on a page to a screeching halt. So, if you’re using WooCommerce or some other CMS-based script for your e-commerce site, then another plugin or extension can break your e-commerce platform’s JavaScript and vice versa.
Of course, this means your website’s user experience can take a nosedive which could lead to a string of customer complaints and even diminished search engine rankings. We want to help you avoid that. So, take the advice we outline below to find and fix common JavaScript errors with the Chrome browser.
How to Find Your Chrome Browser Console and Check for JavaScript Errors?
If you think an issue on your website is triggered by a JavaScript error, your Chrome browser has an easy way to check for that. Here’s how.
Step 1: Open the Console either as its own panel or as a drawer next to another panel
You have two options for opening the Console panel:
- Windows / Linux – Press Ctrl+Shift+J .
- Mac – Press Cmd+Opt+J.
You also have two options for opening the Console as a drawer next to another panel:
- Press Esc while viewing DevTools.
- Click the button for Customize and control DevTools and then press Show console.
Step 2: You’ll now see the data displayed in the console.
Finding Common JavaScript Errors
Now that you’ve got the Console open, it’s time to figure out what the heck we’re looking at and see if there are any JavaScript errors.
Staying within the browser tab you used to open the Console, navigate to the page you want to check for errors. If you’re already on that page, reload it so you can read the Console’s output.
If there are any JavaScript errors, you’ll see a red line of text indicating the error. You can click the black arrow to expand the error and see its full details in the console. If there are no JavaScript errors, then you won’t see any red lines or error messages.
Top 10 Most Common JavaScript Errors
Now let’s take a deeper dive and discuss some of the most common JavaScript errors you may encounter with Chrome, Safari, and Internet Explorer.
1. Uncaught TypeError: Cannot read property.
This error occurs in Chrome when a method is called, or a property is read for an undefined object.
2. TypeError: ‘undefined’ is not an object (evaluating).
This error arises in Safari when a method is called, or a property is read for an undefined object.
3. TypeError: null is not an object (evaluating).
This is another Safari error that occurs when a method is called, or a property read for a null object.
4. (unknown): Script error.
You’ll see this error when a JavaScript error that hasn’t been caught violates the cross-origin policy and crosses domain boundaries.
5. TypeError: Object doesn’t support property.
This is an Internet Explorer error that arises when an undefined method is called.
6. TypeError: ‘undefined’ is not a function.
This error is triggered in Chrome when an undefined function is called.
7. Uncaught RangeError: Maximum call stack.
This is another Chrome error that can be triggered by a number of scenarios.
8. TypeError: Cannot read property ‘length’.
This Chrome error is triggered when by the reading length property of an undefined variable.
9. Uncaught TypeError: Cannot set property.
This error occurs when a script tries to access an undefined variable. Without fail, it will return as “undefined” because it’s not possible to set or get the property of an undefined variable.
10. ReferenceError: event is not defined.
This JavaScript error is triggered when a script attempts to access an undefined variable or one that is not within the current scope.
In most cases, if you have a plugin or script triggering these JavaScript errors, reaching out to the developer for support will lead you to a solution. Generally, they’ll provide a patch or simply roll out the fix with the next plugin or script update.
However, we’re not all so lucky as some script updates and support are completely abandoned by developers for various reasons. They could go out of business or no longer be interested in supporting the project. It happens. So, it’s always a good idea to have someone on standby to help if you aren’t comfortable tackling JavaScript errors on your own.
Get Help With Finding and Fixing JavaScript Errors on Your E-Commerce Website
Finding and fixing JavaScript errors on your e-commerce website can be daunting, even with the simple steps we’ve provided above. However, if you suspect JavaScript errors are preventing your site from working properly, it’s critical to have them addressed as soon as possible to avoid losing revenue.
Plus, an e-commerce site that is not maintained well can lose search engine rankings due to the decline in user experience. If you don’t already have someone maintaining your e-commerce site on a regular basis, then you’ll want to either hire someone to do it or learn how to maintain the technical aspects of your website yourself.
If you need help finding and fixing JavaScript errors or maintaining your e-commerce website, contact us today and let us help you maximize your website’s performance.