JavaScript 调试 登录

JavaScript 调试

JavaScript 调试

没有调试工具是很难去编写 JavaScript 程序的。

你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。

通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置。

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难,但幸运的是,很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭,严重的错误信息会发送给用户。

有了调试工具,我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。

对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用;而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑

什么是console.log()?

除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能;即使没有调试功能,也可以通过安装插件来进行补充。比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能。在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台。通过调用该console对象的log()函数,可以在控制台中打印信息。比如,以下代码将在控制台中打印”Sample log”:

 代码如下:window.console.log("Sample log");

上述代码可以忽略window对象而直接简写为:

 代码如下:console.log("Sample log");

console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似,console.log()也可以接受换行符n以及制表符t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。不同的浏览器中console.log()行为可能会有所不同。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
  <script type="text/javascript">
    //变量 
    var i = 'I am a string'; 
    console.log('变量:',i); 
    //数组 
    var arr = [1,2,3,4,5]; 
    console.log('数组:',arr); 
    //对象 
    var obj1 = { 
    key1 : 'value1', 
    key2 : 'value2', 
    key3 : 'value3' 
    }; 
    var obj2 = { 
    key6 : 'value4', 
    key5 : 'value5', 
    key4 : 'value6' 
    }; 
    var obj3 = { 
    key9 : 'value7', 
    key8 : 'value8', 
    key7 : 'value9' 
    }; 
    console.log('对象:',obj1); 
    //对象数组 
    var objArr1 = [obj1,obj2,obj3]; 
    var objArr2 = [[obj1],[obj2],[obj3]]; 
    console.log('对象数组1:',objArr1); 
    console.log('对象数组1:',objArr2); 
  </script>
</head>
<body>
  <p>
  浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
  </p>
</body>
</html>

debugger 关键字

debugger 关键字用于停止执行 JavaScript,并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用,debugger 语句将无法工作。

开启 debugger ,代码在第三行前停止执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<p id="demo"></p>
<script>
var x = 5 * 5 + 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

主要浏览器的调试工具

通常,浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。

各浏览器的步骤如下:

Chrome 浏览器

打开浏览器。在菜单中选择工具。在工具中选择开发者工具。最后,选择 Console。

Firefox 浏览器

打开浏览器。访问页面: 
http://www.getfirebug.com。按照说明 :
安装 Firebug。

Internet Explorer 浏览器。

打开浏览器。在菜单中选择工具。在工具中选择开发者工具。最后,选择 Console。

Opera

打开浏览器。Opera 的内置调试工具为 Dragonfly,详细说明可访问页面:
http://www.opera.com/dragonfly/。

Safari

打开浏览器。右击鼠标,选择检查元素。在底部弹出的窗口中选择"控制台"。


下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> //变量 var i = 'I am a string'; console.log('变量:',i); //数组 var arr = [1,2,3,4,5]; console.log('数组:',arr); //对象 var obj1 = { key1 : 'value1', key2 : 'value2', key3 : 'value3' }; var obj2 = { key6 : 'value4', key5 : 'value5', key4 : 'value6' }; var obj3 = { key9 : 'value7', key8 : 'value8', key7 : 'value9' }; console.log('对象:',obj1); //对象数组 var objArr1 = [obj1,obj2,obj3]; var objArr2 = [[obj1],[obj2],[obj3]]; console.log('对象数组1:',objArr1); console.log('对象数组1:',objArr2); </script> </head> <body> <p> 浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。 </p> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送