菜单

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

2019年2月25日 - Html/Html5

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行号旁边会多了二个图标,那里解释一下为啥不在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
 然后一难得的找到实际的代码,再设置断点就好了。

最后介绍一下3个神器,很好用的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 面板左边有个 XHCRUISER Breakpoints, 点左侧的 + 会添加多少个 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 中输入代码的结尾一行加上 //@ sourceU中华VL=filename.js, 会在
Scripts 面板中有个叫 filename.js 的公文, 然后她就和表面 js 文件一律了

图片 16

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

相关文章

发表评论

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

网站地图xml地图