1.用console.log()代替了alert()
2.js断点调试
1&Sources断点：在代码中加入console.log()来进行验证
打开SOurece菜单，左侧找到相应文件，点击行列号，即断点设置完。
从左到右，各个图标的表示功能分别为：
Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）Step over next function call：执行到下一步的函数调用（跳到下一行）Step into next function call：进入当前函数Step out of current function：跳出当前执行函数Deactive/Active all breakpoints：关闭/开启所有所有断点（不会取消）Pause in exceptions：异常情况自动断点设置
2&Debugger断点：通过在代码中添加“debugger”语句，当代码执行到该语句的时候就会自动断点，接下来的操作和和Source几乎一模一样。
因为在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码），而这部分js代码在Source树中无法找到，因此无法直接在开发工具中直接添加断点，如果想给异步脚本添加断点，此时“debugger”就发挥作用了。
3&DOM断点调试
当节点内部子节点变化时断点：随着DOM节点的操作逐渐增多，难免会遇到很难定位代码段的情况，而我们却可以通过Elements面板，快速定位到相关DOM节点，所以DOM定位就很重要哦！
当节点属性发生变化时断点：将临时数据存储于DOM节点的自定义属性中，是很多开发者优先选择的方式。属性断点
当节点被移除时断点：通常情况是在执行&parentNode.removeChild(childNode)&语句的时候使用词方式，用的不多哦。
XHR Breakpoints：专为异步而生的断点调试功能，我们可以通过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件，当异步请求触发时的URL满足此条件，JS逻辑则会自动产生断点。
Event Listener Breakpoints:时间监听器断点，即根据名称进行断点设置。当事件被触发时，断点事件绑定的位置，事件监听器断点，列出了所有页面及脚本事件。极大的降低了事件方面业务逻辑的调试难度。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：11022次
排名：千里之外
原创：19篇
(1)(3)(2)(10)(6)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
网易杭州 QA Team
务实 专注 分享 做有态度的QA
LOFTER精选
网易考拉推荐
常用JS调试工具使用方法，帮你快速定位问题&&
17:28:19|&&分类：
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&A、功能讲解见上图，图中已标注出功能的五个关键点，下面顺序说明，先将Firebug切换到标注1中的JS调试功能Tab“脚本”上；打开标注2中的当前页面加载的所有静态JS链接资源，直接输入鼠标键入关键词就可以出现标注2下方文本框快速搜索打开需要的指定JS文件；以eq-commom.js为例，细心的同学应该已经发现页面加载的是压缩格式的JS文件，其实Firebug不仅提供了对行设置调试断点，也支持语句级的断点调试，所以压缩文件调试也无妨，只要选中相应语句右键即可，如下：&&&&&&&&&&但是大家一定同意这样调试是多么痛苦的一件事，当然特殊情况无可奈何时除外。解决这个问题首先得区分一下运行环境，如果是开发环境，可以改下环境配置从而让页面由加载eq-common.js的压缩文件改为加载eq-common-src.js的源格式文件。如果是线上环境查线上问题或是开发环境改配置比较麻烦，教大家一个懒而实用的方法，就是将eq-common-src.js的源格式文件内容贴到eq-common.js的压缩文件之中（当然线上环境需要要将线上静态加载资源绑定到本地）。当然这都是假定有源代码运行环境的前题之下的，如果没有Firebug就没有办法了，这也算是Firebug的一个不足之处（下面在IE的“开发人员工具”中会讲到对此的解决方案）。&&&&&&&&&最常用的断点基本有两种：行断点及条件断点。行断点模式最为常用，即在需要调试的行前点击加上断点即可，如下：这样程序运行到此处便会中断，在中断状态下可以如图进行多种操作和观察，包括：单步、逐过程、跳出（即跳到下一个断点）调试；对当前变量查看或进行监控，查看当前堆栈信息（这个在当前断点处存在问题时可以快速追溯来源），查看或重新设置管理断点（在这里也方便定位断点位置）；打个命令行功能，可以边调试边在当前状态下写脚本执行一些简单或更复杂的操作。&&&&&&&&&条件断点虽然没有行断点使用得那么多，但在一些情况下是非常有用的，顾名思义就是在程序的某个过程或语句在程序运行时满足一个特定条件下暂停。比如，在一个很大的for循环中有问题，但很多情况下是某些数据产生时有问题，如果在循环中采用行中断那就痛苦了，得一次循环一次循环地调试观察变量值定位问题。而条件断点则只需要在一个过程或语句上设置一个条件断点，当程序运行到此过程或语句且满足给定条件时程序就会中断暂停下来，省时省力，定位快速。如下图：&&&&&&&&&&所以根据场景不同，选择合适的调试模式。&&&&&&&&&二、IE“开发人员工具”&&&&&&&&&自IE8开始，在浏览器里就已经集成了“开发人员工具”（之前是IE7中需要单独安装，功能也没有现在这么强大），基本功能与Firebug类似，这里主要针对其调试功能说明一下。&&&&&&&&&&将上图与本文第一幅Firebug的基本操作界面图进行大致比较，很容易看出相互的调试功能基本相同，所以在此不再撰述。只是右侧多了一个显示当前断点局部变量当前情况的功能点，相比Firebug，随时可以观察或跟踪当前局部变量包括对象的数据信息，双击相应“值”列或点击右键都可以很方便地更改当前局部变量的值包括对象的属性值，同时也可以打开控制台来在当前局部环境中写入JS脚本来执行以实现更复杂的逻辑操作。&&&&&&&&&另外，其还支持模拟多个IE版本浏览器，极大方便了多IE浏览器的测试。可以指定当前IE浏览器以特定版本运行，又或是仅仅当前切换的页面以指定版本的IE浏览器运行。即“浏览器模式”或“文档模式”运行&& & & &&&&&&&&&&开启IE浏览器高度模式后，可以随时探测及定位当前浏览页面的脚本错误并在控制台中提示错误原因信息，如果问题还不明确，往往可以打开“调用堆栈”来查看出现错误的根源。&&&&&&&&&&此工具还有Firebug没有的一个非常好的功能，就是在调试之前对压缩或非压缩的当前页面JS格式化，并对格式化后的JS进行调试，这对于分析线上问题时是非常有用的，毕竟压缩后的JS文件调试起来让人感觉痛苦。&&&&&&&&&&&相比调试，以上似乎都是IE的“开发人员工具”比Firebug要使的几个点，但此工具也有其不足的地方，就是其DOM定位及样式处理方面不足，还需要辅助其它如IE Deweloper等软件，不如Firebug集成在一起来得方便；另外此工具不能象其它插件一样嵌入到浏览器窗口，总要来回切换窗口甚是麻烦，还有一个就是不能象Firebug那样多字母单词模糊搜索需要调试的JS文件，特别是在当前页面加载JS文件比较多的情况下，找起来比较麻烦，不过好在是按字母升序排列，见下图。&&
阅读(5178)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'常用JS调试工具使用方法，帮你快速定位问题',
blogAbstract:'&&&&这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具、方法、优点与不足以及一些调试相关功能要点或策略，分享给同学们，只当抛砖引玉了，欢迎大家讨论补充。&&&&&&&&&一、Firebug：如果项目可以支持Firefox',
blogTag:'',
blogUrl:'blog/static/8',
isPublished:1,
istop:false,
modifyTime:4,
publishTime:8,
permalink:'blog/static/8',
commentCount:4,
mainCommentCount:2,
recommendCount:0,
bsrk:-100,
publisherId:,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'网易杭州 QA Team\r\n\r\n\r\n\r\n务实 专注 分享 做有态度的QA',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}如何使用IE浏览器自带开发人员工具调试JS程序
如何使用IE浏览器自带开发人员工具调试JS程序？
创建日期：日
本例中是在“求和结果：”标签上绑定了JS的鼠标点击事件，当点击该标签时，便会触发JS点击事件函数。该函数的作用是：将获取到的第一个单行输入框与第二个单行输入框的值相加，并将两数之和赋值给第三个单行输入框输出。附上测试的点击事件函数的具体内容。如图所示：
以IE8浏览器为例，接下来重点介绍并演示如何使用浏览器自带的开发人员工具调试JS程序。（该工具快捷按钮为F12）
1、在工具->Internet选项->高级，去掉“禁用脚步调试（Internet Explorer）”项的勾选。如图所示：
2、去掉“显示友好http错误信息”项的勾选。最后点击应用，确定按钮。如图所示：
3、预览表单，当要执行的js程序出现错误时，浏览器会给出提示。如图所示：
4、在给出的错误提示窗口中，选择“是（Y）”按钮，进入IE浏览器自带的开发人员工具脚本调试界面，如图所示：
5、根据JS调试信息可以知道，当前JS报错是由于没有找到指定对象“dat”而导致的。我们需要在表单设计器中，修改JS程序并保存。因演示效果的需要，在本例中是没有设置id值为dat的单行输入框控件的，本例中第二个单行输入框控件的id值是data2。修改后的JS代码，如图所示：
6、将其改成值data2后，再进行测试不会出现JS报错信息，程序得以正常执行。如图所示：
7、本例只是演示了如何利用IE自带的开发人员工具进行简单的调试工作，如需了解其他调试及排查技巧，请参阅网络及相关书籍进行学习。用户名：My_King1
文章数：206
评论数：46
访问量：44483
注册日期：
阅读量：1297
阅读量：3317
阅读量：457090
阅读量：1141732
51CTO推荐博文
650) this.width=650;" title="firefox几个好用的js,css调试插件 - o咯YK`褂 - 菁华隐没YK芳流歇绝"
alt="firefox几个好用的js,css调试插件 - o咯YK`褂 - 菁华隐没YK芳流歇绝"
src="http://img.bimg.126.net/photo/iHMOwAWqtSxfzmahB3-TwQ==/8234552.jpg"
border='0'
width='449'
height='199'
>jfirefox几个好用的js,css调试插件1.FirebugFirebug无论是查看DOM结构、调节样式、调试JavaScript，Firebug都无愧是“拿莫温（NO.1）”。在FireFox3还是beta版的时候，Firebug就已经发布了全面支持FireFox3beta的版本。在FireFox3正式版中，依然有强劲的表现。安装下载：Firebug官方网站FireFox附加组件中心（版本更新慢）2.Web&Developer650) this.width=650;" title="firefox几个好用的js,css调试插件 - o咯YK`褂 - 菁华隐没YK芳流歇绝"
alt="firefox几个好用的js,css调试插件 - o咯YK`褂 - 菁华隐没YK芳流歇绝"
src="http://img.bimg.126.net/photo/5tpRPTorTSq8SHIXOOwVZw==/3091690.jpg"
border='0'
width='449'
height='199'
>仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口，就能一窥它的强大。推荐网页开发者和网页设计者使用，能够帮助你方便的对页面进行调整和完善。Firefox上开发和调试web站点的不二之选。Web&developer&toolbar包含了一系列工具，从cookie管理到CSS调试，从导航线到屏幕标尺，功能简直是多得说不完。&安装下载：Firebug中文安装（推荐英文不好安装）Web&Developer官方主页FireFox附加组件中心下载Web&Developer3.CSSViewer650) this.width=650;" title="firefox几个好用的js,css调试插件 - o咯YK`褂 - 菁华隐没YK芳流歇绝"
alt="firefox几个好用的js,css调试插件 - o咯YK`褂 - 菁华隐没YK芳流歇绝"
src="http://img.bimg.126.net/photo/N6E8BIGweYBYZaLnlQD34Q==/1244217.jpg"
border='0'
width='450'
height='200'
>简单易用的&CSS&查看器，可以方便的查看当前浏览页的各项&CSS。安装下载：https://addons.mozilla.org/zh-CN/firefox/search?q=CSSViewer&cat=allhttps://addons.mozilla.org/de/firefox/downloads/file/30.650) this.width=650;" title="firefox几个好用的js,css调试插件 - o咯YK`褂 - 菁华隐没YK芳流歇绝"
alt="firefox几个好用的js,css调试插件 - o咯YK`褂 - 菁华隐没YK芳流歇绝"
src="http://img.bimg.126.net/photo/jHZUqyh51gwaO6eTGb_byg==/1244218.jpg"
border='0'
width='449'
height='199'
>一个基于Mozilla的浏览器的JavaScript调试环境，是Mozilla浏览器的一个扩展。Venkman基于Mozilla&JavaScript调试API（js/jsd），js/jsd&API&构成了&Netscape&JavaScript&Debugger&1.1的基础，Netscape浏览器4.x系统都提供了这个调试工具。Venkman是目前比较流行的JavaScript调试工具。强烈推荐这个刚下&载了一个Mozilla免费调试器&JavaScript&Debugger。这个调试器的前身为Netscape的JavaScript调试器，它是Mozilla的一个附加产品。Venkman&JavaScript调试器既是一个图形，也是一个控制台调试器。安装下载：https://addons.mozilla.org/zh-CN/firefox/addon/216https://addons.mozilla.org/zh-CN/firefox/search?q=JavaScript+Debugger&cat=all本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)A& 使用alert() 和document.write() 方法监视变量值如果要中断代码的运行，监视变量的值，则使用alert() 方法；如果需要查看的值很多，则使用document.write() 方法，避免反复单击“确定”按钮；&B& 使用window.onerror 事件当页面出现异常时，onerror 事件会在window 对象上触发。它能在一定程度上告诉开发者相关的错误信息。示例：&&&script&type="text/javascript"&&&&&function&myerror(_message,_url,_line)&&&&{&&&&&&&alert("错误信息："&+&_message&&&&&&&&&&&&+"\n错误的URI："&+&_url&&&&&&&&&&&&+"\n错误的行数："&+&_line&&&&&&&);&&&&&&&&return&true;&//屏蔽系统的事件&&&&}&&&&//绑定错误事件&&&&window.onerror&=&myerror;&&&&&//触发错误示例：&&&&window,onload&=&test;&&&/script&注意：在IE 中，触发error 事件后，正常的代码会继续运行，所有的变量和数据都会保存下来，在其onerror 事件处理方法中可以正常访问到；而在Firefox 中，触发error 事件后，一切都结束，所有的变量和数据都将被销毁。&C& 使用 try...catch 语句找错误示例：&&&script&type="text/javascript"&&&&&&try&&&&&{&&&&&&&&&alert(触发异常);&&&&&}&&&&&catch&(_ex)&//可以省略“_ex”参数&&&&&{&&&&&&&&var&err&=&"错误信息";&&&&&&&&for&(var&i&in&_ex)&&&&&&&&{&&&&&&&&&&&err&+=&"\n参数名："&+&i&&&&&&&&&&&&&&&&+&"\t参数值："&+&_ex[i];&&&&&&&&}&&&&&&&&alert(err);&//打印错误&&&&&}&&&&&finally&&//finally&可以被省略...&&&&{&&&&&&&alert("finally&总是会运行");&&&&}&&&/script&注意：try...catch 并不能很好的处理JavaScript 的语法错误。示例：&&&script&type="text/javascript"&&&&&try&&&&{&&&&&&&&alert("触发语法错误"));&//多了半边“)”&&&&}&&&&catch&(_ex)&//可以省略_ex参数&&&&{&&&&&&&var&err&=&"错误信息";&&&&&&&for&(var&i&in&_ex)&&&&&&&{&&&&&&&&&&err&+=&"\n参数名："&+&i&&&&&&&&&&&&&&&+&"\t参数值："&+&_ex[i];&&&&&&&&}&&&&&&&alert(err);&//打印错误&&&&}&&&/script&该示例并没有进入catch 块中。&D& 使用相关调试器在IE 和Firefox 浏览器中，可以使用相关的调试器或插件对JavaScript 进行调试。&●&&在Firefox 浏览器中，可以使用其自带的“错误控制台”。操作步骤如下：&&&&& 打开Firefox 浏览器 → 在菜单条“工具”中 → 选择“错误控制台”即可。&&&& 在没有其他插件的情况下，其自带的“错误控制台”是一个非常不错的选择。&另外，在Firefox 浏览器中，还有一些很不错的调试器，如：Venkman、Firebug 等。&&&&&&&& Venkman 调试器安装后，可以在Firefox 浏览器 → 在菜单条“工具”中 → 选择“JavaScript& Debugger ”命令启用；&&&&&&&& Firebug 调试器安装后，可以在Firefox 浏览器 → 在菜单条“工具”中 → 选择“Firebug”→ 选择“打开 Firebug”即可；&●&&在IE 浏览器中，可以使用 Microsoft& Script& Debugger 调试器&&&&&& Microsoft& Script& Debugger 是微软随IE 4 一同发布的一个IE插件，可以从微软的官方网站上免费下载。&&&&&&&下载安装以后，必须将IE 浏览器的调试选项打开才能使用。操作步骤如下：&&&&&& 1&&& 打开IE 浏览器 → 选择菜单栏的“工具”→ “Internet 选项”命令 → “高级”选项卡 → 将“禁用脚本调试（Internet Explorer ）”复选框中的勾去掉即可。&&&&&& 2&&& 当IE 浏览器正在浏览页面时，运行Microsoft& Script& Debugger 调试器工具即可进行调试。&&&&&& 在Microsoft& Script& Debugger 调试器的 Running& Document 面板中选择开启的页面文件（只读），然后按F9 可以设置断点调试。另外，其Command& Window 面板也是一个很有用的功能，它能在代码断点停止时，在其中输入变量名并回车，便可看到此时变量的值；Command& Window 面板甚至可以接受简单的JavaScript 命令。但Microsoft& Script& Debugger 调试器自身还存在一个bug 问题。
阅读(...) 评论()