![]() # Step 3: Pause the code with a breakpointĪ common method for debugging a problem like this is to insert a lot of console.log() statements into the code, in order to inspect values as the script executes. If your DevTools window is wide, this pane is displayed to the right of the Code Editor pane. Various tools for inspecting the page's JavaScript. After selecting a file in the File Navigator pane, the contents of that file are displayed here. Every file that the page requests is listed here. Open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). The Sources panel is where you debug JavaScript. # Step 2: Get familiar with the Sources panel UIĭevTools provides a lot of different tools for different tasks, such as changing CSS, profiling page load performance, and monitoring network requests. In this example, the result of 5 + 1 is 51. To open the debugging section of CDT, select View > Developer > JavaScript Console, and then go to the Sources tab. The label below the button says 5 + 1 = 51. ![]() The debugging process may be a bit different but the concept behind debugging is the same.Finding a series of actions that consistently reproduces a bug is always the first step to debugging. However, it's not your only option.Īll good IDEs provide a way for you to debug the code. You can pass the value you want to check into the console.log() method and verify if the data is correct. In the above methods, we have used the Chrome browser to show the debugging processes for simplicity. You can use the console.log() method to debug the code. Here, you just set breakpoints by clicking on the line number of the source code instead of manually calling the debugger function. Setting breakpoints is similar to putting a debugger in the code. You can set breakpoints through the Developers tool anywhere in the code. Let's see an example by setting a breakpoint in the Chrome browser. Then, you can resume the execution of code. JavaScript will stop executing at each breakpoint and lets you examine the values. The debugger tool freezes execution of our code so that we can run our own experiments in the scope that the code is frozen in. You can set breakpoints for JavaScript code in the debugger window. The rest of the code will execute when you resume the script by pressing play in the console. You can then resume the flow control after examining the program. The above program pauses the execution of the program in the line containing the debugger. Let's see how you can use debugger in a Chrome browser. The debugger is available in almost all JavaScript engines. The debugger keyword stops the execution of the code and calls the debugging function. ![]() It's also available in other JavaScript engines. The console.log() is not specific to browsers. Working of console.log() method in browser Using console.log() method in the browser opens the value in the debugger window. However, you can also use this method for debugging. In the previous tutorial, we used console.log() method to print the output. You could pass the object in console.log() or simply a message string. The syntax is: console.log(object/message) You can use the console.log() method to debug the code. ![]() There are different ways you can debug your JavaScript program. It is essential that you know how to debug your code and fix errors.ĭebugging is the process of examining the program, finding the error and fixing it. In fact, most of the time, they help us identify issues with our code. You can and will encounter errors while writing programs.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |