JavaScript Debugging

Debugging is the process of examining code during execution, such as checking values. During development of code debugging can be used to ensure that code is running as expected and that the expected values are present. Within JavaScript there two main ways to debug, the developer console or by using the ‘debugger’ keyword.

The developer console is used to log out debug statements and other information of a webpage. This is often used during development to test certain functionality and results. Normal web users will not see information in the developer console, but anyone can open the developer console. Due to anyone being able to open the developer console no sensitive information, such as password or API keys, should be logged to the console when a website is live on the internet.

Within most browsers you can open the developer console by pressing the F12 key and clicking on the ‘console’ tab. You can also open it via the menu system of the browser, it may not be called developer console but ‘developer tools’ or something similar. The ‘console.log’ function in JavaScript will print values to the console, as shown in the code sample below.

console.log("Hello World");

The ‘debugger’ keyword in JAvaScript can be used to halt the execution of code within a browser. The debugger keyword will only work when debug mode is enabled, when the F12 menu is open. If debug mode is not enabled the debugger keyword will be ignored and the code will not be halted. Using the debugger keyword, and halting the execution of code, can allow you to step through code and inspect how variable and values change and get manipulated.

var n = (25 * 5) / 5;
console.log("Value: " + n);

Leave a Reply