Debug errors reported in Console

The first experience you have with the Console is probably an error in a script. To try it, navigate to JavaScript error reported in the Console tool.

If you open DevTools in the browser, a button on the top right displays an error for the webpage.
Choose the button to take you to the Console and give you more information about the error.

DevTools gives detailed information about the error in the Console

From the information, you may gather that the error is on line 16 of the error.html file. If you choose the error.html:16 link on the right of the Console, it takes you to the Sources tool and highlights the line of code with the error.

The Sources tool highlights the line of code that causes 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

Other errors that the Console reports are network errors. To display it in action, navigate to the Network error reported in Console.

Console displays a Network and a JavaScript error

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.

If you choose the network-error.html:40 link in the Console, DevTools takes you to the Sources tool. The problematic line of code is highlighted and followed by an error (x) button. To display the Failed to load resource: the server responded with a status of 404 () error message, choose the error (x) button.

In the example, the error informs you that the requested URL isn't found. Next, complete the following actions to open the Network tool.

  1. Open the Console.
  2. Choose the URI associated with the error.

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

What was the problem? Two slash characters (//) occur in the requested URI after the word repos. 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

To review no errors in the Console, navigate to Fixed network error reported in Console.

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

Ensure you provide defensive coding techniques to avoid the previous user experiences. Also, ensure your code catches errors and display each in the Console. Navigate to Network error reporting in Console and UI and review the following items.

  • Provide UI to the user that something went wrong.
  • In the Console, provide helpful information about the Network error from your code.

An example that catches and reports errors

The following code snippet 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 = `
        <tr><td colspan=3>Error ${message}</td></tr>
        `;
        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 may also create different errors and trace problems in the Console.
To display two created error messages in the Console, navigate to Creating error reports and assertions in Console.

Error messages created from Console

The following code snippet was used in the previous example.

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 <= 8, 
            `"${name} is not less than eight letters"`
        );
    }
}
first();
first('Console');
first('Microsoft Edge Canary');

You have three functions that request each other in succession.

  • first()
  • second()
  • third()

Each sends a name argument to the other. In the third() function, you check if the name argument exists and if it doesn't, you log an error that name isn't defined. If name is defined, you use the assert() method to check if the name argument is fewer than eight letters long. You request the first() function three times, with the following parameters.

  • No argument that triggers the console.error() method in the third() function.
  • The term Console as a parameter to the first() function doesn't cause an error because name argument exists and is shorter than eight letters.
  • The phrase Microsoft Edge Canary as a parameter to first() function causes the console.assert() method to report an error, because the parameter is longer than eight letters.

Use the console.assert() method to create conditional error reports. The following two examples have the same result, but one needs an extra if{} statement.

let x = 20;
if (x < 40) { console.error(`${x} is too small`) };
console.assert(x >= 40, `${x} is too small`) 

Important

The second and third lines of the code perform the same test. Because the assertion needs to record a negative result, you test for x < 40 in the if case and x >= 40 for the assertion.

If you aren't sure which function requests another function, use the console.trace() method to track which functions are requested to get to the current one. To display the trace in the Console, navigate to Creating traces in Console.

function here() {there()}
function there() {everywhere()}
function everywhere() {
    console.trace();
}
here();
there();

The result is a trace to display that here() is named there() and then everywhere() and in the second example that it's named everywhere().

A trace created from Console

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools