JavaScript代码调试

1、控制台中好用的操作: (1)$_ 表示上一次执行的结果,$0 - $4则代表了最近5个选择过的DOM节点。在审查元素时点击DOM结点树的节点后,这些被点击过的节点会被记录下来,$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined。(2)Chrome 控制台中原生支持类jQuery的选择器,即我们可以用$加上熟悉的css选择器来选择DOM节点。如: $('#cont')(3)copy()通过此命令可以将在控制台获取到的内容复制到剪贴板。
如copy(document.body) 就可以将body中的HTML复制到sublime中。(4)keys和values前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。
var obj = {
    name: 'shiddong',
    country: 'China',
    city: 'shanghai'
};
keys(obj);        // ['name', 'country', 'city']
values(obj);    // ['shiddong', 'China', 'shanghai']
 2、html中绑定函数的js源码定位大家在看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示现在就可以知道votePost方法到底在哪,在Console面板里面输入votePost然后回车直接点击上图中的代码,控制台将定位到Sources面板中点击中间面板左下方的Pretty print / {}3、jQuery绑定事件的js源码定位这次我们来看“提交评论”作说明,右击“提交评论”-->审核元素,我们可以清楚的看到在这个按钮上未绑定任何事件。在Console面板内输入如下代码
function lookEvents (elem) {
    return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件
event.click[0].handler
如下图所示:按照上述介绍的方法定位到具体的blog-common.js里面,找到postComment  然后一层层的找到具体的代码,再设置断点就好了。 4、代码调试调试第一步便是设置断点,其实设置断点很简单,点击一下上图所示的92即可,这时你会发现92行号旁边会多了一个图标。因为91行是函数的定义处,所以没法在此设置断点。设置好了断点后,就会在右边Breakpoints方框里看到刚刚设置的断点。调试快捷键 快捷键功能 F8 恢复运行 F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部 F11 步入,遇到自定义函数就跟入到函数内部 Shift + F11 步出,跳出当前自定义函数 (事实上我们也可以不用下表所示的快捷键,直接点击上图所示右侧栏最上层的一排按钮来进行调试,具体用哪个按钮,把鼠标放到按钮上方一会就会显示它相应的提示) 从左到右,以此对应上面的列表中的快捷键。其中值得一提的是,当我们点击“推荐”按钮进行调试的时候会发现,不管我们是按的F10进行调试还是按F11进行逐步调试,都没法进行$.ajax函数内部,即使我们在函数内部设置了断点也没有办法进入,这里按F8才是真正起效果的。当我们在调试的时候,右侧Scope Variables里面会显示当前作用域以及他的父级作用域,以及闭包。你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。另外还有一个神器,debugger;如果自己写的代码,执行的时候想让它在某一处停下来,只要在代码中写上的debugger就好了。
debugger; 
 Refer:Chrome 控制台console的用法 : http://www.open-open.com/lib/view/open1421131601390.html

相关内容推荐