IntroductionAs developers, we’ve traditionally rooted out errors in our programs (we’ll call them Show
But while log statements are good, they are less efficient than a tool that enables you to carry out step-by-step debugging. So in this article, we will learn how to use Google Chrome developer tools (also known as One of the great things about using DevTools is that browser vendors (like Firefox and Microsoft) provide their own tools to debug a JavaScript application, and they work in a similar way. So once we’ve learned how to use the debugging tool for one browser, it’s easy to use for another. What are we debugging today?Take a look at the Greet Me app. This JavaScript app asks for your name and invites you to submit a ‘wish’, which will be used to deliver your own personalized greeting. Figure 1: The Greet Me app showing an errorBut wait, there’s a problem here. The greeting message doesn’t print the wish part correctly. It inserts a rogue word, If you want to try out the tips provided below, you can find the Greet Me app at https://greet-me-debugging.vercel.app/. You can also clone the app code from GitHub and run it locally. Know about the Sources panel
You can open DevTools by pressing the The
Figure 4: DevTool window is wide open Set up breakpointsTo start debugging, the first thing to do is to set
Set breakpoints at the line of codeTo set a line-of-code breakpoint:
Here we have set a breakpoint at the line number 6. The code execution will be paused here. Tips: Use this when you do not know the exact region of the code to investigate. Even if you just start from somewhere, based on a guess, it will lead to the bug eventually. You can also set up multiple Set a conditional breakpointTo set a conditional breakpoint:
The code execution will be paused whenever the function Tips: Use the conditional breakpoint when you know the specific region of code to investigate. As you may be aware of the region of the code, you can inspect further using conditions to find the root cause of the problem. Set breakpoint on event listenersTo set a breakpoint on event listeners:
Tips: Use this when you want to pause the event listener code that runs after an event is fired. Set breakpoint at the DOM node
To set breakpoints on DOM change:
As you see in the above figure, we are setting a breakpoint on the DOM change of the output DIV with a condition of Tips: Use this when you suspect a DOM change is causing the bug. The related JavaScript code execution will be paused automatically when it breaks on the DOM change. Step through the Source CodeNow we know all the important methods to set breakpoints. In a complex debugging situation you may have to use a combination of them. Let us see how to step through the breakpoints to figure out an issue. The debugger section provides five controls to step through the code. Figure 9: Step through controlsStep(Key shortcut – F9)This option enables you to step through line by line as the JavaScript code executes. If there is a function call on the way, the step-through also gets inside the function, executes it line by line, and then steps out of it. Figure 9a: Performing step line-by-lineStep Over (Key shortcut – F10)This option allows you to execute a function without stepping into it. Occasionally, you may be certain that some functions are working properly and not want to spend time inspecting them. In this situation, you should use the In the example below, we are stepping over the Step Into (Key shortcut – F11)Use this option to investigate a function in greater depth. When stepping through, you may have the feeling that a function is behaving unexpectedly and want to inspect it. Use In the example below, we are stepping into the function Step Out(Key shortcut – Shift + F11)While stepping through a function, you may not want to continue and come out of it. Use this option to step out of a function. In the example below, we are stepping inside the Resume/Jump (Key shortcut – F8)At times, you may want to jump from one breakpoint to another without debugging any code in between. Use this option to jump to the next breakpoint. Figure 9e: Resume or Jump to the next breakpointInspect Scope, Call Stack and ValuesWhen you step through the lines to debug, you can inspect the scope and the value of the variables and the call stack of the function calls. ScopeYou can use this to find out what is in the global scope and what its variables are, using
the Call StackThe call stack panel helps to identify the function execution stack. Figure 10b: Call stackValuesInspecting values is the primary way to identify a bug in the code. When stepping through, you can inspect a value simply by doing a mouseover on a variable. In the example below, we are selecting the variable Additionally, you can select a section of the code as an expression to check the value of it. In the
example below, we have selected an expression Let’s WatchThe You can combine any variables from the code region and form a valid JavaScript expression. At the time of stepping through, you will be able to see the value of the expression. Here are the steps required to add a Watch:
Another way to watch for an expression is from the Disable & Remove BreakpointsTo disable all the breakpoints at once, click on the Please note, the above method doesn’t remove the breakpoints. It just deactivates them for the duration you require. To activate the breakpoints, please click on the same button again. You can remove one or more breakpoints from the Finally, The FixWith all that we have learned so far, what do you think
is the fix to make the In case not, it’s just that extra
How would we find that in a realistic debugging scenario? Have a look at this short video demo(without audio), JS Debugging: Greet Me app Fix You can also play around with the fixed version from here. Debug JavaScript with Visual Studio CodeWhat’s your favorite code editor? Personally, I like Visual Studio code because of its simplicity. We can enable a similar kind of debugging environment using VS Code with just a few simple steps. VS Code setup for debuggingVS Code has several extensions (like plug-ins) for enabling various features and capabilities. To enable JavaScript debugging, you need to install an
extension called
After installation, click on the A file called
You may want to change the following parameters:
The last step is to start the debugging by clicking the small play icon at the top-left corner. Figure 13c: Start debuggingUnderstanding debugger panelsVS Code provides similar tools to
A quick demoHere is a quick demo(1 minute) to showcase the VS Code debugging control usages.
SummaryTo Summarize,
That’s all for now. Thank you very much for reading through, hope you find this article useful. Happy debugging! Please feel free to connect with the author on Twitter(@tapasadhikary). JS Debugging: Setting up VS Code for debugging How do I inspect JavaScript in Chrome?The Sources panel is where you debug JavaScript. Open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). This shortcut opens the Console panel. Click the Sources tab.
Where can I find JavaScript inspect?Open Chrome and navigate to the web page containing the JavaScript you want to view. Right-click an empty area on the web page and select Inspect in the pop-up menu to open the Chrome developer tools.
What is the best way to debug JavaScript?The best JavaScript debugging tools for 2021 and beyond. Developer tools in modern web browsers. Every modern browser has tools available within it to debug code. ... . The hackable debug tool — debugger. ... . Node. ... . Postman for debugging requests and responses. ... . ESLint. ... . JS Bin. ... . JSON Formatter and Validator. ... . Webpack.. How do you inspect the script of a website?To view only the source code, press Ctrl + U on your computer's keyboard. Right-click a blank part of the web page and select View source from the pop-up menu that appears.
|