菜单

Chrome 控制台调试技巧(转)

2019年2月18日 - CSS/CSS3

Chrome控制台 如何调试Javascript

2015/01/12 · JavaScript
· Chrome

初稿出处:
ctriphire   

地点的稿子业已大致介绍了须臾间console对象实际有哪些方面以及基本的拔取,上面简单介绍一下如何选择好chrome控制台这么些神器好好调试javascript代码(这几个才是我们实在能用到实处的地点)

一 、先说一下源码定位

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

图片 1

小编们以后想精晓votePost方法到底在哪?跟着作者这么做,在Console面板里面输入votePost然后回车

图片 2

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

图片 3

我们看了地点那么些图形之后估摸头都要晕了啊,这么多js都整在一行,令人怎么看呀,不用顾虑,按下图操作即可(相当于点击中间面板左下方的Pretty
print就行了)

图片 4

此刻大家再重返Console面板时会惊奇的发现原本的链接前面的1现在改为91了(其实这里的数字1可能91就是象征votePost方法在源码中的行号
)未来看看Pretty print按钮的强劲之处了吗

理解了什么样查看某五个按钮的源码,那接下去的办事便是调节了,调试第二步需求做的便是安装断点,其实设置断点很粗略,点击一下上图所示的92即可,那时你会发觉92行号旁边会多了2个图标,那里解释一下为何不在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

来源:http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool/  
 多谢我分享~~·

那篇作品是依照当前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google
也在相连善chrome developer tool, 所以 chrome 版本不相同可能稍互差距.
一些快捷键也是 windows 上的, mac 下的应当日照小异.

好端端的断点相关的
breakpoint/conditional-breakpoint/call-stack/watch-expressions
等就不关乎了.

1. Beautify Javascript

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

图片 9

图片 10

2. 翻看成分绑定了哪些事件

在 Elements 面板, 选中1个成分, 然后在左侧的 伊夫nt Listeners
上面会按类型出那么些成分相关的风云,
也等于在事变捕获和冒泡阶段会透过的那几个节点的事件.

在 伊芙nt Listeners 右边下拉按钮中可以挑选 Selected Node Only
只列出那些节点上的轩然大波

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

图片 11

3. Ajax 时中断

在 Scripts 面板左侧有个 XH奥迪Q3 Breakpoints, 点左侧的 + 会添加3个 xhr 断点,
断点是依照 xhr 的 url 匹配中断的, 要是不写匹配规则会在享有 ajax,
这一个匹配只是不难的字符串查找, 发送前中断, 在刹车后再在 Call Stack
中查看时拾叁分地点倡导的 ajax 请求

4. 页面事件中断

除去给设定常规断点外, 还足以在某一一定事件时有暴发时暂停(不针对成分) , 在
Scripts 面板左侧, 有个 伊芙nt Listener Breakpoints,
那里列出了辅助的装有事件, 不仅 click, keyup 等事件, 还帮忙 Timer(在
setTimeout setInterval 处理函数先河进行时刹车), onload, scroll 等事件.

图片 12

5. Javascript 很是时暂停

Pretty print 右侧的按钮是打开 js 抛万分时停顿的开关,
有二种方式:在全部尤其处中断, 在未捕获的不行处中断.
在老大处中断后就可以查阅为啥抛出极度了

6. DOM Level 3 伊夫nt 事件中断

在 Elements 面板, 选中壹个成分右键, 有两个选项:Break on subtree
modifications, Break on attributes modifications, 那八个对应 DOM Level 3
伊芙nt
中的DOMSubtreeModified , DOMSubtreeModified 事件
在 Scripts 面板 DOM Breakpoints 处会列出具有 level3 的 event 中断

图片 13

7. 独具 js 文件中寻觅&查找 js 函数定义

图片 14

8. command line api

图片 15

9. 实时修改 js 代码生效

10. console 中实践的代码可断点

在 console 中输入代码的最后一行加上 //@ sourceUPRADOL=filename.js, 会在
Scripts 面板中有个叫 filename.js 的公文, 然后他就和表面 js 文件一律了

图片 16

function hello() {
  alert('say hi');
}
//@ sourceURL=hello.js

相关文章

发表评论

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

网站地图xml地图