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>

 

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

VS2010中的调试技巧总结

VS2010中的调试技巧     跳到当前光标处(Ctrl+F10)   我经常看到人们为了到达目标代码位置,而在程序中早早设定了断点,然后反复地按F10/F11,一步步走到目标代码处。当程序员的确...
  • hehe6378
  • hehe6378
  • 2014年01月22日 13:37
  • 1034

ACM_调试技巧

对于调试,一般来说指的是逻辑错误,因为语法错误编译器可以帮你检查出来,但有一些陷阱语法编译器却很难检测出来,毕竟C/C++语言比较灵活。 VC++6.0 在讲解之前,先讲一下调试常用快捷键...
  • secretbase_
  • secretbase_
  • 2015年02月05日 21:03
  • 647

<深入剖析Nginx> nginx的跟踪与调试

通过调试,可以方便地定位问题,解决bug. 本文主要总结书里提到的内容,具体细节,会慢慢更新,因为细节是在慢慢阅读中经历的. 跟踪与调试,主要分了6个部分: 1. 利用GDB调试: 具体调试方...
  • zy416548283
  • zy416548283
  • 2015年01月19日 00:14
  • 4566

Chrome调试技巧

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具。大多数前端开发者可能熟悉关于chorme的许多特...
  • shenlei19911210
  • shenlei19911210
  • 2016年03月27日 15:54
  • 4515

Eclipse的Debug调试技巧大全(精华版)

Eclipse的Debug调试技巧大全(精华版)
  • swebin
  • swebin
  • 2017年04月24日 16:13
  • 1986

windbg调试技巧 执行直到某个特殊状态

Executing Until a Specified State is Reached 执行直到某个特殊状态 There are several ways to cause the target...
  • itmes
  • itmes
  • 2014年07月22日 17:45
  • 965

Eclipse高级调试技巧

记得刚刚毕业的时候,自己连断点也不会打,当时还在用JCreate ,就连毕业设计也是用 System.out 找 Bug 的,想想真的很笨。开始工作后,一个星期过去了,在一个 1 、 2 百万行的系统...
  • Alexlee1986
  • Alexlee1986
  • 2014年02月03日 17:45
  • 2224

WCF跟踪调试技巧

WCF提供了两个工具可以跟踪WCF的调用过程: SvcConfigEditor:微软提供的用来辅助编辑WCF配置文件的工具 SvcTraceViewer:微软提供的用来查看WCF的Trace Lo...
  • A_post
  • A_post
  • 2012年08月16日 23:31
  • 1073

java web项目中前端调试技巧

最近开始需要频繁的调试前端代码,但是在myeclipse中加载和调试html页面会特别的卡顿。 同时,每次修改页面后,都需要重新部署到服务器中,再run起来才可以看到最新的页面,这样的效率比较低...
  • qq_33698462
  • qq_33698462
  • 2017年03月17日 20:42
  • 726

跟踪客户技巧:我是这样跟踪客户的!

进入现在的部门近三个月,营销业绩开始明显好转,从以往的两三个月难签一个单子,到现在的每个星期都能签定几个单子,而且意向客户越来越多,笔者内心还是很有些欣慰的。当然,取得的成绩,离不开整个团队的通力合作...
  • yunhaiC
  • yunhaiC
  • 2014年05月05日 09:20
  • 713
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web调试技巧——对象跟踪
举报原因:
原因补充:

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