奥门金沙手机娱乐网址 22

js调节和测验体系 断点与动态调解[基本功篇]_javascript技能_脚本之家奥门金沙手机娱乐网址

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行号旁边会多了三个Logo,这里解释一下为啥不在91处设置断点,你能够试下,事实上根本就无语在91处上设置断点,因为它是函数的定义处,所以不得已在那设置断点。

奥门金沙手机娱乐网址 5

设置好了断点后,你就能够在侧边Breakpoints方框里看见刚刚安装的断点。

咱俩先来介绍一下用到的调节和测量试验飞快键吧(事实上大家也能够不用下表所示的急速键,间接点击上图所示侧面栏最上层的一排按键来开展调节和测量试验,具体用哪个开关,把鼠标放到开关上方一会就能够显得它对应的提醒)

 

快捷键 功能
F8 恢复运行
F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11 步入,遇到自定义函数就跟入到函数内部
Shift + F11 步出,跳出当前自定义函数

中间值得风流倜傥提的是,当大家点击“推荐”开关进行调节和测验的时候会发觉,不管我们是按的F10进行调养依旧按F11展开稳步调节和测量试验,都没有办法展开$.ajax函数内部,纵然大家在函数内部安装了断点也绝非主意进去,这里按F8才是确实起效能的,不相信你尝试。

