南方 发布的文章

英文网站seo/外链交换加群:454108194
法语网站seo/外链交换加群:454108194
德语网站seo/外链交换加群:454108194
西班牙语网站seo/外链交换加群:454108194
俄语网站seo/外链交换加群:454108194

自己写代码打断点比较容易,firebug直接会跳到断点处。

但是经常分析别人的代码,由于js写的很多很复杂,jquery和一些js框架通常是动态绑定的,js动作不直接写在html标签中,要想定位js的执行点比较困难。

1.当鼠标划过一个元素产生了动作,怎么定位这个动作执行了哪个js文件的哪个函数呢?
2.引申出另一个问题,怎样不打断点调试js ? 比如input submit绑定了click事件,怎样能够自动定位到js执行点。

上面两个问题,其实是js调试的另一个侧面,通常我们都是先打断点,然后浏览器暂停在断点处我们来看数据。不过借助工具,我们确实可以通过事件定位到js的执行点。
我最常用的是firebug,但firebug在这方面有明显缺陷,下面使用chrome自带调试工具和firefox自带调试工具说明。

下面提供两个方法:
1.chrome调试工具
a. Chrome中按F12调出调试面板,找到Sources,Event listener Breakpoints,这里勾选我们要监听的事件,比如click mouseover,当网页执行到的时候自动打断点,我们此时通过看变量判断错误。
b.开启 Chrome F12 的 Performence 记录,Event Log 里面有执行过的记录;
监听事件调试javascript

2.firefox默认的调试工具
代码中使用一个jquery给input submit绑定一个事件, 使用火狐f12自带的调试工具,会在这个元素后面显示一个ev,点开后可以看到执行的js文件和事件,确实很好用。
监听事件调试js

firebug已经于2016年底停止更新,看来是要用心了解一下火狐自带的调试工具了。

ie7及以前的版本都不带调试工具,所以在遇到运行错误的时候,ie的左下角边框上会出现一个三角叹号 ,双击可以看到详情。但由于无法看到详细情况,实用意义不大。
ie7及老版本用户可安装IEDeveloperToolBar工具,再安装一个cachepal用于清缓存,十分方便。
ie8及新版本直接按F12,即可弹出自带工具。

chrome自带调试工具,跟firefox下的firebug工具类似,按F12键弹出,但是还是觉得firebug好用。
firefox,ff有着强大的插件库,安装firebug,在界面上按F12,会弹出调试窗口,基本上可以应付所有的javascript和css调试。

firefox在遇到js故障的时候没有ie中的叹号,但提供了一个更为强大的浏览器控制台,可以实时看到网络、css和js加载过程中的问题。
firebug调试


调试
以下面这段简单代码,我们跟踪一下其调用过程。
js调试

1.打开firefox的firebug工具,按窗口上的虫子图标或者F12都可以。
2.启用firebug的脚本调试功能
firebug调试js

3.刷新调试页面,脚本窗口捕获所有的脚本内容
javascript调试

为了能够看到第一步的过程和值,我们在前面行号上面点击,即可打断点,同时出现一个红点。

4.点击一下脚本所在的元素,此例是一个input button。
js调试

如上图,左边的窗口显示当前位置在第10行alert('doTest') ,说明程序已经从input中的onclick="doTest()"进到函数中来了。

此时如果alert中的内容是一个变量,比如this,鼠标悬停上来可以看到变量内容。
右边的窗口显示的时当前元素的属性。比如当前this位置、属性等。

5.步骤
在代码窗口的右上角,有几个或蓝或橙色的按钮,这是用于控制程序步骤的。多数情况下,使用步进一步步查看过程。

先上代码:
js调试

所谓简单调试使用alert(var)或者document.write(var)实时输出一些当前变量,看看是否是预期的结果。比如上面的代码,我们用alert(t)的弹窗显示变量t的值。

我们还可以使用javascript提供的console.log(var)输出一些手工内容,这里输出的内容在浏览器的控制面板里面可以看到,用来判断这个步骤有没有被程序执行。
javascript调试

不过,对于稍微复杂一点的js代码,我们就需要一步一步的看结果,以上的方法明显是不够的,那么就需要用到下面的debug调试。