JavaScript debug errors: try-catch-throw
When an error occurs, when something goes wrong, the JavaScript engine will normally stop, and generate an error message. The technical term for this is: JavaScript will throw an error.
Also, to debug your code you can use Chrome Browser:
1) You can Open the webpage with Google Chrome
2) From the Top Right “Menu Icon”>”Develop”>”Develop Tools”
3) From the Bottom Right click the icon “Show Console”
4) In the console you can choose at the Top html | head | script | text
Select | script | to show javascript script only
5) In the console you can choose at the Bottom | All | Errors | Warnings | Logs | Debug |
Select | All | to show all messages
6) In the console prompt wrire the variable name (Example: >x) and press in the Keyboard Enter
7) The console shows you the value of variable x now.
The function – consol.log() – generates console messages to debug the code:
<html> <head> </head> <body> <SCRIPT LANGUAGE="JavaScript"> var person = { firstName :"Penelope", lastName :"Barrymore", // Since the "this" keyword is used inside the showFullName method below, and the showFullName method is defined on the person object, // "this" will have the value of the person object because the person object will invoke showFullName () showFullName:function () { console.log (this.firstName + " " + this.lastName); } } person.showFullName (); // Penelope Barrymore </script> </body> </html>
In the console window you will see:
> Penelope Barrymore
Example of debug code:
<!DOCTYPE html> <html> <head> <script> var txt=""; function message() { try { aaalert("Welcome guest!"); // syntax error } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>
try Statement checks the code inside curly brackets:
try { aaalert("Welcome guest!"); // syntax error! }
catch Statement print the error message:
catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); }
Notice:
err.message
throw (gettare) statement creates a custom error (throw an exception)
<!DOCTYPE html> <html> <body> <script> function myFunction() { var y=document.getElementById("mess"); y.innerHTML=""; try { var x=document.getElementById("demo").value; if(x=="") throw "empty"; if(isNaN(x)) throw "not a number"; if(x>10) throw "too high"; if(x<5) throw "too low"; } catch(err) { y.innerHTML="Error: " + err + "."; } } </script> <h1>My First JavaScript</h1> <p>Please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">Test Input</button> <p id="mess"></p> </body> </html>
Notice:
if(x=="") throw "empty"; if(isNaN(x)) throw "not a number"; if(x>10) throw "too high"; if(x<5) throw "too low";
If you input is a letter the error message will be – Error: not a number. –