Chrome 控制台调节和测试技巧(转)

Chrome控制台 怎么样调节和测试Javascript

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

地点的文章业已大约介绍了弹指间console对象实际有哪些方面以及着力的利用,上面不难介绍一下哪些选拔好chrome控制台这些神器好好调节和测试javascript代码(那些才是我们实在能用到实处的地点)

① 、先说一下源码定位

大家开辟测试网页 
 看到页面右下方有一个引进的图标吗?右击推荐图标,选拔审查成分,打开谷歌(谷歌)控制台,如下图所示

图片 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 面板, 选中多少个成分, 然后在左边的 伊夫nt Listeners
上边会按类型出那一个因素相关的风云,
相当于在事变捕获和冒泡阶段会通过的那个节点的事件.

在 伊夫nt Listeners 右侧下拉按钮中得以采取 Selected Node Only
只列出这些节点上的事件

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

图片 11

3. Ajax 时中断

在 Scripts 面板左边有个 XHRubicon Breakpoints, 点左侧的 + 会添加2个 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 函数定义

  • 在 chrome developer tool 打开的事态下, 按 ctrl + shift + F, 在通过
    js 钩子查找代码地点时很有用, 查找支持正则表达式
  • 追寻函数定义: ctrl + shift + 0 (在 Scripts panel 下)
  • 查找文件: ctrl + o  (在 Scripts panel 下)
  • 更加多神速键: 在 chrome developer tool 中按 ? 查看帮忙

图片 14

8. command line api

  • $(id_selector) 那个与页面是还是不是有 jQuery 无关
  • $$(css_selector)
  • $0, $1, $2, $3, $4
    1. Elements 面板中近年来入选的 5 个因素, 最终选项的是 $0
    2. 本条 5 个变量时先进先出的
  • copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
  • monitorEvents(object[, types])/unmonitorEvents(object[, types])
    1. 当 object 上 types 事件时有产生时在 console 中输出 event 对象
  • 更多 console api 请 console.log(console)
    或 点击
  • 更多 command line
    api 点击

图片 15

9. 实时修改 js 代码生效

  • 页面外部 js 文件在 Scripts 面板中能够直接修改, 改完后按 ctrl + S
    保存, 会马上生效
  • 注意
    1. 经测试不支持 html 页面中 js 修改
    2. 由此 Pretty print 格式化的剧本不扶助修改

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

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

图片 16

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

发表评论

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

网站地图xml地图