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. –

My official WebSite >