菜单

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

2019年11月21日 - 皇家前端

Chrome调整台 怎么着调节和测量检验Javascript

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

上面的小说现已大约介绍了须臾间console对象实际有哪些方面以至着力的接受,上面简要介绍一下如何行使好chrome调节台那么些神器好好调节和测量试验javascript代码(这几个才是我们真的能用到实处之处卡塔 尔(阿拉伯语:قطر‎

1、先说一下源码定位

世家开发测量试验网页 
 看见页面右下方有三个推介的图标吗?右击推荐Logo,选用考察成分,张开Google调整台,如下图所示

图片 1

我们将来想了然votePost方法到底在哪?跟着笔者那样做,在Console面板里面输入votePost然后回车

图片 2

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

图片 3

大家看了下面这么些图形之后估量头都要晕了呢,这么多js都整在生机勃勃行,令人怎么看呀,不用忧虑,按下图操作就可以(约等于点击中间面板左下方的Pretty
print就能够了卡塔 尔(阿拉伯语:قطر‎

图片 4

当时大家再回来Console面板时会惊喜的开采原来的链接前边的1今后成为91了(其实这里的数字1或许91正是象征votePost方法在源码中的行号
卡塔 尔(英语:State of Qatar)以后观看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

相关文章

发表评论

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

网站地图xml地图