#ENABLE JAVA SCRIPT DEBUGGER CODE#

Step-out: When inside a function, if we click on the step-out button, the control skips the rest of the function and jumps to the line where the function was called.Д«ased on the assumption of the location of the bug, we can set a breakpoint closer to that part of the code rather than just putting on an event.

If there are any lines present after the function definition, the control directly skips to that line of code.

Step-over: When we click on the step-over button, the code inside the onClick() function is skipped and the execution stops as there are no more lines of code after the function definition.

Step-into: When we click on the step-into button, the code inside the onClick()В function will get executed line by line with each step-into click.

In the Sources panel of the Developer Tool, we can find the buttons for step into, step out, and step over. We can do three different types of steps while going through a code. Stepping through the code helps us to execute the code line by line and we can check the order in which the code is executing. Since itвЂ™s an event based breakpoint, DevTools pauses on the line which contains that eventвЂ™s handler.

When we click on Add button, the code execution is paused and the line with onClick function is highlighted. This implies that whenever a click event happens, the code execution pauses at that moment.Expand the Mouse checkbox and select the click checkbox.We can find different events listed in the section like Keyboard, Device, Mouse, etc. Go to Sources tab and expand Event Listener Breakpoints section.Or we can right-click and select Inspect (Ctrl+Shift+I). Click F12 to open Developer Tools in Chrome.We can then check what values are stored in any variable at that point of time. We will now fix this bug.Д«reakpoints can be used when we want to pause the execution of code at any certain line of code. We can see that the application doesnвЂ™t do what is intended. Now type in two numbers in the text fields and click on the Add button. Run the above code and you should able to see a page with two text fields and a button. Label.textContent = num1 + ' + ' + num2 + ' = ' + sum Var button = document.querySelector('button') Д«utton.addEventListener('click', onClick) Sample.js var input = document.querySelectorAll('input') Let us look at some simple JS code with a bug and try to fix that using Dev Tools. We will now see how one can debug JS code in one of the most popular modern web browsers, Chrome using its DevTools. Every JS developer will know how important F12 is while working on a JS application. Every modern web browser now comes with a feature to debug the code easily using Developer Tools. When it comes to effective programming, every developer faces a common objective of writing bug-free code. With the number of frameworks that are built using JavaScript increasing rapidly, web developers can utilize many features offered by them effectively. JavaScript is undoubtedly one of the most popular web programming languages.

Enable java script debugger