Web调试技巧——对象跟踪

原创 2012年03月27日 16:59:34

做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>

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5开发Web移动端APP技巧笔记——入门篇

一、以配置移动开发环境的方法 很多初学者都因为不知道怎么才能将自己在电脑上写的页面放到手机中测试,其实很简单,只要有以下几个原材料就可以了: 1、XAMMP或其他集成环境 2、自己能用电脑开一个WiF...
  • fareise
  • fareise
  • 2015年10月26日 08:38
  • 1084

前端js面试技巧(2)——JS-WEB-API部分

上期回顾 JS基础知识 ①变量类型和计算 ②原型和原型链 ③闭包和作用域 ④单线程和异步 ⑤其他(如日期,Math,各种常用API) 注意:内置函数和内置对象的区...
  • water_v
  • water_v
  • 2017年10月20日 18:41
  • 220

编写高扩展性的JavaScript程序技巧(一)——扩展对象

经常说JavaScript是一种具有高扩展性的语言,但到底有多高,又如何写出高扩展性代码了?本文举几个常用的技巧,帮助大家理解JavaScript的扩展性。扩展对象假设有这么一个对象——You,你一开...
  • asrocky
  • asrocky
  • 2015年09月25日 23:29
  • 185

JavaScript 高级技巧——“防篡改对象”的注意要点

防篡改对象 不可扩展对象 默认情况下,所有对象都是可扩展的: var person = { name: "Oliver" }; person.age = 18; consol...

Java Web学习总结(16)——JSP的九个内置对象

一、JSP运行原理   每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理。JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个serv...

Java Web学习总结(5)——HttpServletResponse对象详解

一、HttpServletResponse常见应用——生成验证码 1.1、生成随机图片用作验证码   生成图片主要用到了一个BufferedImage类,    生成随机图片范...

Web前端复习——JS(正则表达式+内置对象)

正则表达式:专门规定字符中字符*格式规则*的表达式 何时使用:只要定义字符串格式规则,都用正则表达式 最简单正则:一个关键词的原文,就是最简单的正则 1、备选字符集:规定某*一位*字符可选...
  • zxy9602
  • zxy9602
  • 2017年05月04日 17:12
  • 157

Web 前沿——HTML5 FormData 对象的使用

XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用...

《Java Web 程序设计与开发》读书笔记——JSP编程基础和JSP内置对象

本篇内容为读马月坤、赵全明两位老师编著清华大学出版社出版的《Java Web 程序设计与开发》的读书笔记。之前读了一天的人民邮电出版社的《JSP程序设计慕课版》,可能是我没有结合视频的缘故,感觉效果不...

Web前端复习——Javasvript学习(面向对象)

1、面向对象:在程序中都是用一个对象来描述现实中一个具体的东西 现实中任何一个东西都包含属性和功能: 属性——描述一个东西特点的变量,一个值 功能——东西可以执行的操作 (1)什么是对象? 封装多个数...
  • zxy9602
  • zxy9602
  • 2017年05月10日 22:39
  • 166
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web调试技巧——对象跟踪
举报原因:
原因补充:

(最多只允许输入30个字)