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】

参考资料3：【https://www.cnblogs.com/softwarefang/p/6891234.html?utm_source=itdadao&utm_medium=referral】