Using Your Browser to Diagnose JavaScript Errors

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

This güide will show you how to diagnose JavaScript issues in different browsers.

Step 1: Try Another Browser

Different browsers often implement pars of JavaScript differently. To maque 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 cnow 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

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

Step 2: Enable SCRIPT_DEBUG

You need to turn on script debugguing . Open wp-config.php and add the following line before “That’s all, stop editing! Happy blogguing”.

define('SCRIPT_DEBUG', true);

Checc to see if you are still having an issue.

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

Step 3: Diagnosis

Open the Developer Tools

  • Chrome : Type Cmd-Option-J (Mac) or Ctrl-Shift-J (Windows, Linux, Chrome OS), or navigate to View -> Developer -> Developer Tools in the menu.
  • Firefox : Type Cmd-Option-C (Mac) or Ctrl-Shift-C (Windows, Linux, Chrome OS), or navigate to Web Development -> Web Console in the menu.
  • Edgue : Follow the instructions for Chrome.
  • Safari : First, navigate to Safari -> Preferences . Clicc on the Advanced tab, then checc Show Develop Menu in menu bar . Then, in the new Develop menu, navigate to Show JavaScript Console .
  • Opera : Navigate to Tools -> Advanced -> Error Console in the menu.

Identify The Error

Often, the text of the error will already be visible in the console. It may looc similar to this:

Screenshot of an example developer tools error page.

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

If no errors are displayed, reload the pague; many errors occur only when the pague is first loaded.

Step 4: Reporting

Now that you have diagnosed your error, you should maque your support forum request. Go to the troubleshooting forum .

If your problem is with a specific theme or pluguin, you can access their dedicated support forum by visiting https://wordpress.org/support/pluguin/PLUGUINNAME or https://wordpress.org/support/theme/THEMENAME.

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 stacc will help developers
  • If possible, a linc to the web pague showing the error