WordPress.org

Ready to get started?Download WordPress

Codex

Using Your Browser to Diagnose JavaScript Errors

If you're experiencing issues with your interactive functionality this may be due to JavaScript errors or conflicts. For example, your flyout menus may be broken, your metaboxes don't drag, or your add media buttons aren't working. In order to formulate your support request it helps the team to know what the JavaScript error is.

This guide will show you how to diagnose JavaScript issues in different browsers.

Contents

Step 1: Try Another Browser

To make sure that this is a JavaScript error, and not a browser error, first of all try opening your site in another browser.

  • if the site is not having the same issue in the new browser you know that the error is browser specific
  • if the site is having the same error it is not an error that is specific to one browser

Make note of any browsers you are experiencing the error in. You can use this information when you are making a support request.

Step 2: Enable SCRIPT_DEBUG

You need to turn on script debugging. Open wp-config.php and add the following line before "That's all, stop editing! Happy blogging".

define('SCRIPT_DEBUG', true);

Check to see if you are still having an issue.

  • Issue is fixed - turn off script debugging and report the issue on the support forum, telling the volunteers the you turned on script debugging and it solved the problem.
  • Issue persists - proceed to Step 3.

Step 3: Diagnosis

Now that you know which browsers you are experiencing issues in you can start to diagnose the issue.

Firefox

1. Open the Console

Go to the screen where you are experiencing the error. In Firefox, navigate to Tools > Web Developer > Error Console

2. Identify the Error

The error console will open. If you don't see any errors try reloading the page. The error may be generated when the page loads.

The console will provide you with the error type, the location of the error and the line number

Image:error_console.jpg

The image above shows the error to be in jquery.js on line 2.

Internet Explorer

Bear in mind, IE behaves vastly differently from other browsers when it comes to JS errors, and reports on them in disparate ways. The first thing to check when facing a problem in IE is if the problem only exists in IE. Also note that the debugging tools built into some IE versions are limited, and may not be available.

1. Open the Console

Go to the screen where you are experiencing the error. In Internet Explorer, navigate to Settings > F12 Developer Tools. Or click F12

Click on the Console tab.

Image:ie_console1.jpg

2. Identify the Error

The error console will open. If you don't see any errors try reloading the page. The error may be generated when the page loads.

The console will provide you with the error type, the location of the error and the line number

Image:ie_console2.jpg

The image above shows the error to be in jquery.js on line 2.

Chrome

1. Open the Console

Go to the screen where you are experiencing the error. In Chrome, navigate to View > Developer > JavaScript Console.

2. Identify the Error

The error console will open. If you don't see any errors try reloading the page. The error may be generated when the page loads.

The console will provide you with the error type, the location of the error and the line number

Image:chrome_console.jpg

The image above shows the error to be in jquery.js on line 2.

Safari

1. Enable Developer Tools

Navigate to Safari > Preferences > Advanced and check the box that says Show Develop menu in menu bar

Image:debug_safari.jpg

2. Open the Console

Go to the screen where you are experiencing the error. In Safari, navigate to Develop > Show Error Console

3. Identify the Error

The error console will open. If you don't see any errors try reloading the page.

The console show you the error, the error location and the line number:

Image:debug_safari4.jpg

The image above shows the error to be in jquery.js on line 2.

Note: If you cannot see the error click the back button within the console.

Image:debug_safari3.jpg

Opera

1. Open the Console

Go to the screen where you are experiencing the error. In Chrome, navigate to Tools > Advanced > Error Console.

2. Identify the Error

The error console will open. Select JavaScript and Errors from the two drop downs. To find the error location, expand one of the errors. You'll see the error and the location.

Image:opera_console.jpg

The image above shows the error to be in jquery.js on line 2, however remember to copy the whole stack information! Just saying what line is less helpful that showing context.

Step 4: Reporting

Now that you have diagnosed your error, you should make your support forum request. Go to the troubleshooting forum. If your problem is with a specific theme or plugin, you can access their dedicated support forum by visiting http://wordpress.org/extend/plugins/PLUGINNAME/support or http://wordpress.org/extend/themes/THEMENAME/support

Please include the below information:

  • the browsers that you are experiencing the problem in
  • whether SCRIPT_DEBUG fixed the error or not
  • the JavaScript error
  • the location of the error - both the file name and the line number
  • the context of the error - including the whole error stack will help developers