• 如何去定位你在调用哪个function()?


             在调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去处理问题,算是习惯吧,不知道大家是怎么去调试的,大家可以交流下。










  • 相关阅读:
    VUE2.0项目实现动态修改请求的服务器地址
    el-select和data
    el-tree禁用
    国际化全部整理
    洛谷P2899 Cell Phone Network G 题解
    【nvidia jetson xavier】 Deepstream Yolov3示例模型运行
    【nvidia jetson xavier】 风扇开机自启动
    A Semisupervised CRF Model for CNN-Based Semantic Segmentation With Sparse Ground Truth
    Semi-supervised semantic segmentation needs strong, varied perturbations
    Remote Sensing Images Semantic Segmentation with General Remote Sensing Vision Model via a Self-Supervised Contrastive Learning Method
  • 原文地址:https://www.cnblogs.com/muer/p/debugger.html
Copyright © 2020-2023  润新知