Il debugger of Chrome is a tool integrated into the web browser that allows developers to examine, monitor and fix the JavaScript code present within a page, fixing any errors or altering its behavior. It is a tool that is an integral part of Developer tools of the Google browser, accessible in Chrome, Chromium and derived navigation programs simply by pressing the button F12.
To most, it may seem like a hostile environment. Actually the sidebar that appears when you press F12presents itself as an exceptional tool for understanding what happens “behind the scenes” on any web page. By right-clicking on any object that makes up the page and then choosing Inspect From the context menu, you can edit the web page and locate the codice HTML which precisely describes “the look” of each element.
Debugger: to edit JavaScript code and change the behavior of any web application
Web pages are increasingly rich in codice JavaScript, essential for their functioning. Using the debugger, you can change the behavior of online applications and detect any anomalous behavior.
Especially if you use a framework JavaScript such as React, Angular or similar, it may happen that when the web application loads a completely blank page is shown. This is a clear indication of a problem in the JavaScript code that needs corrective action.
By pressing the button F12then by clicking on the red “X” that appears at the top right, you have the possibility to examine any JavaScript errors returned by the web browser when interpreting the code. The problems are “rattled out” in the sheet Console of the Developer tools.
By clicking on the reference provided by the browser in the Consoleyou can immediately jump to the portion of JavaScript code that highlights problems.
What are breakpoints and what are they for?
And breakpoint is a point in the source code where execution temporarily stops, allowing developers to examine the state of the program at that specific point. The browser debugger allows you to set breakpointsessential for detailed code analysis and error resolution.
To set a breakpoint in Chrome, simply click on the tab Sources contained in Developer toolslocate the file JavaScript of your interest then click on the line number corresponding to the point at which you want to stop the execution of the application.
It is important to note that in the left column of the tab Sourcesi. appear files that make up the application Web being used.
We suggest opening the Web application, launching it from your browser and then clicking on Pause script execution in the tab Sources.
With a click on the web page, the small box appears Paused in debuggerconfirming that thecode execution JavaScript is temporarily suspended.
In the box inside the tab Sources, the cursor highlights the point in the execution of the JavaScript code at which the application is currently stopped. This is a good trick to immediately recognize the JavaScript file name which governs its functioning. The arrow Step over next function call it allows to stop the execution of the script JavaScript to the next function it calls.
Define a breakpoint
To establish a breakpoint in the JavaScript code, as we saw previously, simply click on the number of the line corresponding to the point at which you want execution to be suspended. By right-clicking on the line number, you can activate a conditional breakpoint: will come into operation if and only if the expression is true. It is a feature that proves to be very useful when there is a need block execution of JavaScript code only for certain values of a variable.
After setting a breakpoint, you can reload the web page or application you are investigating (F5 su Windows; Cmd+R on macOS): The execution flow will automatically block as soon as the browser encounters the breakpoint.
By pressing the key combination CTRL+F in the box containing the JavaScript code, however, it is always possible search for strings of characters and specific code in order to facilitate identification of the portion of the program that interests you.
In the example in the figure, we have set a breakpoint on the line this.gameOver() in the Chrome Dino game integrated into the Google browser and can be called up simply by typing chrome://dino in the address bar. As you can see, when the dinosaur hits an obstacle, the execution of the application stops on the previously identified line without still displaying “Game over“. And this is precisely because of the presence of the breakpoint (the function gameOver() not yet performed).
Watched expressions
The Watched expressions I am variables which the developer indicates he wants to monitor carefully during the execution of the JavaScript code. To specify the variables to monitor, just click on the tab Watch then on the small “+” button so as to observe them and check their value every time the program reaches a breakpoint.
By setting a breakpoint, however, and then leaving the mouse pointer anywhere in the code where there is a reference to a variable, it is possible to read the corresponding value in real time. The mouse pointer must be left motionless for a few seconds in order to see the information you are interested in appear.
Call stack
Il Call Stack (or call stack) is an essential component for tracing the execution of functions when debugging JavaScript code. It is also common to other programming languages: show the list of functions currently running and the associated context.
When the debugger stops on a breakpoint, the Call Stack reveals the list of functions that led to that point. This is valuable information that helps you understand the execution flow of the program.
By clicking on one of the call stack items, the debugger jumps to the corresponding code, offering the opportunity to investigate further.
Scope tool
The instrument Scopeaccessible in the Chrome debugger using the tab of the same name, allows you to examine the variables in different contexts during code execution. There are various types of scope, such as local scope (function variables), closure scope (closure) and the global scope. It is very useful for finding out how variables change during program execution.
Lo global scope provides guidance on variables declared outside of any function, accessible anywhere in the code. The closing scopehowever, occurs when a function is declared inside another function (internal function, closure). The internal function has access to the external function’s variables, even after the external function has completed execution.
DOM breakpoint
I DOM (Document Object Model) breakpoints are tools that can be used to intercept and pause the execution of JavaScript code when specific changes to the content and structure of the Web page are detected. The DOM, in fact, is a hierarchical representation of the HTML page that allows developers to dynamically manipulate the structure.
During the debug a page Web, you can set DOM breakpoints to intercept the execution of JavaScript code that causes a specific change to the page structure.
The section DOM Breakpoints in the left column of Developer tools, allows you to activate specific breakpoints. By right-clicking on a HTML element that makes up the web page (in the box Source which shows the HTML source of the web page), you can select Break on so as to apply a DOM breakpoint on that object.
- Subtree Modifications (Changes on the tree). Stops execution of JavaScript code when changes are detected on a node or its descendants in the DOM tree. Fires when nodes are added or removed within an element.
- Attributes Modifications (Attribute changes). Detect changes to attributes of a DOM node. The…