很多大型网站的JS脚本都是超级多的,而且都是动态绑定的
如果知道在哪个JS脚本里进行绑定的,那要DEBUG还是挺简单的
但...如下代码,如果这个JS脚本是在30个脚本文件里的某一个,要调试实在太难了...至少要找到它到底在哪个JS脚本文件里进行绑定的都难
<html>
  <head>
    <script type="text/javascript">
      window.onload = function() {
        var a = document.body.getElementsByTagName("*")[0];
        try {
          a.attachEvent(
            "onclick",
            function() {
              alert("Start download...");
            }
          );
        } catch(er) {
          a.addEventListener(
            "click",
            function() {
              alert("Start download...");
            },
            false
          );
        }
      }
    </script>
  </head>
  <body>
    <a href="javascript:void(0);">Download</a>
  </body>
</html>
如果可以在a元素上添加断点,那调试就简单多了,也就是,我不需要知道a元素到底动态绑定了哪些函数,只要我把断点设置在a元素上,当我触发它时,如果有相应的事件绑定,就跳到函数执行处。
有这样的工具吗??

解决方案 »

  1.   

    firebug的JS调试里就有这个功能!
      

  2.   

    怎么操作呢??我用的是FF6.0.2,firebug版本是1.8.2
      

  3.   

    Firebug没有这么强大的功能 况且你好多个文件 除非你的断点在函数上 可以进入 
    顶多能在firebug下看到a标签上的事件是啥 函数名是啥 监听一下是可以的
      

  4.   

    https://public.bay.livefilestore.com/y1pDc_r3biPGi6tMvy53stFy9Cksn9l7GntOH9Nek17u37o1FKGk1SsNvRrTTErkc602xosN7V_TM2Gy-mjZK-2iQ/fb02.JPG
    这里边的脚本选项里好像可以设断点的吧。只要断点设在加载项,然后f11进入函数的话,应该能调试出来的吧~~?
      

  5.   

    firebug里的下边出了html选项,好像还有脚本选项吧?
    这里边的脚本选项里好像可以设断点的吧。只要断点设在加载项,然后f11进入函数的话,应该能调试出来的吧~~?
      

  6.   


    像这样的...如果在多个文件里的话,而且DOM节点超级多的情况下...搜索起来简直要死人啦!!!!!
    要不然就只能搜索attachEvent和addEventListener...(如果有封装的绑定事件,就换成该函数名)然后再一个一个找啰...搜索起来真的是会死人啊!!!!!!!BTW,为什么浏览器厂商和DEBUG工具开发者都没考虑加上我主楼上说的的功能呢???是安全顾虑??还是实现太难了??
    <scirpt type="text/javascript">
      window.onload = function() {
        var lis = document.getElementsByTagName("DIV")[0].getElementsByTagName("LI");
        lis[0].attachEvent("click", function() {
          alert("download...");
        });
      }
    </script>
    <div>
      <ul>
        <li><a href="javascript:void(0);">DOWNLOAD</a></li>
        <li><a href="javascript:void(0);">FIRST</a></li>
        <li><a href="javascript:void(0);">PRE</a></li>
        <li><a href="javascript:void(0);">NEXT</a></li>
        <li><a href="javascript:void(0);">LAST</a></li>
      </ul>
    </div>
      

  7.   

    并非所有对象你都要监听,只须关心你真正关心的少数对象。因此,对这些对象,完全可以写一个列举关键事件的函数。这里主要运用的原理是,你可以取一个函数,取得的就是这个函数的方法体,就是说你可以取到这个函数里面的代码来看出它到底干什么了。对此不了解的朋友需要先把函数名称theforever_csdn和函数的执行theforever_csdn()区别开来,theforever_csdn和),通过前者你就能得到方法函数的定义,而后者是得到该函数的运行结果。
      

  8.   

    firebug 下载一个eventbug扩展就可以看到了!
    地址: https://getfirebug.com/releases/eventbug/1.5/eventbug-0.1b10.xpi