JavaScript Debugging Techniques

2691 VIEWS

·

Debugging is a must-have skill for every developer. It is a problem-solving skill, whereby existing bugs are identified and resolved to enhance efficient running of codes or programs. JavaScript has different debugging techniques and tools to increase your code’s efficiency.

However, before we go into debugging techniques and the various debugging tools, let’s understand what bugs are. 

Bugs

Bugs are errors in a computer program that makes it behave in an unexpected way or give an unexpected result. This mostly happens when some subset of a system’s requirement is being violated. Every computer program is subject to a set of requirements, failure to reach the requirements leads to an unexpected result. It also happens when there is a breach in a program’s language, this could be a syntactic error or a logical error.

 For example, when writing JavaScript language, an opening curly bracket must have a closing curly bracket to indicate the end section of a code. Failure to do so will cause a syntax error and the output of the program will be affected. Here is the demonstrated example. This program is giving out an error message in the console because the closing curly bracket was omitted.

function books() {
console.log("Here are the books");
 
books();

Looking at these below, you will notice that the error message is no longer on the console because this has been fixed. The required code has been placed in the proper position, so we have the expected output printed on the console.

function books() {
console.log("Here are the books");
}
books();

Debugging

This is the process of finding bugs and resolving the bugs present in a computer program. It is the act of figuring out the reason behind a program’s failure and fixing the problem responsible for the program’s failure to enhance efficient running of the program.

Sometimes, a program well written which lacks syntactic and logical errors could give an unexpected result. This may not be as a result of the lines of code written but the way dependencies, configuration, or settings are improperly arranged. Debugging skills are needed to identify and solve such problems. Other problems could be syntactic error, logical error, and failure to reach the system’s requirements.

Here is a quick example. The codes below are well-written and have no errors. Unfortunately, it did not give out the required result. This is because we did not properly link the file for the JavaScript code to the file needed to get the result on the browser.

function output() {
console.log("oops...there will be no output");
}
output();

Below is the HTML file we have not yet linked to the JavaScript file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
 
    <script src =""></script>
</body>
</html>

Linking it properly will give us the expected output.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
 
    <script src ="debug.js"></script>
</body>
</html>

The Javascript has been linked to the html file, so the expected output will be printed out in the console.

function output() {
console.log("THE BUG HAS BEEN FOUND AND FIXED!");
}
output();

As a developer, debugging is inevitable. It can be tiresome, stressful and time consuming, especially when trying to debug a large chunk of code for probably a software or an application without having any knowledge on debugging techniques or tools to use.

Debugging Process

  1. Pause and observe for incorrect output while coding at different intervals to check for little errors. This helps to minimize the amount of time spent to go through a large chunk of code.
  2. When faced with an unexpected output, try to understand the problem, the cause of the error and the surrounding codes that could be the cause of the error.
  3. Locate the problem. It is easier to locate an error in a well written code, so you should employ good development practices. The console and some IDE like visual studio code help to figure where the errors are located most times.
  4. After being able to locate the error, classify the error. This helps us to understand the problem and its relationship with the rest of the codes and also helps to determine the repair strategy we need to use.
  5. Work on it. Make use of available resources when confused. Try to avoid disrupting other lines of codes.

Debugging Challenges    

  1.   Report of the problem from the console might be inadequate and misleading. 
  2.   Fixing one bug could introduce new bugs.
  3.   The process of solving one error could grow into multiple errors.

JavaScript Debugging Techniques and Tools

  1. Breakpoints: Marking some lines of code at different points of the program can create breakpoints. When the program reaches the marked point during execution, it pauses. This helps the developer to check for any available error and sort it out. You can mark the breakpoints in your JavaScript code from the console. Simply go to the chrome developer tools, get the source file and click on the particular line number you want to mark.
  2. Using the Debugger Keyword: You can also use the JavaScript debugger keyword. This places a halt in execution where you place the debugging keyword. Here is an example:
function doSomething() {
console.log("Halt!");
debugger;
console.log('continue')
}
doSomething();

Read more about the debugger keyword here

  1. Backtracking: Backtracking uses different solutions until you find the right solution to the error. It is effective for debugging. In backtracking, you apply possible solutions to solve the problem in the JavaScript program. If it doesn’t work you retreat and select another move. You should continue this until you successfully remove the error and obtain the expected output.
  2. Strict Mode: Using the strict mode in JavaScript makes it easier to write a proper, well-developed JavaScript program. The strict mode disallows some operations in JavaScript, which helps to reduce bugs and keep the codes clean. You can activate the strict mode with the “use strict” statement. Read more about the strict mode here

If you want to learn more about working with JavaScript, take a look at this article on building an FAQ page with JavaScript and HTML.


Faith Njah is a front-end developer, with experience in building dynamic websites using web technologies like HTML, CSS, JavaScript, and A-frame VR. She is also passionate about learning.


Discussion

Click on a tab to select how you'd like to leave your comment

Leave a Comment

Your email address will not be published.

Menu
Skip to toolbar