#Java script debugger download code#

Provide a UI to the user to indicate that something went wrong. The example webpage demonstrates these practices:

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

#Java script debugger download code#

Make sure your code catches errors and displays each error in the Console, as follows: Use defensive coding techniques to avoid the previous user experiences. The example without any errors loads information from GitHub and displays it:ĭemo page: Network error reporting in Console and UI Open the demo webpage Fixed network error reported in Console in a new window or tab. Demo page: Fixed network error reported in Console Next, we'll look at the resulting page when there are no errors in the Console. Viewing the resulting page when there are no errors in the Console The Sources tool displays the line of code with the error: A trailing slash character ( /) occurs at the end of the base URI. Open the Sources tool and inspect line 26. What was the problem? Two slash characters ( //) occur in the requested URI after the word repos. Inspect the headers in the Network tool to get more insight: The Network tool displays more information about the failed request: The Console displays an HTTP status code of the error after a resource isn't loaded: Open the Network tool, as follows: open the Console, and then click the URI that's associated with the error. This error informs you that the requested URL isn't found.

The message Failed to load resource: the server responded with a status of 404 () appears. The problematic line of code is highlighted and followed by an error ( x) button.Ĭlick the error ( x) button. That is, click the network-error.html:40 link in the Console: In the Console, the following two errors occurred:Ī network error that starts with GET HTTP method followed by a URI.Īn Uncaught (in promise) TypeError: data.forEach is not a function error.Ĭlick the link to the webpage and line of code where the error occurs, to open the Sources tool. The table displays loading, but nothing changes on the webpage, because the data is never retrieved. Open the demo webpage Network error reported in Console in a new window or tab. Demo page: Network error reported in Console But no h2 element exists, so the script fails. The script tries to get the first h2 element in the document and paint a red border around it. The Sources tool opens and highlights the line of code with the error: The information in this error message suggests that the error is on line 16 of the error.html file.Ĭlick the error.html:16 link on the right of the error message in the Console. (For more information, see Search the web for a Console error message string.) This feature was introduced in Microsoft Edge version 94. Many error messages in the Console have a Search for this message on the Web button, shown as a magnifying glass. In DevTools, the Console gives you more information about the error: In the top right of DevTools, the Open Console to view errors button displays an error about the webpage.Ĭlick the Open Console to view errors button on the top right. Right-click anywhere in the webpage and then select Inspect. Open the demo webpage JavaScript error reported in the Console tool in a new window or tab. Demo page: JavaScript error reported in the Console tool

The first experience you have with the Console is likely to be errors in scripts. This article walks you through six demo pages to demonstrate resolving JavaScript errors that are reported in the Console.