js代码调试

js代码如果语法没有错误，有时候它并不会在控制台下面出现错误信息。那怎么知道一个方法正确被调用或者是一个值正确被赋值呢？

alert()弹框调试

js代码

<script type="text/javascript">
	
	function test() {
		alert(123);  //弹出一个警告框，如果弹出了，说明方法被执行了
		var a = 10;
		var b = 20;
		var c = a + b;
	}
</script>

alert()结果

上面的代码中test()函数很明显的没有被调用，所以alert(123)也不可能被弹出
。
如果在代码里面调用一下test()方法

test();  //调用test方法

alert被正确弹出，说明test方法确实被调用了！

console.log()输出调试

js代码

	<script type="text/javascript">
		test();
		function test() {
			var a = 10;
			var b = 20;
			var c = a + b;
			console.log(c);  //如果c被定义，他会正常输出
			console.log(d);  //d没有被定义，他会输出错误原因
		}
	</script>

控制台结果

debugger调试

debugger调试，是在js代码中需要停止运行的位置打上“debugger”就可以开始调试。
js代码

<script type="text/javascript">
	
	test();
	
	function test() {
		var a = 10;
		var b = 20;
		var c = a + b;
		
		debugger  //断点位置
		/**
		 * a,b,c明显的被定义了，所以可以正常打印
		 * d,没有被定义，它输出一条错误结果
		 */
		console.log(a);
		console.log(b);
		console.log(c);
		console.log(d);
	}
</script>

开始调试，在打上debugger的位置停下

逐步放过，正确的语代码，正常输出

错误的代码，报错，告诉我这里可以修改了！！！

控制台断点调试

js代码，不在代码里面设置断点到控制台下打断点！

<script type="text/javascript">
	
	test();
	
	function test() {
		var a = 10;
		var b = 20;
		var c = a + b;
		/**
		 * a,b,c明显的被定义了，所以可以正常打印
		 * d,没有被定义，它输出一条错误结果
		 */
		console.log(a);
		console.log(b);
		console.log(c);
		console.log(d);
	}
</script>

控制台下打断点

单步执行，调试代码

O ! 打开控制台的方式是F12