`

写了一个打印信息的函数比Alert强大,类似Firebug中的console.table

阅读更多

有时候,特别是在Ajax请求返回数据时我们需要知道返回数据的结构,如果是Object,使用Alert是打印不出来的,使用Firebug中的 console 可以查看,我自己写了一个函数,有点像这个,有时候觉得使用console还不够直观,所以自己想办法写一个,不过现在支持的层级就三层,多了就不行了,多了就出现object。

 

if(!window.debug){
	window.debug = {};//选择一个自己的命名,千万别跟别人的冲突
};
debug.info = function(obj){
	if (typeof _deBugStatus_ !== "undefined") {
		return;
	};
	var version = "1.0",str = "",type,oLen = 0,ml=0,subStr = "",oimStr = "",aArr = "";

	var st=document.createElement("style");
	st.innerHTML = '' +
				   '.layer{font-family:Arial; font-size:14px; color:#333; line-height:150%; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; left:0; top:0; z-index:9999}' +
				   '.debug-box{width:900px; position:relative; left:50%; top:50%; margin-left:-450px; margin-top:-250px; background:white; box-shadow:0 0 50px rgba(0,0,0,0.5);}' +
				   '.debug-title{line-height:35px; padding: 0 10px; border-bottom:1px solid #AE0; background:#DED}' +
				   '.debug-names{width:20%; float:left; display:inline-block; *display:inline; *zoom:1; color:green; text-indent:5px}' +
				   '.debug-values{width:70%; float:right; color:orange}' +
				   '.debug-close{line-height:35px; position:absolute; right:0; top:0; color:#666; padding:0 10px; cursor:pointer}' +
				   '.uls{padding:0; margin:30px}' +
				   '.debug-clear{clear:both; line-height:0; height:0;}' +
				   '.debug-line{width:5%; float:left; color:blue}' +
				   '.debug-cs{overflow-y:auto; height:500px; padding-bottom:10px}' +
				   '#debugLayer li{border-bottom:1px solid #EEE;list-style:none; line-height:30px;}' +
				   '#debugLayer li:hover{background:#EDF4ED}' +
				   '.debug-obj-info{color:#666;}' +
				   '.debug-obj{font-weight:bold; color:green; margin:10px}';



	var h = document.getElementsByTagName("head")[0];
	h.appendChild(st);

	if (typeof obj === "string") {
		str = obj;
		type = "String";
	} else if (typeof obj === "object") {
		if (obj instanceof Array) {
			for (var i = 0, len = obj.length; i < len; i++) {
				str += '<li><div class="debug-names">'+ i +'</div><div class="debug-line">=></div><div class="debug-values">' + obj[i] + '</div><div class="debug-clear"></div></li>';
			}
			type = "Array";
			oLen = len;
		} else {
			for (var i in obj) {
				if (typeof obj[i] == "object") {
					if (obj[i]instanceof Array) {
						for (var m = 0; m < obj[i].length; m++) {
							if (typeof obj[i] == "object") {
								if (obj[i]instanceof Array) {
									var _a = "";
									for (var k = 0; k < obj[i].length; k++) {
										_a += '<div class="debug-names">' + k + '</div><div class="debug-line">=></div><div class="debug-values">' + obj[i][k] + '</div><div class="debug-clear"></div>';
									}
									aArr += '<div class="debug-names">' + m + '</div><div class="debug-line">=></div><div class="debug-values">' + _a + '</div><div class="debug-clear"></div>';
								} else {
									var _b = "";
									for (var n in obj[i]) {
										_b += '<div class="debug-names">' + n + '</div><div class="debug-line">=></div><div class="debug-values">' + obj[i][n] + '</div><div class="debug-clear"></div>';
									}
									aArr += '<div class="debug-names">' + m + '</div><div class="debug-line">=></div><div class="debug-values">' + _b + '</div>';
								}
							} else {
								aArr += '<div class="debug-names">' + m + '</div><div class="debug-line">=></div><div class="debug-values">' + obj[i][m] + '</div><div class="debug-clear"></div>';
							}
						}
						subStr += aArr;
						str += '<li><div class="debug-names">' + i + '</div><div class="debug-line">=></div><div class="debug-values">' + subStr + '</div><div class="debug-clear"></div></li>';
					} else {
						for (var m in obj[i]) {
							if (typeof obj[i][m] == "object") {
								if (obj[i][m]instanceof Array) {
									for (var j = 0; j < obj[i][m].length; j++) {
										oimStr += '<div class="debug-names">' + j + '</div>' + '<div class="debug-line">=></div>' + '<div class="debug-values">' + obj[i][m][j] + '</div><div class="debug-clear"></div>';
									}
									subStr = oimStr;
								} else {
									for (var j in obj[i][m]) {
										oimStr += '<div class="debug-names">' + j + '</div>' + '<div class="debug-line">=></div>' + '<div class="debug-values">' + obj[i][m][j] + '</div><div class="debug-clear"></div>';
									}
									subStr = oimStr;
								}
							} else {
								subStr += '<div class="debug-names">' + m + '</div>' + '<div class="debug-line">=></div>' + '<div class="debug-values">' + obj[i][m] + '</div><div class="debug-clear"></div>';
							}
						}
						str += '<li><div class="debug-names">' + i + '</div><div class="debug-line">=></div><div class="debug-values">' + subStr + '</div><div class="debug-clear"></div></li>';
					}
				} else {
					str += '<li><div class="debug-names">' + i + '</div><div class="debug-line">=></div><div class="debug-values">' + obj[i] + '</div><div class="debug-clear"></div></li>';
				}
				ml++;
			}
			type = "Object";
			oLen = ml;
		}
	} else if (obj instanceof Function) {
		str = obj;
		type = "Function";
	}
	result = '<ul class="uls"><li class="debug-obj-info">This is a <span class="debug-obj">'+type+'</span>info  lenght:'+oLen+'</li>' + str + '</ul>';
	var layer = document.createElement("div");
	var box = document.createElement("div");
	var title = document.createElement("div");
	var content = document.createElement("div");
	layer.setAttribute("class","layer");
	layer.setAttribute("id", "debugLayer");
	box.setAttribute("class","debug-box");
	box.setAttribute("id", "debugBox");
	title.setAttribute("id", "debugTitle");
	title.setAttribute("class","debug-title");
	layer.appendChild(box);
	content.setAttribute("id", "debugContent");
	content.setAttribute("class","debug-cs");
	box.appendChild(title);
	box.appendChild(content);
	title.innerHTML = 'Debug Tools ' + version + '<span id="deBugClose" class="debug-close" title="Close Debug">close</span>';
	content.innerHTML = result;
	document.body.appendChild(layer);
	document.getElementById("deBugClose").onclick = function () {
		document.body.removeChild(layer);
	}
	layer.onclick = function(e){
		if(document.all){
			window.event.cancelBubble = true;
		}else{
			e.stopPropagation();
		}
	}
	
	return _deBugStatus_ = 0;
}

 在body里面添加一个层,然后把信息输出来,很直观,个人觉得也很方便,自己经常使用。

 

//测试一下效果
debug.info(navigator);

//嘿嘿,是不是很酷
分享到:
评论

相关推荐

    Firebug_Console命令行全集.pdf

    Console是Firebug中的一个功能强大的调试面板,允许开发者在浏览器控制台查看信息、执行JavaScript语句和命令,以及监控和分析页面中发生的各种事件和错误。Console命令行作为Console面板的核心组成部分,提供了一...

    firebug-lite.js firebug-lite.min.js下载

    Firebug Lite是一款强大的JavaScript调试工具,它为那些不支持或无法安装完整Firebug浏览器扩展的浏览器(如旧版IE)提供了类似的功能。虽然现在Firebug已经不再更新,被Firefox的内置开发者工具所取代,但Firebug ...

    firebug-lite.rar

    7. **命令行**:Firebug Lite包含一个JavaScript命令行,允许开发者运行单行JS代码,进行即时测试和调试。 8. **兼容性**:由于其跨浏览器的特性,Firebug Lite使得开发者可以在不支持原生Firebug的浏览器(如IE)...

    firebug-1.8.3.xpi

    回到我们的主题"firebug-1.8.3.xpi",这是一个扩展文件,用于将Firebug安装到Firefox浏览器中。".xpi"是“eXtension Package Installer”的缩写,是Firefox扩展的标准格式。用户只需下载这个文件,然后通过Firefox的...

    console控制台.docx

    控制台(Console)是 Firebug 的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。 一、显示信息的命令 Firebug 内置一个 console 对象,提供 5 种方法,用来显示信息。最简单的方法是 ...

    firebug-1.8.4.xpi

    firebug-1.8.4.xpi firebug-1.8.4.xpi firebug-1.8.4.xpi firebug-1.8.4.xpi

    firebug-1.6.0.zip

    标题"firebug-1.6.0.zip"表明我们正在讨论的是Firebug的一个特定版本——1.6.0,这个版本已经被打包成ZIP文件供下载和安装。 描述中提到,Firebug是用于调试火狐浏览器中的错误的插件,这暗示了它的主要功能集中在...

    firebug-1.9.0.xpi

    firebug-1.9.0.xpi .

    firebug.2.0.17.tar.gz

    firebug.2.0.17.tar.gz是firefox调试插件,用于调试web的脚本

    firebug-1.5X.4.rar

    标题中的"firebug-1.5X.4.rar"表明这是一个针对Firebug 1.5X.4版本的压缩包文件,通常包含了该版本的安装或更新所需的所有组件。 描述中提到的"firebug-1.5X.4.rarfirebug-1.5X.4.rar"可能是重复的信息,但核心信息...

    JavaScript中的console.trace()函数介绍

    总之,console.trace()是一个功能强大的JavaScript控制台工具,它能为开发者提供函数调用栈的详细信息,帮助开发者更好地理解程序的运行情况,并加速问题的定位和解决。在任何需要深入理解程序执行流程的场景下,...

    firebug-1.9.2.rar

    这个"firebug-1.9.2.rar"文件很显然是Firebug的1.9.2版本,它以RAR压缩格式存储,其中包含的核心文件是"firebug-1.9.2.xpi",这是一个Firefox扩展文件。 Firebug的发展历程: Firebug起源于2005年,由Joe Marini...

    firebug-1.12.0.xpi

    firebug-1.12.0.xpi 最新的firebug火狐插件

    初识Firebug全文--Firebug的使用.mht

    初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用...

    firebug1.3x.3和1.4.0

    首先,Firebug 1.3x.3是该插件的一个早期版本,它在2009年左右发布。这个版本引入了多项关键功能,包括对CSS的增强编辑能力,允许开发者实时修改页面样式并查看效果。此外,1.3x系列还支持JavaScript的断点调试,使...

    firebug-1.8.3.zip

    3. JavaScript调试:提供了一个强大的JavaScript控制台,包括断点、步进执行、查看变量值等功能,方便开发者调试代码。 4. 网络监控:追踪HTTP/HTTPS请求,分析加载时间,帮助优化页面性能。 5. DOM检查:实时查看...

    FireBug 控制台函数

    在FireBug中,控制台(Console)功能为网页提供了一个专门的日志记录环境,开发者可以通过一系列控制台函数来输出和管理日志信息。这些函数不仅可以帮助开发者记录程序运行时的状态,还能根据不同的日志级别进行筛选和...

    JavaScript调试技巧之console.log()详解

    为了避免这种情况,可以预先检查`window.console`是否存在,若不存在则创建一个空的`console`对象,确保`console.log()`在这些浏览器中不执行任何操作: ```javascript if (!window.console) { window.console = {...

    firebug-2.0.19.xpi

    firebug-2.0.19.xpi firebug快速定位元素,旧版本下载

Global site tag (gtag.js) - Google Analytics