• 调试脚本,远离alert


    看到一篇讲解避免用alert调试脚本的博文,学习下。

    转了部分内容,原文地址:http://www.cnblogs.com/hkncd/archive/2012/03/26/2417315.html 

     

    不知有多少人像我一样,几年web开发,无数js代码,调试脚本却只会alert方法。

    不知有多少人像我一样,一个简单方法,开发中却需不断alert以确保数值正确,一步一alert,处处都alert,每次都alert到浏览器看不下去,跳出来阻止。

    如果你确实苦逼如我,今天看到这篇文章算你福气啦,哥现身说法,教你如何摆脱alert的噩梦。

    调试利器--console.log

    如今主流浏览器(Chrome,IE8及后续版本,FireFox,Opera等)都支持控制台功能。

    Chrome:

        

    IE9:

     

        

      FireFox(需安装FireBug插件)

        

    当在js代码中调用Console.log方法时,相应的信息就会在控制台中显示。相对于alert方法,有三个优点:

    1. 如参数为一个对象,则可在控制台查看所有属性信息。
    2. 类似C#中的string.Format功能,不需字符串拼接。
    3. 无弹窗,即使不删除,也不会影响页面体验。

    调试实例:Google Calendar API

    我最近在整合googleAPI的过程中碰到一个问题,google API提交信息需要两个条件:

    1. Https协议。
    2. 需提交JSON格式的数据。

    我并不完全了解Https和Http的区别,通过操作才知道监听软件(如Fiddler)拦截不到Https请求的详细信息通过Fiddler设置可以拦截到HTTPS信息,但个人感觉所得信息并无价值),而整个过程是Ajax的形式,结果就是--任何一个地方出错,点击按钮完全无响应,却不知错在哪里。

    对于第二条,我是第一次碰到要提交JSON格式数据,以往碰到的都是返回JSON数据。

    为了走通整个流程,我做了简单的测试代码,三个输入框分别表示标题,开始时间,结束时间和一个提交按钮:

       

    js代码如下,手动构造JSON对象tempRes,再发送到google响应的地址:

    function makeRestRequest() {
        var tempRes = {
            "summary": $("#summary").val(),
            "start": {
                "dateTime":$("#start").val() // "2012-03-21T10:00:00.000+08:00"
            },
            "end": {
                "dateTime":$("#end").val() //"2012-03-21T11:00:00.000+08:00"
            }
        };
        
        console.log(tempRes);
        
        gapi.client.request({
            'path': '/calendar/v3/calendars/primary/events',
            'method': 'POST',
            // 'body': resource,
            'body': tempRes,
            'callback': writeResponse
        });
    }

    然而代码完成后,点击按钮毫无响应,于是我就用console.log查看tempRes对象。发现结果如下:

        

    图中可以看出,end属性为“undefined”,为什么?在确定输入值格式无误后发现,两个输入框的id重复了,错误代码如下:

    
    
     <tr>
                    <td>Start:</td>
                    <td><input type="text" id="start" name="start"/></td>
                </tr>
                <tr>
                    <td>End:</td>
                    <td><input type="text" id="start" name="end"/></td>
    </tr>

     
    于是,改之,发现依然有错,再查!

    在google提供回调方法中,有一个参数response,但跟其他回调一样,参数往往是个对象,在不知属性的情况下,无从下手。于是对回调参数使用console.log。

    function writeResponse(response) {
        console.log(response);
        var creator = response.creator.email;
        var calendarEntry = response.htmlLink;
        //…………
    
    }

    然后在控制台中得到以下错误信息:

        

    错误信息显示需要登录,于是添加登录部分代码,再测,走通,完成!

    我经常在编码出现重复值、拼错字之类的小错,而console.log能让我快速定位问题。上面的例子中JSON对象属性只有3个,用alert一个一个查能找到,但如果有一二十个,再用alert就会显的笨拙。

    结语

    以上是我的个人经验分享,记述着我摆脱alert的过程,我相信还有其他更好的js调试方法,如有不对的地方,欢迎批评指出。

     

  • 相关阅读:
    NSArray和NSMutableArray的详解
    牛一网ecshop综合类模板(仿淘常州) for ecshop 2.7.3
    编写Qt Designer自定义控件(二)——编写自定义控件界面
    android关于The connection to adb is down, and a severe error has occured.这个问题的解决办法
    jboss eap6出现Tags_$$_javassist_26 cannot be cast to javassist.util.proxy.ProxyObject的解决办法
    (5)RARP:逆地址解析协议
    构成直角三角形
    共用体和枚举类型
    通过dbcc page来查看表中的数据
    ios开发-确定/自适应textView的高度
  • 原文地址:https://www.cnblogs.com/Carl78/p/2660364.html
Copyright © 2020-2023  润新知