JS调试日志输出和异常处理

来源：互联网发布：尔雅网络课程朱恒源编辑：程序博客网时间：2024/05/21 08:48

一、直接启用浏览器调试功能

Chrome浏览器中：

1.按下F12打开调试界面。

2.选择source选项卡，选中script文件打开。

3.单击行增删断点，F10单步调试，F11进入函数，F8下一个断点, 鼠标移动到变量上可以查看该变量的值。

4. 右边窗口的callStack可以看到调用栈；watch Expressions可以添加监视值，scope Variables可以看到当前区域变量的值等。

5.F12关闭调试功能。

二、输出Log，使用console.log，对于比较复杂的逻辑很有效

实例函数，逻辑中输出：

</script>

对JS错误输出Log:

onerror = handleErr; // 错误的调试

function handleErr(msg,url,l)
{
txt="本页中存在错误。\n\n"
txt+="错误：" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行：" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
console.log(“Error msg:%s", txt);
return true

}

</script>

三、try catch预防错误，否则错误发生后面的语句没有得到执行。

1.直接用catch(error)中的error字符串信息。

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
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>

2.try中thow字符串，catch(error)中的得到throw的字符串。
<script>
function myFunction()
{
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)
{
var y=document.getElementById("mess");
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>

0 0