![]() We will see that in the latter part of the article. You can also set up multiple line-of-code breakpoints and investigate. Even if you just start from somewhere, based on a guess, it will lead to the bug eventually. Tips: Use this when you do not know the exact region of the code to investigate. Here we have set a breakpoint at line number 6. Click on the line number column to set a breakpoint on a line.Go to the line of the code in the Code Editor section on the right.Browse the source file from the File navigation section.As we start debugging our application, we will learn how to set them… To start debugging, the first thing to do is to set breakpoints.īreakpoints are the logical point you want the code execution to pause so that you can debug it.ĭevTools allows you to set breakpoints in many different ways. If your DevTools window is wide or undocked in a separate window, the debugger section will be displayed to the right of the Code Editor pane. Debugger Section: You will find lots of tools available here to set breakpoints, inspect variable values, watch for changes, etc.Code Editor Section: When you select a file from the navigator pane, the content of the file will be listed here.File Navigator Section: All the files that our Greet Me page requests are listed here.The Sources panel has three primary sections. Click the Sources tab to navigate to the Sources panel. You can open DevTools by pressing the F12 key or using a shortcut: either Control+Shift+I (Windows, Linux) or Command+Option+I (Mac). But the one we’re interested in right now is the Sources panel, which helps us in debugging JavaScript. You can also clone the app code from GitHub and run it locally.ĭevTools provides a lot of different tools to perform debugging tasks, including DOM inspection, profiling, and network call inspection. If you want to try out the tips provided below, you can find the Greet Me app at. Thankfully, Chrome DevTools will enable us to identify the issue. The greeting message doesn’t print the wish part correctly. This JavaScript app asks for your name and invites you to submit a ‘wish’, which will be used to deliver your own personalized greeting.įigure 1: The Greet Me app showing an errorīut wait, there’s a problem here. So once we’ve learned how to use the debugging tool for one browser, it’s easy to use for another. One of the great things about using DevTools is that other browser vendors (like Firefox and Microsoft) provide their own tools to debug a JavaScript application, and they work in a similar way. So in this article, we will learn how to use Google Chrome developer tools (also known as DevTools) to debug any JavaScript application effortlessly. JavaScript has the famous console.log() method for that.īut while log statements are good, they are less efficient than a tool that enables you to carry out step-by-step debugging. As developers, we’ve traditionally rooted out errors in our programs (we’ll call them bugs from now on if that’s ok) by using meaningful log statements.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |