如何调试Javascript,控制台调试技巧

如何调试Javascript,控制台调试技巧。Chrome控制台 如何调试Javascript

2015/01/12 · JavaScript
· Chrome

原文出处:
ctriphire   

上边的篇章早就大致介绍了一下console对象实际有哪些方面以及着力的使用,上边不难介绍一下什么样利用好chrome控制台这几个神器好好调试javascript代码(这几个才是大家的确能用到实处的地方)

1、先说一下源码定位

世家开辟测试网页 
 看到页面右下方有一个推荐的图标吗?右击推荐图标,拔取审查元素,打开谷歌(Google)控制台,如下图所示

图片 1

俺们现在想驾驭votePost方法到底在哪?跟着我如此做,在Console面板里面输入votePost然后回车

图片 2

直白点击上图标红的链接,控制台将定位到Sources面板中,突显如下图所示

图片 3

我们看了地点那个图片之后推断头都要晕了吗,这么多js都整在一行,令人怎么看呀,不用操心,按下图操作即可(也就是点击中间面板左下方的Pretty
print就行了)

图片 4

此刻大家再回到Console面板时会惊奇的发现原本的链接前边的1现在成为91了(其实那里的数字1要么91就是意味着votePost方法在源码中的行号
)现在看到Pretty print按钮的兵不血刃之处了啊

领会了什么查看某一个按钮的源码,那接下去的行事便是调剂了,调试第一步需要做的便是设置断点,其实设置断点很容易,点击一下上图所示的92即可,那时你会意识92行号旁边会多了一个图标,那里解释一下为啥不在91处安装断点,你可以试下,事实上根本就心急火燎在91处上设置断点,因为它是函数的定义处,所以不得已在此设置断点。

图片 5

安装好了断点后,你就会在右手Breakpoints方框里见到刚刚安装的断点。

大家先来介绍一下用到的调剂飞速键吧(事实上大家也得以不要下表所示的火速键,直接点击上图所示右边栏最上层的一排按钮来进展调剂,具体用哪些按钮,把鼠标放到按钮上方一会就会来得它对应的升迁)

 

快捷键 功能
F8 恢复运行
F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11 步入,遇到自定义函数就跟入到函数内部
Shift + F11 步出,跳出当前自定义函数

其间值得一提的是,当我们点击“推荐”按钮举行调试的时候会意识,不管大家是按的F10举行调剂仍旧按F11举行逐步调试,都没办法展开$.ajax函数内部,即使大家在函数内部安装了断点也不曾办法进去,那里按F8才是当真起效果的,不信你尝试。

当我们在调节的时候,右边Scope
Variables里面会显示当前成效域以及他的父级效率域,以及闭包。你不仅仅能在左侧Scope Variables(变量作用域)
一栏处看到眼前变量,而且仍能把鼠标直接移到任意变量上,就足以查看该变量的值。

用图说话(哈哈)

图片 6

 

恰恰大家介绍的只是在html里面可以看收获它绑定了onclick事件,那样我们就找到它绑定的js函数,即使它是在jQuery页面加载成功函数里面绑定的,那时候大家怎么明白它绑定的是哪些js函数呢,如若我们不通晓绑定的js函数就更是不用说调试进去了

上边介绍一下怎么查看,仍然以刚刚那么些测试网页为例子吗,可是这一次我们来看“提交评论”作注脚呢,

右击“提交评论”–>审核元素,大家能够领略的寓目在这几个按钮上未绑定任何事件。在Console面板内输入如下代码

JavaScript

function lookEvents (elem) { return $.data ? $.data( elem, “events”,
undefined, true ) : $._data( elem, “events” ); } var event =
lookEvents($(“#btn_comment_submit”)[0]); // 获取绑定的事件

1
2
3
4
function lookEvents (elem) {
    return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

一般来说图所示:

图片 7

按部就班上述介绍的措施定位到具体的blog-common.js里面,找到postComment
 然后一不可多得的找到实际的代码,再设置断点就好了。

终极介绍一下一个神器,很好用的debugger

一经您自己写的代码,你执行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你尝试!哈哈

赞 1 收藏
评论

图片 8

来源:  
 感谢小编分享~~·

此文章翻译自developers.google.com/web/tools/chrome-devtools/javascript/reference,是对
chrome 下调试 javascript 的工具和章程介绍。

先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松的开辟控制台

那篇小说是依照当前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google
也在相连善chrome developer tool, 所以 chrome 版本分裂或许稍不一样.
一些火速键也是 windows 上的, mac 下的应当三明小异.

调剂 js
需求组合浏览器断点操作,具体可见我的上一篇小说: 采纳断点调试代码。

图片 9

常规的断点相关的
breakpoint/conditional-breakpoint/call-stack/watch-expressions
等就不涉及了.


世家可以看看控制台里面有一首诗还有其余新闻,若是想清空控制台,可以点击左上角那多少个图片 10来清空,当然也足以经过在支配台输入console.clear()来兑现清空控制台音讯。如下图所示

1. Beautify Javascript

js 文件在上线前一般都会缩减下, 压缩的 javascript 大致没有可读性,
几乎不可能设定断点. 在 Scripts 面板上面有个 Pretty print 按钮(这种标记
{}), 点击会将削减 js 文件格式化缩进规整的公文,
那时候在设定断点可读性就大大提高了.

图片 11

图片 12

打上断点之后,必要操作对应图标进行调试,图标如下:

图片 13

2. 翻看元素绑定了什么样事件

在 Elements 面板, 选中一个因素, 然后在左侧的 伊芙nt Listeners
上面会按类型出那么些因素相关的轩然大波,
也就是在事变捕获和冒泡阶段会透过的这么些节点的事件.

在 伊芙nt Listeners 左边下拉按钮中得以拔取 Selected Node Only
只列出那些节点上的轩然大波

展开事件后会突显出那些事件是在哪些文件中绑定的,
点击文件名会直接跳到绑定事件处理函数所在行, 借使 js 是缩减了的, 可以先
Pretty print 下, 然后再查看绑定的事件.

图片 14

图片 15

现行一经一个场地,如果一个数组里面有诸多的元素,可是你想清楚各类元素具体的值,那时候想想倘诺您用alert那将是多惨的一件业务,因为alert阻断线程运行,你不点击alert框的规定按钮下一个alert就不会油可是生。

3. Ajax 时中断

在 Scripts 面板右边有个 XHR Breakpoints, 点左边的 + 会添加一个 xhr 断点,
断点是依照 xhr 的 url 匹配中断的, 若是不写匹配规则会在具有 ajax,
这几个匹配只是简短的字符串查找, 发送前中断, 在暂停后再在 Call Stack
中查看时更加地点倡导的 ajax 请求

从左到右分别是:

上边大家用console.log来替换,感受一下它的魅力。

4. 页面事件中断

除了给设定常规断点外, 仍可以在某一一定事件暴发时停顿(不针对元素) , 在
Scripts 面板左侧, 有个 伊芙nt Listener Breakpoints,
那里列出了支撑的具备事件, 不仅 click, keyup 等事件, 还辅助 提姆er(在
set提姆eout setInterval 处理函数开端进行时暂停), onload, scroll 等事件.

图片 16

Pause/Resume script
execution:暂停/復苏脚本执行(程序执行到下一断点甘休)。

图片 17

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website