![js script debugger js script debugger](https://www.c-sharpcorner.com/article/debugging-javascript-and-typescript-using-google-chrome-in-visual-studio-2017/Images/image002.png)
We can patch over the symptom and pretend like the bug doesn’t exist, but this just leads to messy code and tons of special-case fixes for things nobody really understands. Sure, we could add a fix, but errors are often only a symptom of a bug, and not the actual bug. The approach an experienced developer takes to fix bugs is to find their root cause. We need to identify the root cause of the problem before we fix it. A beginner would fix this bug with an if-statement that checks the type and calls it a day, but we want to be professionals. One of the secrets to writing robust code is to understand why something happens. However, we don’t want to do that just yet. We’ve identified the problem, and we could fix it by checking the variable type. If we look for the value of urls by hovering the cursor over it, we can see it’s a string "foobar" – which is clearly not an array, and therefore it doesn’t have a forEach function in it. Since the error points out that forEach is not a function, it must mean urls is an incorrect value. On the highlighted line, we can see the code is trying to call forEach. In this case, we’ve got a TypeError: urls.forEach is not a function. The first step in finding the problem is looking at the error message. In this panel, variables are grouped by their scope – for example, any local variables defined within the function where we are will be in “Locals”, if we are inside a closure, a grouping for variables from the closure is inclued, and finally any global variables are grouped under their respective section. We can also find more variable information on the right, under “Scope”. This is especially useful for objects which may contain many properties. We can also further inspect any variables by hovering the cursor over their names. We can see the error message either by hovering the cursor over the icon, or by looking on the right where it says “Paused on exception”. The red icon on the line indicates an exception was thrown. The line highlighted in blue is where the code is paused. In the code view, Chrome gives us readouts on variable values. We can find the script debugger from the Sources tab of the developer tools. To get started, we can open up the Developer Tools either through the menu, by right clicking the page and choosing “Inspect Element”, or by pressing F12 (or Cmd+Opt+i if you’re on a Mac).
JS SCRIPT DEBUGGER HOW TO
In this article, I’ll show you how to make use of Chrome’s JavaScript debugger to help you fix errors faster and more easily. It’s like giving a surgeon a machete instead of a scalpel – not accurate and a bad tool for the job.īut just like surgeons have scalpels, we have better tools available for us too: Namely, debuggers. If you’ve tried doing that, you know that it’s not a very good approach.
![js script debugger js script debugger](https://2sxc.org/portals/0/adam/blog%20app/cso75fnxrecbf2c70ox9hq/image/banner.png)
Just sprinkle them in my code, and hope that they give me enough information to fix the problem. In the past, I would use console.log or alert. No matter how hard I try, there’s always something that needs debugging. Let’s face it: As developers, much of our time is spent fixing problems.