在调JS的时候,有时候我们根本不知道那是入口点,因为你的一个页面在运行的时候来的是n个页面的合成,
有可能是一个页面来自N多个JS文件,OK那么你是怎么去定位当前的ONCLICK所调用的函数来自哪个JS文件呢?
如何定位当前页面所加载的JS是那个文件的入口点呢?以下是自己的小经验吧,总结下跟大家分享下
1.神奇的alert,”走到我就弹出来“
场景:我在修一个BUG的时候,出现的一个问题
在整个页面只有一个DIV
不是当页面加载的时候会异步调用后台的处理程序返回一个HTML的字符串放到这个DIV里面(我很讨厌这样的
写法,我问之前的那小子为什么这么写,他说这样是有利于代码的隐藏,我一看就汗,代码估计就这么被他养死了,太难
维护了。。。以后我不要设计出这么变态的框架)
目的:我要找到提交按钮调用的那个方法(因为里面有BUG哦)
我先通过firebug找到了当前单击按钮调用的方法名称,但是我整个项目里面搜索,找带了5个文件都有这个名称,天呀,
到底那是当前ONCLICK所调用的方法呀,很头大。
呵呵,虽然我不是专业的JS开发人员,但是我知道ONCLICK呀(幸好是只有5个方法),我在5个函数里面分别加了
aler(1),alert(2),alert(3),alert(4),alert(5),然后保存,让其重新跑起来,当我点击按钮的时候显示的是aler(1),OK,
这样就找到了当前调用的函数的位置了
总结: alert()很好用,也很给力,只要你写alert(1),alert(2),然后就可以定位当前的位置,注意不是数据库的alter
2.给力的debugger,“走到我就停下来”
我最喜欢的一个工具“debugger”,当你知道入口函数了,然后但是想知道里面的程序在跑起来的时候是怎么的,这时候直接用debugger就ok了。
总结:“我想让程序在那里停下来我就debugger到那”这个主要是你想跟着JS代码跑起来的时候想看到的具体程序在跑的时候是怎么个情况,OK,
那他是最给力的一个方法了,但是要注意,跑完了一定要删除哦,要不测试人员会来找你麻烦的。
解决调试JS脚本的一般思路:
1.找到调用JS的页面。
如果一个页面出问题了,那么最快的方法是在页面上右击,属性找到当前文件所在的位置找到之后,可以查看里面的JS引用是否超多?是否就
一个JS引用?是否很多JS引用?然后根据自己经验,看看代码入口点是什么?根据自己推测,出BUG的位置在哪里,如果JS写在当前页面且很少,
那就没必要跟断点了,直接看就OK 了。
总结:因为有的时候,你的页面很有可能是来自各个用户控件的,这样可以马上定位到你当前的文件位置
2.找到你想定位的位置
你可能是在页面加载的时候,也可能在点击一个按钮的时候,等等,所有调用JS的位置,你尽可能的去找了,修BUG的就比较明显了,尤其
是JS的BUG,目标性很明确,这个时候只要你找到调用函数的名称,就可以找到当前函数的位置了(这个时候你可以整个项目里面去搜索),
就可以找到你JS的位置了
总结:这是你想定位的位置了,如果你实在是没办法,就用我场景一里面的思路吧,直接alert去,不择手段的去定位你当前的位置
3.实用debugger一步一步跟进去
找到出问题的位置,如果实在不知道出问题的在那里,那么就从页面加载的位置看起吧,在页面加载的时候一步一步跟下去,在你跟的出
问题的地方打个断点当出现问题的时候,如果你安装了调试JS的工具会跳出来告诉你那出错了,这个时候是最好的,这时候,你可以直接点
击调试工具进行调试
总结:这是人为最没办法的办法了。
4.“抓”到当前页面的所有的JS
如果你还是定位不到当前的问题出在那,你可以通过,右击"查看源文件",在页面的头部有js,你需要做的是找到里面所有的src,然后在用HTTP
把文件下载下来,然后自己分析。这样拿到的JS是你当前页面引用的所有的JS文件(虽然这个文件拿到了,但是我感觉实用的价值不大,因为有
的时候这个文件就是很多没用方法的陈述),当然这个方法也可以拿到.CSS文件。不喜欢这个方法,但是有时候,你没源码,又想知道,当前
页面调用的所有的JS或者其中一个方法的含义,呵呵,这个方法是超级好用的。一抓就抓一大把
总结:这个对你的JS优化有很大的好处,看看JS文件的大小,以及多少方法用到JS
5.反复
当你去调试JS的时候,有可能定位的位置不对,那么请你反复重复2.3步骤,一个alert,一个debugger足矣。
总结:一个alert,一个debugger足矣,最后注意一定要删除alert,debugger
自己不喜欢用调试工具,所以基本是alert,debugger去处理问题,算是习惯吧,不知道大家是怎么去调试的,大家可以交流下。