`
java-mans
  • 浏览: 11343883 次
文章分类
社区版块
存档分类
最新评论

Web调试技巧——对象跟踪

 
阅读更多

做web的离不开两个常用对象:json 对象 和 dom 对象

有的时候在调试的时候知道得到的是个对象,也对这个对象做点儿“手脚”,可是就是不知道

这个对象中用什么东西?这下就郁闷了,进入了浑浑噩噩的疯狂试验中~~~~~

现在说一下如何简单区分上面的两个对象(所有测试都是在IE中进行,不保证其它浏览器支持!)

调试步骤:——————————————————

1.确定对象类型

很简单了,使用alert 弹出看看弹出内容是什么就OK了

如果弹出的内容是 [Object Object] ,那多半就是 json 对象了

如果弹出的内容类似[object HTML.......] 格式,那肯定是 html 的 dom 对象了

2.确定了对象类型,接下来就是要看对象的代码段内容了

2.1 如果是 HTML DOM 对象

直接用 alert(dom1.outerHTML); 就可以弹出 dom 元素了

2.2 如果是 json 对对象

使用 alert(String.toSerialize(myjson)); 就OK了

注意:String.toSerialize() 方法是自己封装的

测试代码段如下:——————————————————

<body>
<div id="mydiv">
<span id ="myspan" >hello world!</span>
</div>
<input type="button" onClick="test()" value="Test"></button>

<script language="javascript">
var myjson=[{id:"i1",value:"v1"},{id:"i2",value:"v2"}]
var dom1 = document.getElementById("mydiv");
function test()
{
//1.查看对象类型
alert(dom1);
alert(myjson);

//2.发序列化对象对象内容
//2.1 如果是 dom 元素
alert(dom1.outerHTML);
//2.2 如果是 json 元素
alert(String.toSerialize(myjson));


}

String.format = function (str)
{
if (arguments.length == 0)
return null;

var str = arguments[0];
for (var i = 1; i < arguments.length; i++)
{
var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
str = str.replace(re, arguments[i]);
}
return str;
};
/*对string 对象的扩展*/
/*对象序列化为字符串*/
String.toSerialize = function (obj)
{
var ransferCharForJavascript = function (s)
{
var newStr = s.replace(
/[\x26\x27\x3C\x3E\x0D\x0A\x22\x2C\x5C\x00]/g,
function (c)
{
ascii = c.charCodeAt(0);
return '\\u00' + (ascii < 16 ? '0' + ascii.toString(16) : ascii.toString(16));
}
);
return newStr;
}
if (obj == null)
{
return null
}
else if (obj.constructor == Array)
{
var builder = [];
builder.push("[");
for (var index in obj)
{
if (typeof obj[index] == "function") continue;
if (index > 0) builder.push(",");
builder.push(String.toSerialize(obj[index]));
}
builder.push("]");
return builder.join("");
}
else if (obj.constructor == Object)
{
var builder = [];
builder.push("{");
var index = 0;
for (var key in obj)
{
if (typeof obj[key] == "function") continue;
if (index > 0) builder.push(",");
builder.push(String.format("\"{0}\":{1}", key, String.toSerialize(obj[key])));
index++;
}
builder.push("}");
return builder.join("");
}
else if (obj.constructor == Boolean)
{
return obj.toString();
}
else if (obj.constructor == Number)
{
return obj.toString();
}
else if (obj.constructor == String)
{
return String.format('"{0}"', ransferCharForJavascript(obj));
}
else if (obj.constructor == Date)
{
return String.format('{"__DataType":"Date","__thisue":{0}}', obj.getTime() - (new Date(1970, 0, 1, 0, 0, 0)).getTime());
}
else if (this.toString != undefined)
{
return String.toSerialize(obj);
}
};
</script>

分享到:
评论

相关推荐

    亮剑.NET深入体验与实战精要2

    1.6.4 常见开发调试技巧 66 1.6.5 错误异常处理方法 70 本章常见技术面试题 76 常见面试技巧之面试前的准备 76 本章小结 77 第2章 细节决定成败 79 2.1 Equals()和运算符==的区别 80 2.2 const和readonly的区别 82 ...

    亮剑.NET深入体验与实战精要3

    1.6.4 常见开发调试技巧 66 1.6.5 错误异常处理方法 70 本章常见技术面试题 76 常见面试技巧之面试前的准备 76 本章小结 77 第2章 细节决定成败 79 2.1 Equals()和运算符==的区别 80 2.2 const和readonly的区别 82 ...

    精通JS脚本之ExtJS框架.part2.rar

    15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 调试代码运行速度 15.6.3 查看对象属性 第16章 ExtJS案例:商品信息管理系统 16.1 商品信息管理系统功能介绍 16.2 数据库设计和实现 16.2.1 数据库概念...

    精通JS脚本之ExtJS框架.part1.rar

    15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 调试代码运行速度 15.6.3 查看对象属性 第16章 ExtJS案例:商品信息管理系统 16.1 商品信息管理系统功能介绍 16.2 数据库设计和实现 16.2.1 数据库概念...

    asp.net知识库

    动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/catch语句带来的warning 微软的应试题完整版(附答案) 一个时间转换的问题,顺便谈谈搜索技巧 .net中的正则表达式使用高级技巧 (一) C#静态成员和...

    3.ASP.NET 2.0 入门经典(第4版) [压缩包1/10]

    12.9 远程Web服务—— PocketPC 应用程序 422 12.10 Web服务的安全性 426 12.10.1 加密和基于消息的安全性 427 12.10.2 服务的身份验证和访问控制 427 12.11 本章小结 427 12.12 练习 428 第13章 电子商务 429...

    Visual.Basic.2010.&.NET4.高级编程(第6版)-文字版.pdf

    14.2.6 始终置顶——topmost属性 546 14.2.7 附属窗体 546 14.2.8 改变窗体的透明度 547 14.2.9 可视化继承 549 14.2.10 滚动窗体 549 14.2.11 mdi窗体 549 14.2.12 vb 2010中的mdi样例 550 14.2.13 ...

    庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术

    2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 2.6 本章总结 26 第3章 从零开始开发服务器控件 27 3.1 选择基类 27 3.2 控件呈现顺序 28 3.3 render呈现控件的几种方式 30 3.3.1 使用...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part1

    2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 2.6 本章总结 26 第3章 从零开始开发服务器控件 27 3.1 选择基类 27 3.2 控件呈现顺序 28 3.3 render呈现控件的几种方式 30 3.3.1 使用...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2

    2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 2.6 本章总结 26 第3章 从零开始开发服务器控件 27 3.1 选择基类 27 3.2 控件呈现顺序 28 3.3 render呈现控件的几种方式 30 3.3.1 使用...

    庖丁解牛纵向切入ASP.NET 3.5控件和组件开发技术.pdf

    2.4.5 高效率调试的技巧24 2.5 ajax library对javascript调试支持26 2.6 本章总结26 第3章 从零开始开发服务器控件27 3.1 选择基类27 3.2 控件呈现顺序28 3.3 render呈现控件的几种方式30 3.3.1 使用...

    精通AngularJS part1

    跟踪input字段有效性153 55校验AngularJS表单153 理解ngFormController153 运用name属性将表单附加到作用域上154 为用户信息表单增加动态行为154 显示验证错误155 让保存按钮无效156 使原生浏览器校验无效157...

    白帽子讲浏览器安全.钱文祥(带详细书签).pdf

    本书从攻击者常用技巧的“表象”深入介绍浏览器的具体实现方式,让你在知其然的情况下也知其所以然。 第1篇 初探浏览器安全 1 1 漏洞与浏览器安全 3 1.1 漏洞的三要素 3 1.2 漏洞的生命周期 4 1.3 浏览器安全...

    C#微软培训资料

    1.1 Microsoft.NET——一场新的革命.4 1.2 .NET 与 C#.6 1.3 C#语言的特点.8 1.4 小 结 .11 第二章 运行环境 全面了解.NET.12 2.1 .NET 结构.12 2.2 公用语言运行时环境与公用语言规范.13 2.3 开 发 ...

    Visual C++ 2010入门经典(第5版)--源代码及课后练习答案

     ·分享c++程序的错误查找技术,并介绍通用的调试原则讨论每一个windows应用程序的结构和基本元素  ·举例说明如何使用mfc开发本地windows应用程序  ·指导读者用c++和c++/cli设计和创建大量的windows应用程序 ...

    ASP.NET MVC 3高级编程

    12.3 单元测试用于asp.net mvc应用程序的技巧和窍门 291 12.3.1 控制器测试 291 12.3.2 路由测试 296 12.3.3 验证测试 298 12.4 小结 302 第13章 扩展asp.net mvc 303 13.1 模型扩展 304 13.1.1 把请求数据...

Global site tag (gtag.js) - Google Analytics