当大家在调节和测量试验的时候,左边Scope
Variables里面会来妥当前功能域以致她的父级效能域,以致闭包。你不仅能在侧面Scope Variables(变量功效域卡塔尔(英语:State of Qatar)豆蔻梢头栏处见到日前变量,何况还能够把鼠标直接移到跋扈变量上,就能够查阅该变量的值。

用图说话(哈哈)

奥门金沙手机娱乐网址 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

 

上几篇文章已经为大家介绍了js调节和测量检验种类的一些根基知识,此番乱码兄弟为大家带来了js断点与动态调节和测量检验方法,供给的对象能够仿照效法下

读书目录

昨天留的课后练习 1. 解析 votePost 函数是何等兑现 推荐
的。其实我们早就看到了源码,只要读下源码就可以以知道道他是怎么贯彻的了。

  • 写在前面
  • Google调节台Elements面板
  • 翻开成分上绑定的事体
  • 体制操作
  • 总况
  • console.log
  • console.info
  • console.error
  • console.warn
  • console.debug
  • console.dirxml
  • console.group和console.groupEnd
  • console.assert
  • console.count
  • console.dir
  • console.time和console.timeEnd
  • console.profile和console.profileEnd
  • console.timeLine和console.timeLineEnd
  • console.trace
  • 方向键盘的上下键
  • $_
  • Chrome
    调控桃园原生协理类jQuery的选拔器
  • copy
  • keys和values
  • console.table
  • monitor &
    unmonitor
  • Console.log样式
  • 只要您感觉本篇博文对你有所感悟,感到小女人还算精心,请点击右下角的
    [推荐],谢谢!
function votePost { i || ; var r = { blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: i }; $.css.html; $.ajax({ url: "/mvc/vote/VoteBlogPost.aspx", type: "post", dataType: "json", contentType: "application/json; charset=utf-8", data: JSON.stringify, success: function { var i = $ + "_count"); r.isAbandoned ? $.html.html + 1) } $.html }, error: function { n.status > 0 && (n.status == 500 ? $.html("抱歉!发生了错误!麻烦反馈至contact@cnblogs.com") : $.html; }

回去最上部

基本上就那一个样子的。ps: 作者用的是 sublime text
格式化的代码,和chrome调节台格式化后的结果有一些分裂。也得以推行这几个在线格式化学工业具,效果差不离:Online
JavaScript beautifier

写在前面

我们都有用过各种类型的浏览器,每一种浏览器都有和煦的特征,自身拙见,在自家用过的浏览器此中,小编是最赏识Chrome的,因为它对于调节和测量试验脚本及前端设计调节和测量检验都有它比此外浏览器过为已甚的地点。或然大家对console.log会有必然的问询,心里难免会想调节和测量检验的时候用alert不就可以了,干嘛还要用console.log这么一长串的字符串来代替alert输出信息呢,下边小编就介绍部分调节和测量检验的入门本领,让您爱上console.log

先的简便介绍一下chrome的调整台,张开chrome浏览器,按f12就能够轻易的展开调控台

奥门金沙手机娱乐网址 9

世家能够见见调整台里面有意气风发首诗还恐怕有其它音信,如若想清空气调节器整台,能够点击左上角这么些奥门金沙手机娱乐网址 10来清空,当然也足以透过在调控台输入console.clear(卡塔尔(英语:State of Qatar)来落实清中央空调控台音讯。如下图所示

奥门金沙手机娱乐网址 11

当今假若二个气象,如若三个数组里面有好些个的因素,但是你想明白种种元素具体的值,那时想一想固然您用alert那将是多惨的后生可畏件职业,因为alert阻断线程运维,你不点击alert框的分明开关下贰个alert就不会并发。

上边大家用console.log来替换,心得一下它的魅力。

奥门金沙手机娱乐网址 12

在console面板中输入指令时,能够动用Shift+Enter换行,Tab键来自动补全

看了上边这张图,是还是不是意识到log的精锐之处了,下边大家来走访console里面具体提供了什么措施能够供我们一向调节和测量检验时选取。

奥门金沙手机娱乐网址 13

1、先说一下源码定位

我们打开测量试验网页  
见到页面右下方有二个引入的Logo吗?右击推荐Logo,选择审核成分,张开Google调整台,如下图所示

奥门金沙手机娱乐网址 14

我们前不久想明白votePost方法到底在哪?跟着本身这么做,在Console面板里面输入votePost然后回车

奥门金沙手机娱乐网址 15

直白点击上海教室标红的链接,调节台将固定到Sources面板中,体现如下图所示

奥门金沙手机娱乐网址 16

大家看了上面那几个图形之后预计头都要晕了呢,这么多js都整在黄金年代行,令人怎么看呀,不用顾忌,按下图操作就能够(也等于点击中间面板左下方的Pretty
print就能够了)

奥门金沙手机娱乐网址 17

这儿大家再回来Console面板时会惊喜的意识原先的链接前边的1以往成为91了(其实这里的数字1如故91就是表示votePost方法在源码中的行号
)今后收看Pretty print开关的强盛之处了呢

知道了何等查看某贰个开关的源码,这接下去的干活就是调整了,调试第一步须要做的便是安装断点,其实设置断点很简短,点击一下上图所示的92就可以,此时你会发觉92行号旁边会多了一个图标,这里解释一下为何不在91处安装断点,你能够试下,事实上根本就无法在91处上安装断点,因为它是函数的定义处,所以没办法在这里设置断点。

奥门金沙手机娱乐网址 18

安装好了断点后,你就能够在左臂Breakpoints方框里看看刚刚安装的断点。

大家先来介绍一下用到的调治急速键吧(事实上大家也足以毫无下表所示的快速键,直接点击上海教室所示左边栏最上层的一排按键来拓展调治,具体用哪个开关,把鼠标放到开关上方一会就能够显得它对应的唤起)

 

快捷键 功能
F8 恢复运行
F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11 步入,遇到自定义函数就跟入到函数内部
Shift + F11 步出,跳出当前自定义函数

内部值得意气风发提的是,当大家点击“推荐”开关进行调整的时候会意识,不管我们是按的F10实行调治将养依旧按F11举行逐级调节和测验,都无法举办$.ajax函数内部,即使大家在函数内部设置了断点也一贯不章程步入,这里按F8才是确实起效果的,不相信你尝试。

当大家在调治的时候,左侧Scope
Variables里面博览会示当前作用域以至他的父级功用域,以至闭包。你不光能在侧面Scope Variables(变量作用域)生龙活虎栏处见到眼下变量,并且还是能够把鼠标直接移到自由变量上,就足以查看该变量的值。

用图说话(哈哈)

奥门金沙手机娱乐网址 19

 

刚巧大家介绍的只是在html里面能够看收获它绑定了onclick事件,那样我们就找到它绑定的js函数,假诺它是在jQuery页面加载成功函数里面绑定的,此时大家怎么驾驭它绑定的是哪些js函数呢,假设大家不亮堂绑定的js函数就越发不用说调节和测量检验进去了

下边介绍一下怎样查看,依旧以刚刚这个测量试验网页为例子吗,不过这一次大家来看“提交争论”作申明呢,

右击“提交商酌”–>检查核对成分,我们能够了然的看来在此个开关上未绑定任何事件。在Console面板内输入如下代码

function lookEvents (elem) {
    return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

日常来讲图所示:

奥门金沙手机娱乐网址 20

依据上述介绍的措施定位到具体的blog-common.js里面,找到postComment 
然后黄金年代稀世的找到具体的代码,再安装断点就好了。

终极介绍一下三个神器,很好用的debugger

大器晚成旦您协和写的代码,你试行的时候想让它在某后生可畏处停下来,只要写上的debugger就好了,不相信你试试!哈哈

回去顶上部分

轻易易行读过代码后,可以差不离通晓,那几个函数有 3 个参数,第2个是
postId,正是小说ID,第二个是 推荐,可是第多个一贯没用到,并且暗中同意值是
false往下看,他在 #digg_tips 处展现 “提交中…” 字符串,接着通过 ajax
提交数据给后台。重返数据后,假使 n.IsSuccess 是 真 就在对应的
心仪或反驳的计数id上 +1,可是这里见到假使 isAbandoned 的值是 真
的话,就计数
-1。那大家能够预计第八个参数是撤除推荐或许不予用的,轻便说正是自己点了引入,不过自己今后不想推荐了,能够传递第八个参数
true 完毕撤销推荐的效果与利益。我们稍后测验下。接着是在 #digg_tips
处展现服务器重返的 n.Message 音信。固然 ajax 产生错误,是 500 错误就提示”抱歉!发生了错误!麻烦反馈至contact@cnblogs.com”
其余景况向来提醒服务器重临的错误音信。这正是大要的流水生产线,因为这几个函数轻易,所以基本上一眼就看出来了。

谷歌(Google卡塔尔调节台Elements面板

要想展开谷歌(Google卡塔尔(英语:State of Qatar)调控台,有三种方法

  1. ctrl+shift+i
  2. f12

世家知道Elements面板最大的效率正是操作属性和修正html。这里自身再说有的名门兴许不太熟习的特点,

  • 拖拽节点, 调解顺序
  • 拖拽节点到编辑器
  • ctrl + z 打消修正

这一个效应是小编觉着最风趣的,你们能够尝试啊。

上面来具体说说多少个复杂点的功用

回到最上部

可能某些新人朋友问了,你怎么领会 currentBlogApp, n, t ,i
是何等值吗?那大家来進展下一步,动态调节和测量试验好了。对于编写翻译过的项目,动态调度是不行有效的招数。先稳住到
votePost 源码处,(那几个前不久说过了,不太懂的话,再回来看看先。卡塔尔国

查阅成分上绑定的事体

  • 暗中同意会列出 All Nodes, 那一个包涵代办绑定在该节点的父/祖父节点上的风浪,
    因为在在冒泡或捕获阶段会透过该节点
  • Selected Node Only 只会列出当前节点上绑定的事件
  • 各样事件会有相应的多少个属性 handler, isAtribute, lineNumber,
    listenerBody, sourceName, type, useCapture

 

  • handler是管理函数, 右键能够见到那么些函数定义的任务, 日常 js
    库绑定事件会包意气风发层, 所以这里很难找到相应handler
  • isAtribute 注明事件是还是不是由此 html 属性(相近onClick卡塔尔情势绑定的
  • useCapture 是 addEventListener 的第多个参数, 表达事件是以 冒泡 还是捕获 顺序实施

奥门金沙手机娱乐网址 21

重回顶端

so
easy,大家就一定到了源码。接下来大家点下92不胜数字,实行下断点操作。为何不是在91行下断点呢?因为91行是函数注脚部分,无法下断点,大家在函数要履行的代码处下断点才行。看见91 行的行号产生中绿了,表示那个地点意气风发度下了断点了。相同的时间,大家能够在左手Breakpoints 后生可畏栏里看到已下的断点。Breakpoints
那几个一栏是处理全数断点的,能够低价的跳转到对应断点的职责出,以后平时会用到啊。

体制操作

能够透过 ctrl + z 撤除

奥门金沙手机娱乐网址 22

再次回到最上部

当今下完断点了,大家回头点下
推荐。。(即便认为自己在骗推荐,然而本人诚实没这样想,当初是无论找了个按键当演习的。卡塔尔当您点
推荐 按键的时候,美妙的业务时有产生了,并从未运营推荐效率,而是跳到了调节台
Sources 面板里大家刚巧下的不胜断点处。以后,你不单能在右边 Scope
Variables
风流倜傥栏处见到方今变量,並且还是能够把鼠标间接移到任性别变化量上,就能够查阅该变量的值。Scope
Variables栏目会突显当前效能域甚至他的父级功能域,以至闭包。是否超低价。。(小编初学闭包的时候,Scope
Variables帮了自家不少吧。卡塔尔

总况

当下调控台方法和属性有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

上边我们来挨门挨户介绍一下梯次艺术首要的用场。

经常景观下大家用来输入音讯的措施首固然用到如下多个

回去最上端

我们举办下一步,按3次 F10 就足以看看那般的东西。大家每按二回 F10
会举行一条语句,刚才按了3次,便是施行到了$.css.html;所以大家能够在页面上见到
#digg_tips 彰显提交中的字样。但是当大家重新按 F10
的时候,开掘她一起实行下去,而还没步向 ajax 内部的回调函数。

console.log

用于出口普通信息

回去最上端

那是个郁结的题材,也是本人要主要说的。像这种回调函数,极其是异步的,大家要在回调函数内部再度下二个断点。所以大家在
96 行再下个断点就能够,现在大家再点一下 推荐 照旧停在了 92 行,大家一贯按
F8 就能够在 ajax
的回调函数处断下了。今后,大家就足以调度回调数据了,同一时间能够开掘左侧Scope Variables 多了贰个 Closure
的东西,那些正是闭包。假诺现在知道不了,那就过,那东西要大篇幅介绍,不是三言两句就会讲理解的,反正调整台很刚劲就对了。在观看闭包的同有时候,大家也来看
ajax 的回到数据 n,很扎眼,笔者的 IsSuccess 属性为 false
未能如愿,因为她赶回了叁个音信”无法引入自己的原委”。是或不是很有意思,动态调解,让追寻BUG变得 so easy。

console.info

用来出口提醒性音信

重返最上部

接下去,我们来试验第多个参数。大家在支配台输入 votePost(cb_entryId,
‘Digg’,
true卡塔尔;然后回车。形似停在了92行的断点处,那个里就不调节和测验了,直接F8进去
ajax 的回调函数出。在这里边大家拾壹分精晓的见到,当第二个参数为 true
的时候,确实是裁撤推荐了,同有时间您能够看出推荐数确实 -1
了,哪怕刷新也风流倜傥致。