#JS SCRIPT DEBUGGER CODE#
#JS SCRIPT DEBUGGER WINDOWS#

By clicking the list, all previous functioned can be accessed. Call Stack shows us the parent elements of the current function that is being inspected. The root cause of the error can be searched by inspecting the Call Stack tab. But as an experienced front-end developer, you need to detect the root cause of the problem before fixing it. The bug can be fixed by using an if statement and checking the variable type. For example, if forEach function is used and the url has an incorrect value we will get error message like “forEach is not a function”. In case of small errors, the error message gives us clear idea on what is causing the exception. For example, all local variables are arranged under the “local” section. In the scope tab, variables are ordered by scope. Under the scope tab we can also find more information on variables.

Hovering the mouse on the variables allow further inspection. We can see the error message by either hovering on the icon or by looking at the error message on the console.

#JS SCRIPT DEBUGGER CODE#

In the code view, wherever the exception is thrown, there is a red icon at the end of that line. Everything the script has access to is visible to the developer. This is one of the biggest benefit of using the debugger. With the execution paused, we can now observe the code and find out what is wrong. However, the feature is available in Firefox and Chrome and not in IE. If the library handles the exception, code execution will not be paused in that case. By enabling it, the browser stops code execution whenever an exception is caught. If you are using Chrome, the first thing to do is enable the “Pause on exceptions” icon. Let’s think about a typical scenario where your JS code is throwing an exception. Instead of using alert popups, a developer can easily inspect the code by just using breakpoints on the script debugger. The script debugger can be located under the Sources tab. If you are using Mac, Developer tools can be accessed in browser by pressing Cmd+Opt+i.

#JS SCRIPT DEBUGGER WINDOWS#

In almost all major browsers that are based on Windows platform, developer tool can be accessed by pressing F12, or Ctrl+Shift+i, or by right clicking on an element and navigating to Inspect Element. In this article, we will find out how fast debugging can be done to find out JavaScript errors using developer console.

However, with latest updates in browsers, almost all major browsers now have inbuilt developer tools. And in cases of a large application it was more like asking a sculptor to carve out a large stone statue using a pen knife. Sprinkling them in every line of the code eventually helped the developer to find out where the error actually is. In earlier times, errors were inspected using console.log or alert (). Last month while we were researching about cross browser compatibility issues in JavaScript, we found with an overwhelming consensus, that no matter how perfect the code is, JavaScript errors will always be there. A front-end developer spends quite a bit of his time in fixing script errors.

Js script debugger