如何调试Javascript,js调试系列

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

2015/01/12 · JavaScript
· Chrome

原稿出处:
韦德国际官网1946,ctriphire   

地点的作品业已大概介绍了须臾间console对象实际有哪些方面以致着力的行使,上边简介一下如何运用好chrome调整台这些神器好好调节和测量检验javascript代码(这么些才是大家真的能用到实处的地点卡塔 尔(英语:State of Qatar)

1、先说一下源码定位

世家展开测验网页 
 看见页面右下方有二个推荐的Logo吗?右击推荐Logo,接受调查成分,展开谷歌(Google卡塔 尔(阿拉伯语:قطر‎调控台,如下图所示

韦德国际官网1946 1

大家不久前想精晓votePost方法到底在哪?跟着本身这么做,在Console面板里面输入votePost然后回车

韦德国际官网1946 2

向来点击上Logo红的链接,调节台将固定到Sources面板中,体现如下图所示

韦德国际官网1946 3

大家看了地方那个图形之后测度头都要晕了吗,这么多js都整在黄金年代行,令人怎么看呀,不用操心,按下图操作就能够(也正是点击中间面板左下方的Pretty
print就可以了卡塔 尔(阿拉伯语:قطر‎

韦德国际官网1946 4

那儿大家再重返Console面板时会欣喜的意识原先的链接前边的1今后成为91了(其实这里的数字1照旧91正是象征votePost方法在源码中的行号
卡塔尔国未来来看Pretty print按键的有力的地方了吗

知道了什么查看某多少个开关的源码,那接下去的劳作就是调度了,调节和测验第一步须求做的正是设置断点,其实设置断点很简单,点击一下上海体育场面所示的92就能够,这个时候你会意识92行号旁边会多了贰个图标,这里解释一下为啥不在91处安装断点,你能够试下,事实上根本就没有办法在91处上设置断点,因为它是函数的定义处,所以不得已在那设置断点。

韦德国际官网1946 5

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

我们先来介绍一下用到的调解急忙键吧(事实上大家也足以绝不下表所示的急忙键,直接点击上海体育场地所示左边栏最上层的一排按键来拓宽调治,具体用哪个按键,把鼠标放到按键上方一会就能够显得它对应的唤起卡塔 尔(英语:State of Qatar)

 

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

中间值得黄金时代提的是,当我们点击“推荐”开关进行调度的时候会发掘,不管大家是按的F10实行调节和测量试验依然按F11进展逐级调试,都没办法张开$.ajax函数内部,尽管我们在函数内部安装了断点也尚无主意进去,这里按F8才是实在起效率的,不相信你尝试。

当大家在调解的时候,左边Scope
Variables里面会显妥贴前功用域以致她的父级成效域,以致闭包。你不单能在侧边Scope Variables(变量成效域)
生机勃勃栏处看见日前变量,並且还能够把鼠标直接移到任性变量上,就足以查看该变量的值。

用图说话(哈哈卡塔 尔(英语:State of Qatar)

韦德国际官网1946 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]); // 获取绑定的事件

正如图所示:

韦德国际官网1946 7

根据上述介绍的法门定位到具体的blog-common.js里面,找到postComment
 然后大器晚成千载奇遇的找到具体的代码,再设置断点就好了。

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

若果您自个儿写的代码,你施行的时候想让它在某风流倜傥处停下来,只要写上的debugger就好了,不相信你试试!哈哈

赞 1 收藏
评论

韦德国际官网1946 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(n, t, i) { 
 i || (i = !1); 
 var r = { 
  blogApp: currentBlogApp, 
  postId: n, 
  voteType: t, 
  isAbandoned: i 
 }; 
 $("#digg_tips").css("color", "red").html("提交中..."); 
 $.ajax({ 
  url: "/mvc/vote/VoteBlogPost.aspx", 
  type: "post", 
  dataType: "json", 
  contentType: "application/json; charset=utf-8", 
  data: JSON.stringify(r), 
  success: function(n) { 
   if (n.IsSuccess) { 
    var i = $("#" + t.toLowerCase() + "_count"); 
    r.isAbandoned ? $(i).html(parseInt($(i).html()) - 1) : $(i).html(parseInt($(i).html()) + 1) 
   } 
   $("#digg_tips").html(n.Message) 
  }, 
  error: function(n) { 
   n.status > 0 && (n.status == 500 ? $("#digg_tips").html("抱歉!发生了错误!麻烦反馈至contact@cnblogs.com") : $("#digg_tips").html(n.responseText)) 
  } 
 }); 
}

回到顶上部分

基本上就那几个样子的。
ps: 作者用的是 sublime text
格式化的代码,和chrome调整台格式化后的结果有一点分化。
也能够尝试那几个在线格式化工具,效果大约:Online JavaScript
beautifier 

写在前方

大家都有用过各系列型的浏览器,每一种浏览器都有协和的特征,本身拙见,在自个儿用过的浏览器个中,作者是最心爱Chrome的,因为它对于调节和测验脚本及前端设计调试都有它比其余浏览器有过之而无比不上的地点。大概我们对console.log会有必然的打听,心里难免会想调节和测验的时候用alert不就能够了,干嘛还要用console.log这么一长串的字符串来代替alert输出消息呢,下边笔者就介绍部分疗养的入门技术,让您爱上console.log

先的简约介绍一下chrome的调整台,张开chrome浏览器,按f12就足以轻便的展开调节台

韦德国际官网1946 9

大家能够看见调控台里面有黄金时代首诗还应该有其余音讯,假诺想清空调控台,能够点击左上角这一个韦德国际官网1946 10来清空,当然也足以经过在调整台输入console.clear()来完结清空气调节器节台音讯。如下图所示

韦德国际官网1946 11

今日生机勃勃旦三个风貌,假如一个数组里面有许多的成分,可是你想明白各类成分具体的值,那时候想一想假如您用alert那将是多惨的后生可畏件事情,因为alert阻断线程运行,你不点击alert框的规定开关下三个alert就不会冒出。

下边大家用console.log来替换,体会一下它的吸引力。

韦德国际官网1946 12

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

看了地方那张图,是或不是意识到log的雄强之处了,上面大家来拜见console里面具体提供了什么方法能够供我们一向调节和测量试验时接纳。

韦德国际官网1946 13

1、先说一下源码定位

世家张开测验网页  
看见页面右下方有一个引入的Logo吗?右击推荐Logo,采用检查核对成分,张开谷歌调控台,如下图所示

韦德国际官网1946 14

大家今天想掌握votePost方法到底在哪?跟着小编这么做,在Console面板里面输入votePost然后回车

韦德国际官网1946 15

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

韦德国际官网1946 16

世家看了上边这几个图片之后估量头都要晕了吗,这么多js都整在生机勃勃行,令人怎么看呀,不用忧虑,按下图操作就能够(也便是点击中间面板左下方的Pretty
print就能够了卡塔尔

韦德国际官网1946 17

那个时候大家再重临Console面板时会惊喜的开采原本的链接后边的1未来成为91了(其实这里的数字1还是91就是表示votePost方法在源码中的行号
卡塔尔国今后收看Pretty print按键的强有力的地方了吧

清楚了什么样查看某一个按键的源码,那接下去的做事就是调解了,调节和测量检验第一步须要做的便是设置断点,其实设置断点很简短,点击一下上海教室所示的92就可以,这个时候你会发觉92行号旁边会多了二个Logo,这里解释一下为啥不在91处安装断点,你能够试下,事实上根本就无语在91处上安装断点,因为它是函数的定义处,所以不得已在这里设置断点。

韦德国际官网1946 18

安装好了断点后,你就能在侧边Breakpoints方框里观察刚刚安装的断点。

大家先来介绍一下用到的调整快捷键吧(事实上我们也足以绝不下表所示的快捷键,直接点击上海教室所示右边栏最上层的一排按键来举办调节和测量试验,具体用哪个开关,把鼠标放到开关上方一会就展销会示它对应的升迁卡塔尔

 

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

当中值得意气风发提的是,当大家点击“推荐”开关进行调整的时候会意识,不管我们是按的F10举办调和仍然按F11开展稳步调节和测量检验,都没有办法张开$.ajax函数内部,纵然大家在函数内部安装了断点也从没主意进去,这里按F8才是的确起效果的,不相信你尝试。

当大家在调节和测量试验的时候,右边Scope
Variables里面会来妥贴前效用域以至他的父级功能域,以致闭包。你不光能在左侧Scope Variables(变量作用域)
意气风发栏处看见近来变量,并且还是能把鼠标直接移到自由变量上,就能够查阅该变量的值。

用图说话(哈哈卡塔 尔(英语:State of Qatar)

韦德国际官网1946 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]); // 获取绑定的事件

如下图所示:

韦德国际官网1946 20

依据上述介绍的艺术定位到实际的blog-common.js里面,找到postComment 
然后黄金时代薄薄的找到切实可行的代码,再安装断点就好了。

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

假定你和睦写的代码,你试行的时候想让它在某生机勃勃处停下来,只要写上的debugger就好了,不相信你试试!哈哈

归来顶上部分

大约读过代码后,能够大要领悟,这些函数有 3 个参数,第叁个是
postId,正是随笔ID,第四个是 推荐(digg) 大概 反驳(bury),
不过第多个一向没用到,何况默许值是 false
往下看,他在 #digg_tips 处展现”提交中…” 字符串,接着通过 ajax
提交数据给后台。
回去数据后,如若 n.IsSuccess 是 真 就在相应的 喜欢(#digg_count)或反对(#bury_count)的计数id上 +1,
唯独这里看看如若 isAbandoned 的值是 真 的话,就计数 -1。
那大家能够猜想第两个参数是撤销推荐也许不予用的,轻松说正是自己点了推荐,不过自身明日不想推荐了,能够传递第多个参数
true 完成打消推荐的职能。
咱俩稍后测量试验下。
进而是在 #digg_tips
处突显服务器再次来到的 n.Message 新闻。
设若 ajax 发生错误,是 500
错误就提示 “抱歉!暴发了错误!麻烦反馈至contact@cnblogs.com”
其余景况一向提醒服务器再次来到的错误消息。
那正是大概的流程,因为这一个函数轻松,所以基本上一眼就看出来了。

谷歌(Google卡塔尔说了算台Elements面板

要想展开谷歌(Google卡塔尔国调整台,有三种方法

  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 是 add伊夫ntListener 的第多少个参数, 表达事件是以 冒泡 还是捕获 顺序施行

韦德国际官网1946 21

回到最上部

韦德国际官网1946 22
so easy,大家就牢固到了源码。
接下去咱们点下92充足数字,进行下断点操作。
为何不是在91行下断点呢?
因为91行是函数申明部分,无法下断点,大家在函数要举办的代码处下断点才行。
韦德国际官网1946 23
看到 91
行的行号变成紫水晶色了,表示那个地点早已下了断点了。同不时间,大家得以在左侧Breakpoints 风流倜傥栏里观察已下的断点。
Breakpoints
那几个意气风发栏是管制所有断点的,能够事半功倍的跳转到对应断点的岗位出,未来平常会用到啊。

体制操作

能够透过 ctrl + z 撤销

韦德国际官网1946 24

归来最上端

到现在下完断点了,大家回头点下
推荐。。(即使认为自己在骗推荐,可是笔者真心没那样想,当初是无论找了个按键当练习的。)
当您点 推荐
开关的时候,巧妙的业务时有发生了,并未运营推荐功用,而是跳到了调整台
Sources 面板里大家偏巧下的可怜断点处。
韦德国际官网1946 25
现在,你不但能在左手 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 就能够见到那般的东西。
韦德国际官网1946 26
作者们每按一次 F10
会执行一条语句,刚才按了3次,正是实践到了  $(“#digg_tips”).css(“color”,
“red”).html(“提交中…”); 
据此咱们得以在页面上看看 #digg_tips 展现提交中的字样。
可是当大家再次按 F10 的时候,开掘他伙同实践下去,而还没进去 ajax
内部的回调函数。

console.log

用以出口普通消息

回到最上端

那是个郁结的主题素材,也是本身要主要说的。
像这种回调函数,特别是异步的,咱们要在回调函数内部再次下三个断点。
就此大家在 96 行再下个断点就能够,以往大家再点一下 推荐 依旧停在了 92
行,大家平素按 F8 就足以在 ajax 的回调函数处断下了。
韦德国际官网1946 27
明天,我们就可以调治将养回调数据了,同期能够窥见左侧 Scope Variables
多了二个 Closure 的东西,这一个便是闭包。
借使今后精通不了,那就过,那东西要大篇幅介绍,不是三言两句就能够讲精通的,反正调整台很强盛就对了。
在观看闭包的还要,大家也观望 ajax 的归来数据 n,很引人瞩目,作者的 IsSuccess
属性为 false 未有中标,因为他归来了三个消息 “不能够推荐自身的内容”。
是否很有趣,动态调节和测验,让追寻BUG变得 so easy。

console.info

用于出口提醒性音讯

回到顶端

接下去,大家来尝试第两个参数。
笔者们在决定台输入  votePost(cb_entryId, ‘Digg’, true);  然后回车。
一点差距也没有于停在了92行的断点处,这一个里就不调节和测验了,直接F8进去 ajax
的回调函数出。
韦德国际官网1946 28
在这里边大家那些了然的看出,当第多少个参数为 true
的时候,确实是废除推荐了,同时您能够看看推荐数确实 -1
了,哪怕刷新也如出生龙活虎辙。

console.error

用以出口错误消息

回到最上端

本次大家用到了多少个神速键 F10 和 F8,今天详细介绍,明天先学会底工调节和测量检验先。

console.warn

用以出口警报音信

回到最上部

课后练习:(进步下难度)

console.debug

用以出口调节和测量试验音信

用图来说话

韦德国际官网1946 29

console对象的上面5种艺术,都足以动用printf风格的占位符。然而,占位符的品种少之又少,只援助字符(%s卡塔尔、整数(%d或%i卡塔尔、浮点数(%f卡塔 尔(英语:State of Qatar)和目的(%o卡塔尔各样

格式化符号 实现的功能
%s 格式化成字符串输出
%d or %i 格式化成数值输出
%f 格式化成浮点数输出
%o 转化成展开的DOM元素输出
%O 转化成JavaScript对象输出
%c 把字符串按照你提供的样式格式化后输入
   console.log("%d年%d月%d日",2011,3,26);
  console.log("圆周率是%f",3.1415926);

韦德国际官网1946 30

%o占位符,能够用来查看叁个目的内部景色

var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

韦德国际官网1946 31

上面爱护说一下console.log的有的本领

1、重写console.log 更换输出文字的体制

韦德国际官网1946 32

韦德国际官网1946 33😉

console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");



console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

韦德国际官网1946 34😉

出口的结果如下图所示:

韦德国际官网1946 35

 

2、利用调控台出口图片

韦德国际官网1946 36

3、内定输出文字的体裁

韦德国际官网1946 37

回去最上部

  1. 查阅上面探讨的 提交议论 开关,并找到他的平地风波。(jQuery 绑定的)
  2. 动态调整那么些 提交批评 事件的施行进度。

console.dirxml

用来展现网页的有些节点(node卡塔尔国所包括的html/xml代码

韦德国际官网1946 38😉

<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById('mytable');
        console.dirxml(mytable);
    }
</script>

韦德国际官网1946 39😉

韦德国际官网1946 40

归来顶上部分

假定不会以此练习,推荐看下 《浅谈 jQuery
事件源码定位难点》,有详细深入分析哦。

console.group和console.groupEnd

>输出风流倜傥组新闻的伊始和出口甘休意气风发组输出音讯

看您须求采用差别的输出方法来行使,就算上述三个主意再合营group和groupEnd方法来一齐行使就能够输入丰富多彩标不等款式的出口音信。

韦德国际官网1946 41

哈哈,是或不是以为很玄妙啊!

回到顶端

本文来源:乐乎博主 乱码 的稿子。

console.assert

对输入的表达式进行预知,唯有表明式为false时,才输出相应的音信到调控台

韦德国际官网1946 42

回到最上端

你或者感兴趣的稿子:

  • Chrome调节和测验折腾记之JS断点调节和测验本事
  • 要求的JS调节和测量检验技艺汇总
  • js断点调节和测量检验心得分享(必看篇)

console.count

(这几个方法十二分实用哦卡塔尔国当您想计算代码被实行的次数

韦德国际官网1946 43

再次回到顶上部分

console.dir

(那个方式是作者时常接纳的 可不知道比for in方便了有一点)
间接将该DOM结点以DOM树的构造举办输出,能够详细核对象的主意进步端等

韦德国际官网1946 44

回到最上部

console.time和console.timeEnd

计时伊始和计时完结(看了下边包车型地铁图你眨眼之间间就体会到它的厉害了卡塔尔

韦德国际官网1946 45

重回最上端

console.profile和console.profileEnd

相配协同使用来查阅CPU使用相关信息

韦德国际官网1946 46

在Profiles面板里面查看就足以看来cpu相关应用音讯

韦德国际官网1946 47

回去最上端

console.timeLine和console.timeLineEnd

非凡合作记录生龙活虎段时间轴

回来最上端

console.trace

库房追踪相关的调护医疗

上述方法只是自己个人精通罢了。借使想查看具体API,能够上合法看看,具体地址为:

下边介绍一下调控台的有的火速键

重临最上部

动向键盘的上下键

世家一用就明白。举例用上键就一定于采用上次在调整台的输入符号

回去顶上部分

$_

命令归来近些日子三遍表明式试行的结果,效能跟按进步的方向键再回车是大同小异的

韦德国际官网1946 48

上面的$_须求明白其奥义技巧选拔非常,而$0~$4则代表了近日5个你选拔过的DOM节点。

怎么看头?在页面右击接收审查元素,然后在弹出来的DOM结点树下边随意点选,这一个被点过的节点会被记录下来,而$0会回来最近三次点选的DOM结点,就这样推算,$1再次回到的是最好次点选的DOM节点,最多保留了5个,如果非常不够5个,则赶回undefined

韦德国际官网1946 49

$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

看一下chrome调整台叁个归纳的操作,怎么样查看页面成分,看下图就精通了

韦德国际官网1946 50

你在支配台简单操作一回就清楚了,是还是不是以为相当粗略!

回到最上部

Chrome 调整新竹原生帮衬类jQuery的选取器

也正是说您能够用$丰硕熟知的css采纳器来摘取DOM节点

韦德国际官网1946 51

回去最上端

copy

因此此命令能够将要调节台获取到的剧情复制到剪贴板(要是在elements面板中当选有个别节点,也足以一向按ctrl+c施行复制操作)

韦德国际官网1946 52

(哈哈
刚刚从调控台复制的body里面包车型地铁html能够恣心纵欲粘贴到哪 比方记事本
是否以为功能很有力卡塔尔

回去最上端

keys和values

前面三个再次来到传入对象具有属性名组成的多少,前者重回全部属性值组成的数组

韦德国际官网1946 53

再次回到顶上部分

console.table

韦德国际官网1946 54

归来最上端

monitor & unmonitor

monitor(function),它选拔叁个函数名作为参数,比如function a,每次a被实行了,都会在支配台出口一条新闻,里面含有了函数的名号a及施行时所传诵的参数。

而unmonitor(function)正是用来终止这一监听。

韦德国际官网1946 55

看了那张图,应该了解了,也等于说在monitor和unmonitor中间的代码,施行的时候会在支配台出口一条音讯,里面含有了函数的名号a及实行时所传颂的参数。当撤销监视(也正是推行unmonitor时卡塔 尔(英语:State of Qatar)就不再在调控台出口新闻了。

归来最上端

Console.log样式

格式化符号 实现的功能
%s 格式化成字符串输出
%d or %i 格式化成数值输出
%f 格式化成浮点数输出
%o 转化成展开的DOM元素输出
%O 转化成JavaScript对象输出
%c 把字符串按照你提供的样式格式化后输入

说了上面一群公式,照旧举个例证让您纪念浓郁一些,哈哈。

在支配台输入如下代码

韦德国际官网1946 56😉

console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");



console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

韦德国际官网1946 57😉

出口的结果如下图所示:

韦德国际官网1946 35

 

回到最上部

如果

 

发表评论

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