Error script error see javascript console for details

Skip to main content

This browser is no longer supported.

Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

Fix JavaScript errors that are reported in the Console

• Article
• 05/27/2022
• 6 minutes to read

In this article

This article walks you through six demo pages to demonstrate resolving JavaScript errors that are reported in the Console.

Fix JavaScript errors

The first experience you have with the Console is likely to be errors in scripts.

Demo page: JavaScript error reported in the Console tool

1. Open the demo webpage JavaScript error reported in the Console tool in a new window or tab.

2. Right-click anywhere in the webpage and then select Inspect. Or, press F12. DevTools opens next to the webpage.

   In the top right of DevTools, the Open Console to view errors button displays an error about the webpage.

3. Click the Open Console to view errors button on the top right. In DevTools, the Console gives you more information about the error:

   Many error messages in the Console have a Search for this message on the Web button, shown as a magnifying glass. This feature was introduced in Microsoft Edge version 94. [For more information, see Search the web for a Console error message string.]

   The information in this error message suggests that the error is on line 16 of the error.html file.

4. Click the error.html:16 link on the right of the error message in the Console. The Sources tool opens and highlights the line of code with the error:

   The script tries to get the first h2 element in the document and paint a red border around it. But no h2 element exists, so the script fails.

Find and debug network issues

The Console also reports network errors.

Demo page: Network error reported in Console

1. Open the demo webpage Network error reported in Console in a new window or tab.

2. Right-click anywhere in the webpage and then select Inspect. Or, press F12. DevTools opens next to the webpage.

   The table displays loading, but nothing changes on the webpage, because the data is never retrieved. In the Console, the following two errors occurred:

   • A network error that starts with GET HTTP method followed by a URI.

   • An Uncaught [in promise] TypeError: data.forEach is not a function error.

3. Click the link to the webpage and line of code where the error occurs, to open the Sources tool. That is, click the network-error.html:40 link in the Console:

   The Sources tool opens. The problematic line of code is highlighted and followed by an error [x] button.

4. Click the error [x] button. The message Failed to load resource: the server responded with a status of 404 [] appears.

   This error informs you that the requested URL isn't found.

5. Open the Network tool, as follows: open the Console, and then click the URI that's associated with the error.

   The Console displays an HTTP status code of the error after a resource isn't loaded:

   The Network tool displays more information about the failed request:

6. Inspect the headers in the Network tool to get more insight:

   What was the problem? Two slash characters [//] occur in the requested URI after the word repos.

7. Open the Sources tool and inspect line 26. A trailing slash character [/] occurs at the end of the base URI. The Sources tool displays the line of code with the error:

Viewing the resulting page when there are no errors in the Console

Next, we'll look at the resulting page when there are no errors in the Console.

Demo page: Fixed network error reported in Console

1. Open the demo webpage Fixed network error reported in Console in a new window or tab.

   The example without any errors loads information from GitHub and displays it:

Demo page: Network error reporting in Console and UI

Use defensive coding techniques to avoid the previous user experiences. Make sure your code catches errors and displays each error in the Console, as follows:

1. Open the demo webpage Network error reporting in Console and UI in a new window or tab.

2. Right-click anywhere in the webpage and then select Inspect. Or, press F12. DevTools opens next to the webpage.

   The example webpage demonstrates these practices:

   • Provide a UI to the user to indicate that something went wrong.

   • In the Console, provide helpful information about the Network error from your code.

   The example catches and reports errors:

   The following code in the demo catches and reports errors using the handleErrors method, specifically the throw Error line:

   const handleErrors = [response] => {
      if [!response.ok] {
         let message = 'Could not load the information'
         document.querySelector['tbody'].innerHTML = `
         Error ${message}
         `;
         throw Error[response.status + ' ' + response.statusText];
      }
      return response;
   };
   

Create errors and traces in the Console

Besides the throw Error example in the previous section, you can also create different errors and trace problems in the Console.

Demo page: Creating error reports and assertions in Console

To display two created error messages in the Console:

1. Open the demo page Creating error reports and assertions in Console in a new window or tab.

2. Right-click anywhere in the webpage and then select Inspect. Or, press F12. DevTools opens next to the webpage.

   Error messages appear in the Console:

   The demo page uses the following code:

   function first[name] { second[name]; }
   function second[name] { third[name]; }
   function third[name] {
       if [!name] {
           console.error[`Name isn't defined :[`]
       } else {
           console.assert[
               name.length