js断点调试
一、“逐语句执行”或者“逐步执行”按钮:
1、意思就是,每点击它一次,js语句就会往后执行一句
2、快捷键F10
二、“逐过程执行”按钮:
1、常用在一个方法调用多个js文件时,涉及到的js代码比较长,则会使用到这个按钮
2、快捷键F8
三、console控制台:
1、这个就是一个js解析器,是浏览器本身用来解析运行js的家伙,只不过浏览器通过console让我们开发者在调试过程中,可以控制js的运行以及输出。
2、console.log()可以取代alert()或document.write(),在网页脚本中使用console.log()时,会在浏览器控制台打印出信息。
3、console.dir()可以显示一个对象所有的属性和方法。
四、sources面板:
1、源码面板,调试最重要的一个功能。
2、Pretty print 按钮:格式化代码。
3、Breakpoints 一栏:管理所有断点,可以方便地跳转到对应断点的位置处。
4、Scope(变量作用域) 一栏:显示当前作用域和它的父级作用域,以及闭包。
五、jQuery 事件源码定位问题:
将以下代码复制到控制台,按回车运行。
1、适用于 1.5+ 版本的 jQuery:
function lookEvents (elem) { return $._data ? $._data( elem, "events" ) : $.data( elem, "events", undefined, true ); } var event = lookEvents($("#testbtn")[0]); // 获取绑定的事件 event.click[0].handler // 获取click事件的第一个事件源码地址
2、适用于 1.2.6-1.4 版本的 jQuery:
function lookEvents (elem) { return $._data ? $._data( elem, "events" ) : $.data( elem, "events", undefined, true ); } var event = lookEvents($("#testbtn")[0]); // 获取绑定的事件 event.click; // 查看有几个click事件,如果要查看其他事件直接输入 event 然后回车即可
六、debugger:调试器,即代码断点。
1、用法非常简单,在写代码的时候,想要断点调试的地方写上 debugger 即可。
2、调试按钮。
七、调试bug的思路:
1、首先,js是否成功的执行进来;
2、其次,js是否存在逻辑问题、变量问题、参数问题等等;
3、最后,如果上述都没有问题,仔细查看各种符号。。。
参考资料1:【http://www.cnblogs.com/mqfblog/p/5397282.html】
参考资料2:【http://www.cnblogs.com/52cik/p/js-console-acquaintance.html】