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方法在源码中的行号
卡塔 尔(英语: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

 

上几篇小说已经为大家介绍了js调节和测验类别的片段幼功知识,这一次乱码兄弟为咱们带给了js断点与动态调度方法,要求的朋友能够参照下

读书目录

明日留的课后练习 1. 深入分析 votePost 函数是怎么样完成 推荐 的。
其实大家已经看到了源码,只要读下源码就可以见道他是怎么落到实处的了。

  • 写在近期
  • 谷歌决定台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的选拔器
  • js调节和测量检验体系,怎么着调节和测验Javascript。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就能够轻易的开采调整台

图片 9

世家能够看见调整台里面有生龙活虎首诗还也是有任何消息,若是想清中央空调节台,能够点击左上角那多少个图片 10来清空,当然也足以通过在支配台输入console.clear()来促成清中央空调控台音信。如下图所示

图片 11

至今意气风发旦一个情形,假使多少个数组里面有非常多的要素,可是你想精通种种成分具体的值,这时出主意假令你用alert那将是多惨的大器晚成件专门的学业,因为alert阻断线程运转,你不点击alert框的鲜明开关下三个alert就不会现身。

上边我们用console.log来替换,心得一下它的吸重力。

图片 12

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

看了地点那张图,是或不是意识到log的无敌之处了,上面我们来探视console里面具体提供了怎么措施能够供大家平日调节和测量检验时利用。

图片 13

1、先说一下源码定位

我们展开测量试验网页  
见到页面右下方有一个引入的Logo吗?右击推荐Logo,选取核查成分,展开谷歌(Google卡塔 尔(英语:State of Qatar)调整台,如下图所示

图片 14

咱俩明天想知道votePost方法到底在哪?跟着本人这么做,在Console面板里面输入votePost然后回车

图片 15

直白点击上海体育场地标红的链接,调节台将牢固到Sources面板中,显示如下图所示

图片 16

世家看了上面这几个图形之后估算头都要晕了啊,这么多js都整在生龙活虎行,令人怎么看呀,不用顾忌,按下图操作就可以(约等于点击中间面板左下方的Pretty
print就能够了卡塔尔国

图片 17

那会儿大家再回到Console面板时会高兴的觉察原本的链接前面包车型地铁1未来成为91了(其实这里的数字1依然91正是意味着votePost方法在源码中的行号
卡塔尔国未来看来Pretty print开关的强盛的地方了啊

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

图片 18

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

我们先来介绍一下用到的调治将养火速键吧(事实上大家也得以绝不下表所示的神速键,直接点击上海体育地方所示左边栏最上层的一排开关来实行调养,具体用哪个按键,把鼠标放到按键上方一会就能展示它对应的提醒卡塔 尔(英语:State of Qatar)

 

快捷键 功能
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 个参数,第三个是
postId,就是小说ID,第3个是 推荐(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卡塔 尔(英语: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

回到顶上部分

图片 22
so easy,咱们就一定到了源码。
接下去我们点下92十一分数字,进行下断点操作。
为啥不是在91行下断点呢?
因为91行是函数证明部分,没办法下断点,大家在函数要实施的代码处下断点才行。
图片 23
见到 91
行的行号形成石榴红了,表示这么些地点已经下了断点了。同临时间,我们得以在右边Breakpoints 意气风发栏里见到已下的断点。
Breakpoints
这些风度翩翩栏是拘系全体断点的,能够低价的跳转到对应断点的职分出,以往常常会用到啊。

体制操作

能够通过 ctrl + z 废除

图片 24

再次回到顶端

今天下完断点了,大家回头点下
推荐。。(即便以为自己在骗推荐,不过小编真诚没这么想,当初是随意找了个开关当演习的。)
当你点 推荐
按键的时候,美妙的事体时有发生了,并从未运转推荐功用,而是跳到了调整台
Sources 面板里大家无独有偶下的至极断点处。
图片 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 就能够看来那般的东西。
图片 26
小编们每按贰次 F10
会执行一条语句,刚才按了3次,正是实践到了  $(“#digg_tips”).css(“color”,
“red”).html(“提交中…”); 
故而大家可以在页面上看看 #digg_tips 彰显提交中的字样。
但是当大家再一次按 F10 的时候,发现他一块实施下去,而未有步入 ajax
内部的回调函数。

console.log

用以出口普通消息

回到最上部

那是个郁结的标题,也是自己要重视说的。
像这种回调函数,特别是异步的,大家要在回调函数内部再度下三个断点。
进而我们在 96 行再下个断点就能够,以往大家再点一下 推荐 照旧停在了 92
行,大家直接按 F8 就能够在 ajax 的回调函数处断下了。
图片 27
近些日子,大家就足以调度回调数据了,同不经常间能够开采侧面 Scope Variables
多了叁个 Closure 的事物,这么些就是闭包。
生机勃勃经前几天晓得不了,这就过,那东西要大篇幅介绍,不是三言两句就能讲明白的,反正调控台很刚劲就对了。
在探访闭包的同一时间,大家也观察 ajax 的回来数据 n,很显然,我的 IsSuccess
属性为 false 未遂,因为她回来了多少个音讯 “不能够引进本人的剧情”。
是还是不是很有意思,动态调节和测量试验,让寻觅BUG变得 so easy。

console.info

用来出口提醒性音讯

回去最上端

接下去,大家来尝试第八个参数。
咱俩在调整台输入  votePost(cb_entryId, ‘Digg’, true);  然后回车。
生机勃勃律停在了92行的断点处,那几个里就不调节和测量试验了,直接F8进去 ajax
的回调函数出。
图片 28
在这里处大家充裕理解的收看,当第三个参数为 true
的时候,确实是撤废推荐了,相同的时候你能够看见推荐数确实 -1
了,哪怕刷新也同等。

console.error

用来出口错误新闻

回来顶部

本次我们用到了七个飞速键 F10 和 F8,前几天详细介绍,昨日先学会根底调节和测验先。

console.warn

用于出口警报新闻

再次回到顶上部分

课后演练:(升高下难度)

console.debug

用于出口调节和测量检验新闻

用图来发话

图片 29

console对象的地点5种情势,都能够使用printf风格的占位符。可是,占位符的连串非常少,只援救字符(%s卡塔尔国、整数(%d或%i卡塔尔、浮点数(%f卡塔 尔(阿拉伯语:قطر‎和目的(%o卡塔尔多种

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

图片 30

%o占位符,能够用来查阅一个目的内部景观

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

图片 31

上面珍重说一下console.log的片段本事

1、重写console.log 改换输出文字的体裁

图片 32

图片 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;');

图片 34😉

出口的结果如下图所示:

图片 35

 

2、利用调整台出口图片

图片 36

3、内定输出文字的样式

图片 37

回到顶端

  1. 翻开上面商量的 提交谈论 开关,并找到他的事件。(jQuery 绑定的)
  2. 动态调治那几个 提交商讨 事件的实施进度。

console.dirxml

用来突显网页的有些节点(node卡塔尔国所包罗的html/xml代码

图片 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>

图片 39😉

图片 40

归来顶端

万一不会以此演习,推荐看下 《浅谈 jQuery
事件源码定位难点》,有详细解析哦。

console.group和console.groupEnd

>输出意气风发组音讯的上马三保输出结束后生可畏组输出音讯

看您须要采取不相同的输出方法来使用,假使上述多个情势再同盟group和groupEnd方法来一只行使就能够输入形形色色的例外款型的出口音信。

图片 41

嘿嘿,是还是不是认为很奇妙啊!

再次来到顶端

本文来源:天涯论坛博主 乱码 的小说。

console.assert

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

图片 42

回到最上部

您恐怕感兴趣的作品:

  • Chrome调试折腾记之JS断点调试技艺
  • 供给的JS调节和测量检验手艺汇总
  • js断点调节和测量检验心得分享(必看篇)

console.count

(那几个办法十三分实用哦卡塔 尔(英语:State of Qatar)当你想计算代码被实践的次数

图片 43

再次来到最上端

console.dir

(那一个方法是本身一再应用的 可不知道比for in方便了不怎么)
直接将该DOM结点以DOM树的协会进行输出,能够详细核对象的议程发展等等

图片 44

回到顶上部分

console.time和console.timeEnd

计时开始和计时停止(看了上边包车型地铁图你弹指间就心拿到它的决定了卡塔尔国

图片 45

重临顶端

console.profile和console.profileEnd

匹配同盟利用来查看CPU使用有关音讯

图片 46

在Profiles面板里面查看就能够见见cpu相关应用消息

图片 47

回到最上端

console.timeLine和console.timeLineEnd

拾叁分协同记录风流倜傥段时间轴

回去最上部

console.trace

货仓追踪相关的调治

上述办法只是自身个人知道罢了。假如想查看具体API,能够上合法看看,具体地址为:

上边介绍一下调节台的局地火速键

重临最上部

方向键盘的上下键

大家风流倜傥用就驾驭。举个例子用上键就也就是采纳上次在调节台的输入符号

回去最上部

$_

命令归来目前二回表明式实行的结果,作用跟按升高的方向键再回车是意气风发致的

图片 48

上面的$_必要精晓其奥义本领动用极其,而$0~$4则代表了近年5个你挑选过的DOM节点。

怎样意思?在页面右击选取审查元素,然后在弹出来的DOM结点树上边随意点选,那一个被点过的节点会被记录下来,而$0会回去近些日子三次点选的DOM结点,就那样推算,$1重返的是一流次点选的DOM节点,最多保留了5个,假诺非常不足5个,则赶回undefined

图片 49

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

看一下chrome调节台二个简约的操作,如何查看页面成分,看下图就掌握了

图片 50

您在支配台轻便操作一回就清楚了,是否认为很简短!

回去顶上部分

Chrome 调控桃园原生支持类jQuery的采纳器

约等于说您能够用$增加了然的css选用器来采摘DOM节点

图片 51

回来顶上部分

copy

因此此命令能够将在调整台获取到的内容复制到剪贴板(假设在elements面板中当选有个别节点,也得以直接按ctrl+c实施复制操作)

图片 52

(哈哈
刚刚从调节台复制的body里面包车型客车html可以跋扈粘贴到哪 举个例子记事本
是否感到功用很苍劲卡塔尔国

回来顶上部分

keys和values

前面一个再次回到传入对象具有属性名组成的多寡,前者重返全体属性值组成的数组

图片 53

回到顶端

console.table

图片 54

重回最上部

monitor & unmonitor

monitor(function),它选拔二个函数名作为参数,比如function a,每次a被实施了,都会在调控台出口一条新闻,里面蕴涵了函数的称呼a及进行时所传颂的参数。

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

图片 55

看了那张图,应该精通了,也正是说在monitor和unmonitor中间的代码,实践的时候会在支配台出口一条音信,里面含有了函数的称呼a及实施时所盛传的参数。当裁撤监视(也正是试行unmonitor时卡塔尔国就不再在支配台出口音信了。

回去最上端

Console.log样式

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

说了地点一群公式,依旧举个例证让您影象深切一些,哈哈。

在决定台输入如下代码

图片 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;');

图片 57😉

出口的结果如下图所示:

图片 35

 

回到最上部

如果