菜单

Chrome调节台 怎么样调节和测验Javascript

2019年9月22日 - jQuery

Chrome调控台 怎么样调节和测量检验Javascript

2015/01/12 · JavaScript
· Chrome

初稿出处:
ctriphire   

地点的文章曾经大致介绍了一下console对象实际有哪些方面以及基本的应用,上面简要介绍一下哪些使用好chrome调整台那一个神器好好调节和测量检验javascript代码(那么些才是我们的确能用到实处的地点)

1、先说一下源码定位

世家开荒测验网页 
 看到页面右下方有三个推荐的Logo吗?右击推荐Logo,接纳调查成分,张开谷歌调节台,如下图所示

图片 1

我们先天想明白votePost方法到底在哪?跟着笔者这样做,在Console面板里面输入votePost然后回车

图片 2

直接点击上海体育场地标红的链接,调控台将固定到Sources面板中,体现如下图所示

图片 3

咱们看了下面那么些图形之后估量头都要晕了吗,这么多js都整在一行,令人怎么看呀,不用操心,按下图操作就可以(也正是点击中间面板左下方的Pretty
print就行了)

图片 4

那时候大家再重返Console面板时会惊喜的觉察原本的链接后边的1今后成为91了(其实这里的数字1要么91就是表示votePost方法在源码中的行号
)今后见到Pretty print按键的雄强之处了吧

掌握了怎么查看某三个开关的源码,那接下去的劳作正是调弄整理了,调节和测量试验第一步供给做的正是设置断点,其实设置断点很简短,点击一下上海教室所示的92就可以,那时你会发觉92行号旁边会多了多少个Logo,这里解释一下为何不在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 面板, 选中一个成分, 然后在左边的 Event Listeners
上边会按类型出那几个成分相关的平地风波,
相当于在事件捕获和冒泡阶段会由此的那些节点的事件.

在 Event Listeners 左侧下拉开关中能够选拔 Selected Node Only
只列出那么些节点上的轩然大波

进行事件后会显示出那一个事件是在哪些文件中绑定的,
点击文件名会直接跳到绑定事件管理函数所在行, 假如 js 是减掉了的, 能够先
Pretty print 下, 然后再查看绑定的事件.

图片 11

3. Ajax 时中断

在 Scripts 面板右边有个 XHOdyssey 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 Event 事件中断

在 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奥迪Q5L=filename.js, 会在
Scripts 面板中有个叫 filename.js 的公文, 然后他就和外界 js 文件一律了

图片 16

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

相关文章

发表评论

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

网站地图xml地图