当前位置:3016.com-金沙城中心官网 > 前端 > Chrome控制台 如何调试Javascript

Chrome控制台 如何调试Javascript

文章作者:前端 上传时间:2019-10-11

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

2015/01/12 · JavaScript · Chrome

原来的文章出处: ctriphire   

地方的篇章早已大致介绍了一晃console对象实际有哪些方面以致着力的施用,下边简要介绍一下什么样行使好chrome调控台这一个神器好好调节和测量试验javascript代码(那几个才是大家实在能用到实处的地点)

1、先说一下源码定位

世家开辟测量试验网页   见到页面右下方有二个推荐介绍的Logo吗?右击推荐Logo,选用检查核对成分,张开Google调节台,如下图所示

图片 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  然后一薄薄的找到具体的代码,再安装断点就好了。

末段介绍一下一个神器,很好用的debugger

一经您本人写的代码,你实施的时候想让它在某一处停下来,只要写上的debugger就好了,不相信你试试!哈哈

赞 1 收藏 评论

图片 8

本文由3016.com-金沙城中心官网发布于前端,转载请注明出处:Chrome控制台 如何调试Javascript

关键词: