现在位置首页 / 项目实战 /正文

Javascript代码调试debugger技巧及chrome使用

作者: IT小兵 | 2014年4月2日| 热度:℃ | 评论: |参与:

Javascript代码是解释型的语言,弱类型。写的时候,不报错,但是运行起来就各种bug。

对js我们只能是又爱又恨啊。

出现问题后,我们都需要一些手段或者技巧去调试一下代码。

下面分享一些技巧和经验,希望对大家有帮助。

1、Debugger:

Debugger是最原生也最好使的一种js调试方法。使用Debugger的时候,主要有一下情况

1)、你想知道js代码在那里出错了:这时候,你需要在你认为出错的地方,放置一个Debugger,

排除出问题后,再查看和监控变量。

2)、知道问题在那里:放一下debug,可以中断js执行,监控变量情况。

3)、类似jquery  $.ajax 等主要的函数:jquery函数执行的话,都有一些success error的事件,

但是如果出现的话,你设置断点是没用的。只能放一个debug或者alert、打印log等方式了。

 $.ajax({
        type: "post",
        data: { nm: name, pwd: password,nm2:name2,pwd2:password2 },
        url: AjaxUrl,
        success: function (data, textStatus) {
            debugger
            if (data != null) {
                if (data == "true") {
                    window.location.href = 'Main.aspx';
                }
                else {
                    alert("登录失败,请检查用户或密码是否正确。");
                    $("#btnlogin").attr("disabled", false); $("#btnlogin").text("重新登录");
                }
            }
        },
        complete: function (XMLHttpRequest, textStatus) {
        },
        error: function (e) {
            debugger
            $("#btnlogin").attr("disabled", false); $("#btnlogin").text("重新登录");
        }
    });

需要带有条件的断点吗?你只需要用if语句包围它:

if (somethingHappens) {

debugger;

}

注意:发布程序时,去掉debugger!!

注意:Chrome你如果不打开F12的话,debugger也是不会出现的。

2、Chrome调试工具:非常好用。

以前有一篇文章,参考:Google Chrome 开发者工具使用详解---喜欢Google Chrome浏览器

 设置在DOM node发生变化时触发断点

有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源。

谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,叫做“Break on…”,你在DOM节点上右键,就能看到这个菜单项。

断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化,或它的某个子节点有变化发生。

tumblr_inline_n1s6xpVmg21r2

 Ajax 断点

XHR断点,或Ajax断点,就像它们的名字一样,可以让我们设置一个断点,在特点的Ajax调用发生时触发它们。

当你在调试Web应用的网络传输时,这一招非常的有效。

tumblr_inline_n1s7ceQ08c1r2

 移动设备模拟环境

谷歌浏览器里有一些非常有趣的模拟移动设备的工具,帮助我们调试程序在移动设备里的运行情况。

找到它的方法是:按F12,调出开发者工具,然后按ESC键(当前tab不能是Console),你就会看到第二层调试窗口出现,里面的Emulation标签页里有各种模拟设备可选。

当然,这不会就变成了真正的iPhone,只是模拟了iPhone的尺寸,触摸事件和浏览器User Agent值。

tumblr_inline_n1s71kb2NL1r2 

5、console.log:chrome基于firebug的插件。

日志记录功能,您可以从您自己的web页面上调用,然后以最快的方式转储尽可能多的信息到控制台上,

从而能更醒目地让你意识到你的javascript下一步需要做什么。

打开你的chrome浏览器,F12召唤出firebug,在如下界面中点击Console,然后输入13+14,回车,它将出现:

小谈chrome调试命令:console.log的使用

js中代码:

console.log('hello world');

我们就可以在chrome中监控到js执行情况了。js的一些脚本错误也在这里打印出来。

除了console.log,console对象还能实现日志的彩色输出,这将让您的调试结果显得更清晰了:


转发注明:IT分享  http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询