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.
0 kommentar(er)
