js调节和测量检验种类,怎么着调节和测量检验Javascriptweb前端:

By admin in web前端 on 2019年11月19日

Chrome调节台 如何调试Javascript

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

下面的文章风姿罗曼蒂克度大概介绍了后生可畏晃console对象实际有哪些方面以致着力的应用,下面简要介绍一下怎么使用好chrome调整台这一个神器好好调节和测验javascript代码(这么些才是我们确实能用到实处的地点卡塔尔

1、先说一下源码定位

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

web前端 1

笔者们今后想精晓votePost方法到底在哪?跟着小编如此做,在Console面板里面输入votePost然后回车

web前端 2

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

web前端 3

世家看了地点那么些图片之后预计头都要晕了吧,这么多js都整在风度翩翩行,让人怎么看呀,不用顾忌,按下图操作就可以(也正是点击中间面板左下方的Pretty
print就能够了卡塔 尔(阿拉伯语:قطر‎

web前端 4

那时大家再回去Console面板时会惊喜的觉察原来的链接前边的1今后改为91了(其实这里的数字1要么91正是代表votePost方法在源码中的行号
卡塔 尔(阿拉伯语:قطر‎今后看来Pretty print开关的无敌之处了吧

清楚了什么样查看某一个开关的源码,那接下去的职业正是调养了,调节和测量试验第一步要求做的正是设置断点,其实设置断点超级粗略,点击一下上海体育场地所示的92就能够,这时候你会发觉92行号旁边会多了三个Logo,这里解释一下为何不在91处安装断点,你能够试下,事实上根本就无法在91处上安装断点,因为它是函数的定义处,所以没有办法在这里设置断点。

web前端 5

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

大家先来介绍一下用到的调整快速键吧(事实上我们也足以绝不下表所示的连忙键,直接点击上图所示左侧栏最上层的一排按键来扩充调剂,具体用哪个按键,把鼠标放到按键上方一会就能够显得它对应的唤起卡塔尔国

 

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

中间值得风姿罗曼蒂克提的是,当我们点击“推荐”开关进行调护治疗的时候会发觉,不管大家是按的F10实行调解仍然按F11实行稳步调节和测验,都没办法进行$.ajax函数内部,尽管大家在函数内部设置了断点也从不能够踏向,这里按F8才是真的起效果的,不信你尝试。

当大家在调度的时候,侧面Scope
Variables里面会展现当前成效域以致他的父级作用域,甚至闭包。你非但能在右侧Scope Variables(变量效用域)
一栏处看到眼下变量,何况还能够把鼠标直接移到自由变量上,就能够查阅该变量的值。

用图说话(哈哈卡塔 尔(阿拉伯语:قطر‎

web前端 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]); // 获取绑定的事件

正如图所示:

web前端 7

遵照上述介绍的方法定位到实际的blog-common.js里面,找到postComment
 然后意气风发薄薄的找到具体的代码,再安装断点就好了。

聊到底介绍一下三个神器,很好用的debugger

比方您自个儿写的代码,你试行的时候想让它在某风度翩翩处停下来,只要写上的debugger就好了,不相信你尝试!哈哈

赞 1 收藏
评论

web前端 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就能够轻巧的开发调整台

web前端 9

世家可以看出调控台里面有后生可畏首诗还大概有别的音讯,假诺想清中央空调节台,能够点击左上角那多少个web前端 10来清空,当然也足以透过在调控台输入console.clear()来完毕清空气调节器整台新闻。如下图所示

web前端 11

后天假设贰个风貌,假使四个数组里面有无数的因素,但是你想明白各样成分具体的值,此时动脑筋若是您用alert那将是多惨的生机勃勃件专业,因为alert阻断线程运转,你不点击alert框的显著按键下贰个alert就不相会世。

上面我们用console.log来替换,心得一下它的魔力。

web前端 12

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

看了上面那张图,是否认识到log的强有力之处了,上面我们来看看console里面具体提供了什么样方法能够供大家一贯调节和测试时利用。

web前端 13

1、先说一下源码定位

世家开拓测验网页  
看见页面右下方有三个推荐的Logo吗?右击推荐Logo,选用审核成分,张开Google调控台,如下图所示

web前端 14

大家以后想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车

web前端 15

一贯点击上海教室标红的链接,调控台将一定到Sources面板中,显示如下图所示

web前端 16

世家看了上边那个图片之后推测头都要晕了吗,这么多js都整在风度翩翩行,令人怎么看呀,不用忧虑,按下图操作就能够(约等于点击中间面板左下方的Pretty
print就能够了卡塔尔

web前端 17

此刻我们再重回Console面板时会喜悦的发掘原来的链接前面包车型大巴1现在改为91了(其实这里的数字1或许91就是代表votePost方法在源码中的行号
卡塔 尔(英语:State of Qatar)今后来看Pretty print按键的强硬之处了啊

理解了什么查看某多个按键的源码,那接下去的办事正是调理了,调节和测量试验第一步要求做的就是安装断点,其实设置断点非常的粗略,点击一下上图所示的92就可以,这个时候你会发觉92行号旁边会多了三个Logo,这里解释一下为啥不在91处安装断点,你可以试下,事实上根本就无可奈何在91处上设置断点,因为它是函数的定义处,所以不得已在这里设置断点。

web前端 18

设置好了断点后,你就能够在左边手Breakpoints方框里观望刚刚安装的断点。

作者们先来介绍一下用到的调解快捷键吧(事实上大家也足以毫无下表所示的连忙键,直接点击上海教室所示侧面栏最上层的一排开关来拓宽调整,具体用哪些按钮,把鼠标放到按键上方一会就能够来得它对应的唤起卡塔尔

 

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

此中值得生机勃勃提的是,当大家点击“推荐”按键进行调治的时候会开掘,不管我们是按的F10举行调节和测量检验依然按F11举行稳步调节和测验,都没有办法打开$.ajax函数内部,固然大家在函数内部安装了断点也未有章程进入,这里按F8才是当真起效果的,不信你尝试。

当我们在调节和测量检验的时候,右边Scope
Variables里面交易会示当前效能域以至她的父级效用域,以致闭包。你不但能在左臂Scope Variables(变量功用域)
大器晚成栏处见到近年来变量,何况还是能够把鼠标直接移到大肆变量上,就足以查看该变量的值。

用图说话(哈哈卡塔 尔(阿拉伯语:قطر‎

web前端 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]); // 获取绑定的事件

平时来说图所示:

web前端 20

依据上述介绍的不二秘诀定位到具体的blog-common.js里面,找到postComment 
然后后生可畏稀世的找到实际的代码,再设置断点就好了。

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

假定你本身写的代码,你推行的时候想让它在某风姿罗曼蒂克处停下来,只要写上的debugger就好了,不相信你试试!哈哈

回去顶端

简短读过代码后,能够大约领会,这么些函数有 3 个参数,第叁个是
postId,就是小说ID,第1个是 推荐(digg) 或然 批驳(bury),
不过第多个一向没用到,何况默许值是 false
往下看,他在 #digg_tips 处显示”提交中…” 字符串,接着通过 ajax
提交数据给后台。
回到数据后,假诺 n.IsSuccess 是 真 就在对应的 喜欢(#digg_count)或反对(#bury_count)的计数id上 +1,
唯独这里见到要是 isAbandoned 的值是 真 的话,就计数 -1。
那大家得以揣测第八个参数是撤销推荐可能不予用的,简单说就是自己点了推荐介绍,但是笔者前不久不想推荐了,能够传递第4个参数
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 是 addEventListener 的第八个参数, 表明事件是以 冒泡 依然捕获 顺序施行

web前端 21

回来最上部

web前端 22
so easy,大家就一定到了源码。
接下去大家点下92要命数字,进行下断点操作。
为什么不是在91行下断点呢?
因为91行是函数声明部分,没办法下断点,大家在函数要实践的代码处下断点才行。
web前端 23
来看 91
行的行号产生芙蓉红了,表示那个地点已经下了断点了。相同的时候,大家得以在左边手Breakpoints 后生可畏栏里见到已下的断点。
Breakpoints
那几个意气风发栏是管理全体断点的,可以低价的跳转到对应断点的职分出,以今日常会用到啊。

体制操作

能够通过 ctrl + z 撤废

web前端 24

回去最上部

当今下完断点了,我们回头点下
推荐。。(尽管以为自己在骗推荐,不过小编虔诚没那样想,当初是随意找了个开关当练习的。)
当你点 推荐
开关的时候,奇妙的工作时有发生了,并从未运营推荐作用,而是跳到了调节台
Sources 面板里大家正巧下的那些断点处。
web前端 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 就能够阅览那样的事物。
web前端 26
咱俩每按二遍 F10
会进行一条语句,刚才按了3次,就是推行到了  $(“#digg_tips”).css(“color”,
“red”).html(“提交中…”); 
于是我们能够在页面上来看 #digg_tips 显示提交中的字样。
而是当大家重新按 F10 的时候,发掘她联合试行下去,而并未有步入 ajax
内部的回调函数。

console.log

用于出口普通新闻

回到顶上部分

那是个纠葛的难点,也是本身要注重说的。
像这种回调函数,特别是异步的,我们要在回调函数内部再一次下八个断点。
为此我们在 96 行再下个断点就可以,今后大家再点一下 推荐 依旧停在了 92
行,大家一直按 F8 就能够在 ajax 的回调函数处断下了。
web前端 27
当今,大家就能够调护医疗回调数据了,同不时间能够窥见侧边 Scope Variables
多了一个 Closure 的事物,那个就是闭包。
若果今后驾驭不了,那就过,那东西要大篇幅介绍,不是三言两句就会讲明白的,反正调整台很有力就对了。
在观察闭包的同不常间,我们也见到 ajax 的回到数据 n,很鲜明,笔者的 IsSuccess
属性为 false 没有瓜熟蒂落,因为她再次回到了一个音信 “不能够引入自个儿的开始和结果”。
是还是不是很有意思,动态调整,让找出BUG变得 so easy。

console.info

用以出口提醒性音讯

回去顶上部分

接下去,大家来实验第1个参数。
大家在支配台输入  votePost(cb_entryId, ‘Digg’, true);  然后回车。
如出生龙活虎辙停在了92行的断点处,那么些里就不调节和测量试验了,直接F8步向 ajax
的回调函数出。
web前端 28
在那我们十二分精晓的观察,当第八个参数为 true
的时候,确实是收回推荐了,同一时间您能够见见推荐数确实 -1
了,哪怕刷新也相似。

console.error

用于出口错误信息

回来顶端

此番大家用到了五个快速键 F10 和 F8,前日详细介绍,明天先学会底蕴调节和测量检验先。

console.warn

用以出口警报新闻

归来最上部

课后操练:(提升下难度)

console.debug

用于出口调节和测量试验消息

用图来发话

web前端 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);

web前端 30

%o占位符,能够用来查阅四个对象内部原因

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

web前端 31

上边重视说一下console.log的局地才能

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

web前端 32

web前端 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;');

web前端 34😉

输出的结果如下图所示:

web前端 35

 

2、利用控制台出口图片

web前端 36

3、钦命输出文字的样式

web前端 37

再次回到顶端

  1. 翻开上边批评的 提交评论 按键,并找到她的事件。(jQuery 绑定的)
  2. 动态调整这几个 提交商议 事件的施行进度。

console.dirxml

用来呈现网页的某部节点(node卡塔尔所满含的html/xml代码

web前端 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>

web前端 39😉

web前端 40

回去顶端

若果不会以此操练,推荐看下 《浅谈 jQuery
事件源码定位难题》,有详细分析哦。

console.group和console.groupEnd

>输出黄金时代组消息的最早和输出结束风流罗曼蒂克组输出音信

看你供给接收不一致的出口方法来接收,假使上述多少个艺术再同盟group和groupEnd方法来协同行使就足以输入五光十色的不相像式的输出音信。

web前端 41

哈哈,是或不是感觉极美丽妙啊!

归来最上端

正文来源:和讯博主 乱码 的稿子。

console.assert

对输入的表明式举办预见,唯有表达式为false时,才输出相应的音信到调节台

web前端 42

重返顶上部分

你大概感兴趣的篇章:

  • Chrome调节和测验折腾记之JS断点调节和测量试验才能
  • 必备的JS调节和测量试验能力汇总
  • js断点调节和测量检验体会分享(必须要看篇)

console.count

(这些方法十三分实用哦卡塔尔当您想计算代码被执行的次数

web前端 43

重返顶上部分

console.dir

(那一个方式是小编时时选拔的 可不知道比for in方便了多少)
直接将该DOM结点以DOM树的构造进行输出,能够详细核对象的方法进步端等

web前端 44

回到顶上部分

console.time和console.timeEnd

计时伊始和计时甘休(看了上边包车型大巴图你刹那间就体会到它的决心了卡塔 尔(英语:State of Qatar)

web前端 45

归来最上部

console.profile和console.profileEnd

相当协同行使来查看CPU使用有关音信

web前端 46

在Profiles面板里面查看就能够见到cpu相关应用音讯

web前端 47

回到最上端

console.timeLine和console.timeLineEnd

合营合营记录生机勃勃段时间轴

回去顶上部分

console.trace

宾馆追踪相关的调节和测量检验

上述方法只是本人个人了然罢了。假使想查看具体API,能够上合法看看,具体地址为:

上面介绍一下调整台的某些飞快键

重临顶上部分

动向键盘的上下键

世家黄金年代用就通晓。举个例子用上键就一定于接收上次在调控台的输入符号

回去最上部

$_

一声令下归来方今叁回表明式试行的结果,效用跟按提升的方向键再回车是生机勃勃律的

web前端 48

上面的$_亟需精通其奥义本领利用合适,而$0~$4则意味着了多年来5个你选取过的DOM节点。

怎么看头?在页面右击采纳审查元素,然后在弹出来的DOM结点树上边随意点选,那么些被点过的节点会被记录下来,而$0会回来前段时间一回点选的DOM结点,就这样类推,$1再次回到的是最棒次点选的DOM节点,最多保留了5个,假诺相当不足5个,则赶回undefined

web前端 49

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

看一下chrome调控台叁个简约的操作,怎样查看页面成分,看下图就通晓了

web前端 50

您在调整台轻松操作贰回就精通了,是否感觉十分轻便!

回到顶端

Chrome 调控新北原生协理类jQuery的接受器

也即是说你能够用$丰硕熟练的css接收器来抉择DOM节点

web前端 51

回去最上部

copy

透过此命令能够就要调节台获取到的从头到尾的经过复制到剪贴板(如若在elements面板中选中某些节点,也能够一向按ctrl+c实施复制操作)

web前端 52

(哈哈
刚刚从调节台复制的body里面包车型客车html能够Infiniti定粘贴到哪 比方记事本
是或不是以为功效很强盛卡塔 尔(英语:State of Qatar)

回到顶上部分

keys和values

前端重返传入对象具有属性名组成的数码,前者重回全数属性值组成的数组

web前端 53

重回最上部

console.table

web前端 54

归来顶上部分

monitor & unmonitor

monitor(function),它接纳贰个函数名作为参数,比如function a,每次a被实行了,都会在调整台出口一条音讯,里面包蕴了函数的称号a及施行时所传颂的参数。

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

web前端 55

看了那张图,应该明白了,也正是说在monitor和unmonitor中间的代码,实践的时候会在调控台出口一条音讯,里面包涵了函数的称号a及推行时所传诵的参数。当废除监视(也正是实施unmonitor时卡塔尔国就不再在支配台出口音信了。

回到最上端

Console.log样式

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

说了上边一批公式,仍旧举个例证让您纪念深切一些,哈哈。

在支配台输入如下代码

web前端 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;');

web前端 57😉

输出的结果如下图所示:

web前端 35

 

重回顶上部分

如果

 

发表评论

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

网站地图xml地图
Copyright @ 2010-2020 澳门新葡亰官网app 版权所有