yzc191亚洲城官网:调试参考,如何调试Javascript

Chrome控制台 怎么着调试Javascript

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

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

一 、先说一下源码定位

大家开拓测试网页 
 看到页面右下方有一个推荐的图标吗?右击推荐图标,接纳审查成分,打开谷歌控制台,如下图所示

yzc191亚洲城官网 1

大家前天想通晓votePost方法到底在哪?跟着本人这样做,在Console面板里面输入votePost然后回车

yzc191亚洲城官网 2

一贯点击上图标红的链接,控制台将稳定到Sources面板中,展现如下图所示

yzc191亚洲城官网 3

yzc191亚洲城官网:调试参考,如何调试Javascript。大家看了地方那么些图形之后估算头都要晕了呢,这么多js都整在一行,让人怎么看呀,不用操心,按下图操作即可(约等于点击中间面板左下方的Pretty
print就行了)

yzc191亚洲城官网 4

此时大家再回去Console面板时会惊奇的觉察原来的链接前边的1以往成为91了(其实那里的数字1只怕91就是象征votePost方法在源码中的行号
)今后观看Pretty print按钮的强劲之处了吗

了解了如何查看某三个按钮的源码,那接下去的劳作便是调剂了,调试第③步需求做的便是设置断点,其实设置断点很简单,点击一下上图所示的92即可,那时你会意识92行号旁边会多了2个图标,那里解释一下为啥不在91处安装断点,你可以试下,事实上根本就无法在91处上安装断点,因为它是函数的定义处,所以没办法在此设置断点。

yzc191亚洲城官网 5

设置好了断点后,你就会在右侧Breakpoints方框里看看刚刚安装的断点。

我们先来介绍一下用到的调节迅速键吧(事实上大家也得以不要下表所示的快速键,间接点击上图所示左侧栏最上层的一排按钮来进展调节,具体用哪个按钮,把鼠标放到按钮上方一会就会显得它对应的升迁)

 

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

内部值得一提的是,当大家点击“推荐”按钮举行调剂的时候会发现,不管大家是按的F10举行调试照旧按F11开展逐级调试,都没办法展开$.ajax函数内部,尽管大家在函数内部安装了断点也向来不主意进去,这里按F8才是实在起成效的,不信你试试。

当大家在调节的时候,左侧Scope
Variables里面会显得当前成效域以及她的父级效率域,以及闭包。你不仅能在右边Scope Variables(变量成效域)
一栏处看到日前变量,而且还能把鼠标直接移到自由变量上,就可以查阅该变量的值。

用图说话(哈哈)

yzc191亚洲城官网 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]); // 获取绑定的事件

一般来说图所示:

yzc191亚洲城官网 7

鲁人持竿上述介绍的法子定位到具体的blog-common.js里面,找到postComment
 然后一文彩四溢的找到具体的代码,再安装断点就好了。

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

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

赞 1 收藏
评论

yzc191亚洲城官网 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
须要结合浏览器断点操作,具体可知小编的上一篇文章: 运用断点调试代码。

yzc191亚洲城官网 9

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


世家可以看来控制台里面有一首诗还有其余音讯,假使想清空控制台,可以点击左上角那一个yzc191亚洲城官网 10来清空,当然也得以经过在控制台输入console.clear()来促成清空控制台音信。如下图所示

1. Beautify Javascript

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

yzc191亚洲城官网 11

yzc191亚洲城官网 12

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

yzc191亚洲城官网 13

2. 翻看成分绑定了什么事件

在 Elements 面板, 选中1个成分, 然后在右边的 伊夫nt Listeners
下边会按类型出这一个成分相关的风云,
约等于在事件捕获和冒泡阶段会经过的那么些节点的事件.

在 伊芙nt Listeners 右边下拉按钮中得以挑选 Selected Node Only
只列出那一个节点上的风云

举办事件后会呈现出这一个事件是在哪个文件中绑定的,
点击文件名会直接跳到绑定事件处理函数所在行, 借使 js 是减掉了的, 可以先
Pretty print 下, 然后再查看绑定的事件.

yzc191亚洲城官网 14

yzc191亚洲城官网 15

未来假若壹个现象,若是几个数组里面有不可胜道的成分,不过你想清楚各种元素具体的值,那时候想想如若你用alert那将是多惨的一件事情,因为alert阻断线程运维,你不点击alert框的规定按钮下七个alert就不会现出。

3. Ajax 时中断

在 Scripts 面板右边有个 XH锐界 Breakpoints, 点右边的 + 会添加三个 xhr 断点,
断点是按照 xhr 的 url 匹配中断的, 假若不写匹配规则会在装有 ajax,
那几个匹配只是简短的字符串查找, 发送前半涂而废, 在暂停后再在 Call Stack
中查阅时非常地点倡导的 ajax 请求

从左到右分别是:

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

4. 页面事件中断

除却给设定常规断点外, 还能在某一一定事件时有发生时暂停(不针对成分) , 在
Scripts 面板左侧, 有个 伊芙nt Listener Breakpoints,
那里列出了帮助的全体事件, 不仅 click, keyup 等事件, 还扶助 Timer(在
setTimeout setInterval 处理函数开首进行时暂停), onload, scroll 等事件.

yzc191亚洲城官网 16

Pause/Resume script
execution:暂停/恢复生机脚本执行(程序执行到下一断点截止)。

yzc191亚洲城官网 17

发表评论

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

网站地图xml地图