JS调试技巧大杀器

发布日期：2016-05-26 14:32:25

现代javascript有很多方法，这里列出一些常用方法：

方法一： 通过console.log（）来打印调试信息。

（需要浏览器支持，不过大部分浏览器都支持。）

SMART.utils.LOG = new SmartUtils.Class();
SMART.utils.LOG.extend({
	DEBUG:0,
	INFO:1,
	ERROR:2,
	_level:2,
	_status:0,
	
	init: function(){
		this._level = this.ERROR;
		this._status = 0;
	},
	
	setLogLevel: function(level){
		this._level = level;
	},
	
	debug: function(msg){
		if(this.isEnabled() && this._level <= this.DEBUG){
			console.log(msg);
		}
	},
	
	info:function(msg){
		if(this.isEnabled() && this._level <= this.INFO){
			console.log(msg);
		}
	},
	
	error:function(msg){
		if(this.isEnabled() && this._level <= this.ERROR){
			console.log(msg);
		}
	},
	
	isEnabled: function(){
		return this._status;
	},
	
	enableLog: function(){
		this._status = 1;
	},
	
	disableLog: function(){
		this._status = 0;
	}
});

var AppLog = new SMART.utils.LOG();
AppLog.enableLog();

AppLog.debug("Debug Info here............");

方法二：通过关键字debugger来设置断点。

var x = 15 * 5;
debugger;
document.getElementbyId("test").innerHTML = x;

方法三：通过浏览器提供的调试窗口设置断点。

方法四：设置DOM断点来监听DOM结构的变化，包括子树的修改，节点的移除，属性的修改

方法五：针对Ajax请求的调试（Source->XHR Breakpoints -> Add breakpoint )

JS调试技巧大杀器

发表评论