You are reading the article Learn How To Debug All Types Of Javascript updated in September 2023 on the website Saigonspaclinic.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Learn How To Debug All Types Of Javascript
Introduction to JavaScript DebuggerJavascript debugger is used to find out coding errors in the program. While we are writing some new programming code, there may be a chance to encounter some errors. These errors may be syntactical or logical. It is very difficult to find out where the error is all the time because if I have 10 thousand lines of code, is it easy to analyze that where the error occurs manually? No right. In this kind of situation, we have a feature called debugging in any programming language.
Start Your Free Software Development Course
Web development, programming languages, Software testing & others
How does Debugger Work in JavaScript?In JavaScript debugging can be achieved in 2 ways:
1. By Using the Debugger Keyword
This debugger keyword is used in browsers like Chrome, Firefox, Internet Explorer, etc.
Wherever we predict errors occur, there put a debugger.
While executing the code, instead of executing the entire code, the compiler pauses the execution at the debugger.
With this, we can step by step analyze where the error occurs exactly.
Syntax:
var a=10; debugger; for(let i=0;i<=10;i++) { }Debugger mode looks like below:
When we used the debugger keyword in our code, if we press the F12 button and Run the code, we will get debugger mode as above. The first blue color button is used to Resume (come out of the debug) the code.
The second black color button is used to move step by step line execution of code.
2. By Using Breakpoints
These breakpoints are used in IDE’s instead of using the debugger keyword.
Wherever we predict errors occurs there put breakpoint.
While executing the code, instead of executing the entire code, the compiler pauses the execution at the debugger.
With this, we can step by step analyze where the error occurs exactly.
In Eclipse IDE breakpoints look like below:
You can see 1 and 3 lines have breakpoints with circles.
Examples of JavaScript DebuggerThe topic is about debugger so we will look into examples with debugger keyword:
Example #1 – Palindrome with Debugger KeywordCode:
function palindromeOrNot() { var remainder,total=0,actualNumber; var input=77877; actualNumber=input; { debugger; remainder=input%10; total=(total*10)+remainder; input=parseInt(input/10); } if(actualNumber===total){ document.write(actualNumber+”: is palindrome number “); } else { document.write(actualNumber+”: is not palindrome”); } } palindromeOrNot();
Output paused at debugger:
Explanation:
When we press F12 and run the code then code moved to debugger mode as above.
If no errors encountered, then code automatically comes out of the debug mode prints the output.
Example #2 – Factors with Debugger KeywordCode:
function factors() { var input=arguments[0],j=1; document.write(“factors of : “+input+” are “); while(j<=input) { debugger; if(input%j==0){ debugger; document.write(j); } j++;//post increment operator } } factors(10);
Output paused at debugger:
Final Output:
Explanation:
When we press F12 and run the code then code moved to debugger mode as above.
As you can see in the above code, we can use more than one debugger keywords in a single program.
If no errors encountered, then code automatically comes out of the debug mode prints the output.
Example #3 – Try, Catch and Finally with Debugger KeywordCode:
function doTryCatchFinally() { try { debugger; var p=Date.parsing(“January 1,2023”); } catch(error) { } finally { document.write(“I can kill or close connection even any errors thrown in the code”); } } doTryCatchFinally();
Output paused at debugger:
Final Output:
Explanation:
When we press F12 and run the code then code moved to debugger mode as above.
Here we encounter an error that is there is no predefined method name parsing().
Example #4 – Perfect Number with Debugger KeywordCode:
function perfectNumber(input=28) { var i=1,sum=0; { debugger; if(input%i==0){ sum=sum+i; } i++; } if(sum==input) { document.write(input+” is perfect number”); } else { document.write(input+” is not perfect number”); } } perfectNumber();
Output paused at debugger:
Final Output:
Explanation:
When we press F12 and run the code then code moved to debugger mode as above.
If no errors are encountered, then code automatically comes out of the debug mode prints the output.
Recommended ArticlesThis is a guide to JavaScript Debugger. Here we discuss the introduction and how does debugger work in javascript along with the examples and code implementation. You may also look at the following articles to learn more –
You're reading Learn How To Debug All Types Of Javascript
Update the detailed information about Learn How To Debug All Types Of Javascript on the Saigonspaclinic.com website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!