...

Web Technologies - JAVASCRIPT

Back to Course

Lesson Description


Lession - #239 Javascript Debugging


JavaScript Debugging

Debugging Code

Syntax and logical errors can occur in programming code. Many of these mistakes are difficult to identify.
When programming code contains errors, nothing happens most of the time. There are no error messages, and there are no hints as to where to look for them.
Code debugging is the process of looking for (and fixing>
mistakes in programming code.

Debuggers for JavaScript

Debugging is a difficult task. Fortunately, every modern browser includes a JavaScript debugger. Built-in debuggers can be turned on and off, requiring the user to report errors.
You may also use a debugger to establish breakpoints (points where code execution can be halted>
and inspect variables while the code is running.

Normally, you activate debugging by following the instructions at the bottom of this page; otherwise, follow the steps at the bottom of this page.

Normally, you activate debugging in your browser with the F12 key and pick "Console" from the debugger menu, unless you follow the steps at the bottom of this page.

JavaScript Debugging Example

We'll use the built-in web browser debugger to discover issues here. Any of the following ways can be used to accomplish debugging:

  • The console.log(>
    method is used.
  • Using the keyword debugger.


  • The console.log(>
    method is used.

    The outcome of the console.log(>
    method is displayed in the browser's console. It generates an error message if there is a problem in the code.
    Let's have a look at a simple example of printing the output to the console.

    <script>  
    x = 20;  
    y = 15;  
    z = x + y;  
    console.log(z>
    ; console.log(a>
    ;//a is not intialized </script>


    Output:
    Sorry cannot be displayed
    Try it here


    Using the keyword debugger

    Breakpoints are commonly used in debugging to analyse each line of code one by one. In JavaScript, there is no need to conduct this action manually.
    The debugger keyword in JavaScript allows you to set a breakpoint directly in the code. The debugger halts the program's execution at the point where it is applied. We can now manually begin the execution flow. If an exception occurs, the execution will come to a complete stop on that line.

    <script>  
    x = 10;  
    y = 15;  
    z = x + y;  
    debugger;  
    document.write(z>
    ; document.write(a>
    ; </script>



    Output:
    Sorry cannot be displayed
    Try it here