菜单

Chrome 控制台调试技巧(转)

2019年2月22日 - jQuery

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按钮的无敌之处了吗

略知一二了哪些查看某2个按钮的源码,那接下去的做事便是调节了,调试第三步需求做的便是安装断点,其实设置断点很简单,点击一下上图所示的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

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

图片 9

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 中断

图片 10

9. 实时修改 js 代码生效

那篇小说是基于当下 chrome 稳定版(19.0.1084.52 m)写的, 因为 google
也在不断善chrome developer tool, 所以 chrome 版本差异或者稍不完全相同.
一些迅速键也是 windows 上的, mac 下的应当焦作小异.

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

5. Javascript 分外时刹车

Pretty print 左边的按钮是敞开 js 抛万分时停顿的开关,
有两种形式:在富有尤其处中断, 在未捕获的越发处中断.
在十三分处中断后就足以查阅为啥抛出尤其了

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

1. Beautify Javascript

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

图片 11

图片 12

10. console 中推行的代码可断点

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

图片 13

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

4. 页面事件中断

除去给设定常规断点外, 还足以在某一特定事件时有暴发时停顿(不对准成分) , 在
Scripts 面板左侧, 有个 伊夫nt Listener Breakpoints,
那里列出了支撑的兼具事件, 不仅 click, keyup 等事件, 还辅助 Timer(在
setTimeout setInterval 处理函数初叶履行时暂停), onload, scroll 等事件.

图片 14

8. command line api

图片 15

3. Ajax 时中断

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

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

在 Elements 面板, 选中3个要素, 然后在左侧的 伊芙nt Listeners
上边会按类型出这么些成分相关的事件,
也等于在事件捕获和冒泡阶段会经过的这几个节点的事件.

在 伊夫nt Listeners 左侧下拉按钮中能够挑选 Selected Node Only
只列出那些节点上的风云

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

图片 16

相关文章

发表评论

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

网站地图xml地图