- 浏览: 147456 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
陈颜宇:
prompt在哪啊,只看到了confirm 和 alert
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动 -
陈小妞:
alert(el.getAttribute("cla ...
Javascript兼容性之——getAttribute(),setAttribute()(获取设置属性) -
I白I:
厉害。。。
HTML5实现全屏API【进入和退出全屏】 -
joyven:
...
Javascript兼容性之——getAttribute(),setAttribute()(获取设置属性) -
小林夕:
看看一个用canvas到极致的案例 ProcessOn
HTML5 Canvas实战——HTML5 Canvas时间效果
有时候,特别是在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); //嘿嘿,是不是很酷
发表评论
-
一款小巧精美的浏览器必备工具(支持Chrome,Edge)
昨天 17一键清洁大师:专业的浏览器数据清理工具;超美动画,炫酷特效, ... -
Backbone1.0.0数据验证的变化
2014-07-10 09:48 6690.5.3版本对Model数据验证时,绑定Error就可以了 ... -
使用Sass预定义一些常用的样式,非常方便
2014-06-04 11:04 1248各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体 ... -
使用Sass预定义一些常用的样式,非常方便
2014-06-04 11:03 1223CSS预处理技术现在已经非常成熟,比较流行的有Less,Sa ... -
去掉IE10+input 文本后面“删除图标”与密码文本框后面“查看密码图标”
2014-05-04 15:38 1242在最新的IE浏览器(IE10+)上使用表单时,文本框内 ... -
HTML5实现全屏API【进入和退出全屏】
2014-05-04 11:21 4123现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样 ... -
CSS实现箭头效果
2013-09-23 15:26 1752有时候网页中使用箭头以增强效果,一般的做法是使用图片,今天我 ... -
IE6透明PNG解决方案
2013-09-17 19:31 1889IE6不支持PNG-24图片一直困扰很多人,但是可以通过I ... -
清除HTML之间的空白节点
2013-09-01 16:57 5595HTML之间的空白节点,会影响HTML排版,清除空白节点除了 ... -
attachEvent 中this指向
2013-09-01 16:45 1394IE中使用的事件绑定函数与Web标准的不同,而且this指向 ... -
十六制作颜色转RGB格式
2013-09-01 16:15 1223十六制作颜色转RGB格式: function toR ... -
kingwell Calendar V1.0 日历时间组件
2013-08-07 09:10 1241项目中经常要使用日历时间插件,网上也有很多很优秀的插件,但是 ... -
HTML5获取地理位置信息并在Google Maps上显示
2013-08-07 09:08 1005使用HTML5 navigator geol ... -
HTML5 Canvas实战——HTML5 Canvas时间效果
2013-08-07 09:04 1416HTML5 Canvas实战 function cl ... -
JS window.name跨域封装
2013-08-07 09:02 1843function CrossDomainName(targe ... -
前端开发工程师如何在2013年里提升自己【转】
2013-07-10 10:33 776大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是 ... -
动态加载javascript增强版
2013-04-21 10:25 1527我们经常使用动态加 ... -
jQuery性能优化的28个建议 (转)
2013-04-20 12:08 802我一直在寻找有关jQuery ... -
封装JSONP
2013-04-01 13:06 4928我们经常遇到JS 跨域的问题,跨域的解决方案有很多,JSO ... -
HTML5 Web Storage
2013-03-21 11:56 1920体验了一下HTML5 在HTML5中,除了Canvas元素 ...
相关推荐
firebug-lite.js firebug-lite.min.js下载
前端开发神奇firebug使用文档,console的各种用法大全
firebug-1.8.4.xpi firebug-1.8.4.xpi firebug-1.8.4.xpi firebug-1.8.4.xpi
firebug-1.9.0.xpi .
firebug.2.0.17.tar.gz是firefox调试插件,用于调试web的脚本
火狐网页调试必备, 火狐firebug-1.8.3.xpi.
firebug-lite 可在IE等浏览器中使用 firebug-lite 可在IE等浏览器中使用 firebug-lite 可在IE等浏览器中使用 firebug-lite 可在IE等浏览器中使用
firebug-1.12.0.xpi 最新的firebug火狐插件
初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用...
Packtpub.Firebug.1.5.Editing.Debugging.and.Monitoring.Web.Pages.Apr.2010.rar
firebug-2.0.19.xpi firebug快速定位元素,旧版本下载
Monitor, edit, and remove cookies from Firebug. Approach Get to grips with a new technology, understand what it is and what it can do for you, and then get to work with the most important features ...
firebug1.3x.3和firebug1.3x.3
而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑。 什么是console.log()? 除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能;即使没有调试功能,也可以通过安装插件来进行补充。比如,...
一个Firefox的插件,对于web开发者来说相当的不错。 可以查看JS错误,web在内存中的DOM结构, 查看请求的参数及响应结果等。。。 我是这样安装这个插件的,打开Firefox,然后直接把插件拖进去,这样会弹出一个窗口...
firebug-1.6.1.xpi firebug大家一起分享。。。。。。
Firebug使用指南.ppt
firebug-1.9.2.rar
Firebug是网页浏览器Mozilla Firefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。 ...