新手要掌握的JavaScript的6种调试方式汇总

console.dir() 在控制面板打印数组

1、alert() 弹窗
2、document.write() 打印,致命的问题是代码执行完毕后,会覆盖页面的内容(等同于PHP中的echo)
3、console.log() 在控制台输出内容(在Chrome浏览器中调试)。(不能解析HTML内容)
4、console.dir() 打印数组。(等同于PHP中的print_r)
5、document.title() 在网页的title标签中输出内容。
6、debugger 断点。在调试工具中,点一步执行一步。

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
// 1 弹窗
var num = 1;
num++;
alert(num);

// 2 输出内容
document.write(num);

// 3 在控制面板输出内容
var str = 'i love <br>javascript.'	//原样输出
var str = 'i love \njavascript.'	//换行输出
console.log(str);

// 4 在控制面板打印数组
var list = ['zhangsan', 'Guang Zhou', '1990.12.10'];
console.dir(list);

// 5 在网页标题输出
// document.title='JS的5种调试方式';
document.onmousemove = function(e){
	document.title = 'X: ' + e.clientX + ' Y: ' + e.clientY;
}
/*鼠标属性,事件*/

// 6 debugger
debugger;
</script>