Chrome调节台 怎么样调节和测试Javascript

2015/01/12 · JavaScript
· Chrome

原来的书文出处:
ctriphire   

地点的稿子已经大致介绍了须臾间console对象实际有哪些方面以及宗旨的利用,下边简要介绍一下如何行使好chrome调整台那些神器好好调试javascript代码(那么些才是咱们真的能用到实处的地点)

壹、先说一下源码定位

我们张开测试网页 
 看到页面右下方有一个推荐的图标吗?右击推荐Logo,选用审查成分,张开谷歌(Google)调整台,如下图所示

金沙注册送58 1

作者们以往想清楚votePost方法到底在哪?跟着作者那样做,在Console面板里面输入votePost然后回车

金沙注册送58 2

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

金沙注册送58 3

世家看了下面那么些图片之后估量头都要晕了呢,这么多js都整在一行,令人怎么看呀,不用顾虑,按下图操作就能够(也便是点击中间面板左下方的Pretty
print就行了)

金沙注册送58 4

此时我们再回来Console面板时会欣喜的觉察原来的链接后边的一今后成为9一了(其实这里的数字一要么九1正是意味着votePost方法在源码中的行号
)未来看来Pretty print开关的精锐之处了吗

明亮了哪些查看某2个按键的源码,那接下去的行事正是调养了,调节和测试第叁步要求做的就是设置断点,其实设置断点很简单,点击一下上海教室所示的玖二就能够,那时你会意识玖二行号旁边会多了一个Logo,这里解释一下为何不在玖壹处安装断点,你能够试下,事实上根本就左顾右盼在9一处上设置断点,因为它是函数的定义处,所以不得已在此设置断点。

金沙注册送58 5

设置好了断点后,你就会在左边Breakpoints方框里观察刚刚安装的断点。

大家先来介绍一下用到的调治快捷键吧(事实上大家也足以毫不下表所示的连忙键,直接点击上海体育场合所示右边栏最上层的一排开关来张开调解,具体用哪个开关,把鼠标放到开关上方一会就会显得它对应的唤醒)

 

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

内部值得一提的是,当我们点击“推荐”按键举行调养的时候会发觉,不管大家是按的F10举办调治照旧按F1一开始展览逐级调节和测试,都没办法实行$.ajax函数内部,纵然大家在函数内部设置了断点也从无法进入,这里按F八才是真正起效果的,不信你试试。

当大家在调节和测试的时候,左侧Scope
Variables里面会议及展览示当前功效域以及她的父级功效域,以及闭包。你不但能在右手
Scope Variables(变量作用域)
壹栏处看到日前变量,而且仍是能够把鼠标间接移到放肆变量上,就足以查看该变量的值。

用图说话(哈哈)

金沙注册送58 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]); // 获取绑定的事件

一般来说图所示:

金沙注册送58 7

依据上述介绍的章程定位到现实的blog-common.js里面,找到postComment
 然后1稀有的找到实际的代码,再设置断点就好了。

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

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

赞 1 收藏
评论

金沙注册送58 8

 

写在目前
本文包涵浏览器调节和测试,不包涵web移动端调节和测试。
正文调试均在chrome浏览器进行

上几篇小说已经为大家介绍了js调节和测试体系的局地基础知识,本次乱码兄弟为我们带来了js断点与动态调治方法,必要的爱侣能够参照下

翻阅目录

alert

其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
  • js调节和测试连串,简析chrome调节和测试才干。console.trace
  • 动向键盘的上下键
  • $_
  • Chrome
    调控罗利原生协助类jQuery的接纳器
  • copy
  • keys和values
  • console.table
  • monitor &
    unmonitor
  • Console.log样式
  • 一旦你以为本篇博文对你抱有收获,以为小女人还算用心,请点击右下角的
    [推荐],谢谢!

console

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)) 
  } 
 }); 
}

回来顶部

骨干输出

大概大家都在用console.log在支配台出口点东西,其实console还有别的的艺术:

console.log("打印字符串");//在控制台打印自定义字符串
console.error("我是个错误");//在控制台打印自定义错误信息
console.info("我是个信息");//在控制台打印自定义信息
console.warn("我是个警告");//在控制台打印自定义警告信息
console.debug("我是个调试");//在控制台打印自定义调试信息
console.clear();//清空控制台(这个下方截图中没有)

金沙注册送58 9

console

留意下面输出的error和throw出的error不相同样,前者只是出口错误消息,不也许捕获,不会冒泡,更不会半上落下程序运转。

基本上就这么些样子的。
ps: 笔者用的是 sublime text
格式化的代码,和chrome调整台格式化后的结果有点不相同。
也能够推行这几个在线格式化学工业具,效果大致:Online JavaScript
beautifier 

写在前方

世家都有用过各体系型的浏览器,每一种浏览器都有投机的本性,自身拙见,在本身用过的浏览器个中,笔者是最欣赏Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不比的地点。或者我们对console.log会有早晚的打听,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么1长串的字符串来取代alert输出音讯吗,上面作者就介绍部分调整的入门才具,让您爱上console.log

先的回顾介绍一下chrome的调节台,张开chrome浏览器,按f1二就足以轻巧的打开调节台

金沙注册送58 10

世家能够看看调整台里面有一首诗还有任何音讯,假设想清中央空调控台,能够点击左上角那叁个金沙注册送58 11来清空,当然也得以由此在决定台输入console.clear()来落到实处清空调控台新闻。如下图所示

金沙注册送58 12

现行反革命如果二个场地,假使贰个数组里面有过多的成分,不过你想精通各类成分具体的值,那时候想想若是您用alert那将是多惨的一件业务,因为alert阻断线程运营,你不点击alert框的明确按键下一个alert就不会出现。

下边大家用console.log来替换,感受一下它的魔力。

金沙注册送58 13

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

看了上边这张图,是或不是认识到log的有力之处了,下边大家来探视console里面具体提供了哪些措施能够供大家平素调节和测试时利用。

金沙注册送58 14

一、先说一下源码定位

世家开荒测试网页  
看到页面右下方有一个引入的Logo吗?右击推荐Logo,选取审查成分,张开谷歌(Google)调节台,如下图所示

金沙注册送58 15

大家未来想精通votePost方法到底在哪?跟着笔者这么做,在Console面板里面输入votePost然后回车

金沙注册送58 16

一直点击上海体育场合标红的链接,调节台将定位到Sources面板中,呈现如下图所示

金沙注册送58 17

世家看了上边这么些图形之后估计头都要晕了啊,这么多js都整在壹行,令人怎么看呀,不用顾虑,按下图操作就能够(相当于点击中间面板左下方的Pretty
print就行了)

金沙注册送58 18

此时大家再回去Console面板时会欣喜的觉察原来的链接前面包车型大巴壹以往改为九1了(其实这里的数字一依旧九1正是意味votePost方法在源码中的行号
)以后看来Pretty print按键的强有力之处了吧

明白了哪些查看某3个按键的源码,那接下去的做事正是调度了,调节和测试第一步需求做的便是安装断点,其实设置断点很轻松,点击一下上海教室所示的玖二就能够,那时你会开掘九2行号旁边会多了四个Logo,这里解释一下为何不在九一处安装断点,你能够试下,事实上根本就左顾右盼在九壹处上设置断点,因为它是函数的定义处,所以不得已在此设置断点。

金沙注册送58 19

安装好了断点后,你就会在右手Breakpoints方框里见到刚刚安装的断点。

笔者们先来介绍一下用到的调度急忙键吧(事实上大家也得以毫不下表所示的快捷键,直接点击上图所示左边栏最上层的一排开关来展开调理,具体用哪些开关,把鼠标放到开关上方壹会就会来得它对应的唤醒)

 

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

内部值得1提的是,当大家点击“推荐”开关进行调节和测试的时候会意识,不管我们是按的F10进行调治将养照旧按F1①开始展览逐级调节和测试,都没办法张开$.ajax函数内部,纵然我们在函数内部安装了断点也尚无主意进去,这里按F八才是当真起成效的,不信你尝试。

当大家在调节和测试的时候,右边Scope
Variables里面会突显当前功用域以及她的父级成效域,以及闭包。你不仅仅能在右侧Scope Variables(变量作用域)
一栏处看到目前变量,而且仍可以够把鼠标直接移到自由变量上,就能够查阅该变量的值。

用图说话(哈哈)

金沙注册送58 20

 

刚巧我们介绍的只是在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]); // 获取绑定的事件

如下图所示:

金沙注册送58 21

根据上述介绍的章程定位到现实的blog-common.js里面,找到postComment 
然后一薄薄的找到切实可行的代码,再设置断点就好了。

最后介绍一下1个神器,很好用的debugger

比如您和煦写的代码,你实行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你尝试!哈哈

重回顶部

格式化输出

除此以外,console还援救自定义样式和周边c语言的printf情势

console.log("%s年",2016);//%s表示字符串
console.log("%d年%d月",2016,11);//%d表示整数
console.log("%f",3.1415926);//%f小数
console.log("%o",console);//%o表示对象

console.log("%c自定义样式","font-size:30px;color:#00f");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");

金沙注册送58 22

formatted output

简单的讲读过代码后,能够大约了然,那个函数有 三 个参数,第多个是
postId,正是小说ID,第二个是 推荐(digg) 或许 反对(bury),
只是第十个一向没用到,而且暗许值是 false
往下看,他在 #digg_tips 处显示”提交中…” 字符串,接着通过 ajax
提交数据给后台。
回到数据后,假使 n.IsSuccess 是 真 就在相应的 喜欢(#digg_count)或反对(#bury_count)的计数id上 +1,
可是这里看看即使 isAbandoned 的值是 真 的话,就计数 -壹。
那我们得以估量第二个参数是撤销推荐或许不予用的,轻巧说正是自家点了推荐,可是本身以往不想推荐了,能够传递第多个参数
true 落成撤消推荐的效应。
大家稍后测试下。
继之是在 #digg_tips
处展现服务器返回的 n.Message 新闻。
借使 ajax 产生错误,是 500
错误就提醒 “抱歉!产生了不当!麻烦反馈至contact@cnblogs.com”
别的景况一贯提醒服务器再次来到的错误消息。
那正是大致的流程,因为那个函数轻巧,所以基本上一眼就看出来了。

谷歌说了算台Elements面板

要想展开谷歌(谷歌)调节台,有二种格局

  1. ctrl+shift+i
  2. f12

世家知道Elements面板最大的功效便是操作属性和改造html。这里作者再说某个我们也许不太熟知的特性,

  • 拖拽节点, 调解顺序
  • 拖拽节点到编辑器
  • ctrl + z 撤除修改

这几个职能是本人以为最风趣的,你们能够尝试啊。

上面来具体说说几个复杂点的功效

回到顶部

DOM输出

上边多少个比较轻松的,就不例如子了,简单说一下:

var ul = document.getElementsByTagName("ul");
console.dirxml(ul); //树形输出table节点,即<table>和它的innerHTML,由于document.getElementsByTagName是动态的,所以这个得到的结果肯定是动态的

金沙注册送58 23

DOM output

想必某个新人朋友问了,你怎么通晓 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 的第多个参数, 表达事件是以 冒泡 依旧捕获 顺序奉行

金沙注册送58 24

回到顶部

对象输出

var o = {
  name:"Lily",
  age: 18
};
console.dir(obj);//显示对象自有属性和方法

金沙注册送58 25

object output

对于三个对象的集中,你能够那样,输出更清晰:

var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];
console.log(stu);
console.table(stu);

金沙注册送58 26

output in table

金沙注册送58 27
so easy,我们就稳固到了源码。
接下去我们点下玖二可怜数字,举行下断点操作。
缘何不是在玖一行下断点呢?
因为九一行是函数表明部分,无法下断点,大家在函数要实施的代码处下断点才行。
金沙注册送58 28
看看 九一行的行号造成黄褐了,表示这几个地点壹度下了断点了。同时,我们可以在右边Breakpoints 一栏里见到已下的断点。
Breakpoints
那么些一栏是管制全部断点的,能够一本万利的跳转到对应断点的岗位出,今后常常会用到哦。

体制操作

能够透过 ctrl + z 撤除

金沙注册送58 29

回去顶部

成组输出

//建立一个参数组
console.group("start"); //引号里是组名,自己起
console.log("sub1");
console.log("sub1");
console.log("sub1");
console.groupEnd("end");

金沙注册送58 30

output in group

将来下完断点了,大家回头点下
推荐。。(即使以为作者在骗推荐,可是自身恳切没这么想,当初是无论找了个按键当演习的。)
当您点 推荐
按键的时候,奇妙的作业产生了,并从未运维推荐作用,而是跳到了调节台
Sources 面板里大家恰好下的要命断点处。
金沙注册送58 31
如今,你不单能在右侧 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", "$_"]

下边我们来每家每户介绍一下相继艺术首要的用处。

相似景观下大家用来输入音讯的章程首要是用到如下五个

回来顶部

函数计数和追踪

function fib(n){ //输出前n个斐波那契数列值
  if(n == 0) return;
  console.count("调用次数");//放在函数里,每当这句代码运行输出所在函数执行次数
  console.trace();//显示函数调用轨迹(访问调用栈)
  var a = arguments[1] || 1;
  var b = arguments[2] || 1;
  console.log("fib=" + a);
  [a, b] = [b, a + b];
  fib(--n, a, b);
}
fib(6);

金沙注册送58 32

trace of fun

<small>注:Chrome开辟者工具中的Sources标签页也在沃特ch表明式上面展现调用栈。</small>

咱俩开始展览下一步,按二次 F拾 就能够看出这么的东西。
金沙注册送58 33
大家每按贰回 F拾会进行一条语句,刚才按了三回,便是实行到了  $(“#digg_tips”).css(“color”,
“red”).html(“提交中…”); 
故此大家能够在页面上观看 #digg_tips 显示提交中的字样。
只是当我们再次按 F10 的时候,开掘她一同推行下去,而从不进去 ajax
内部的回调函数。

console.log

用来出口普通信息

重返顶部

计时

console.time() //计时开始
fib(100); //用上述函数计算100个斐波那契数
console.timeEnd() //计时结束并输出时长

金沙注册送58 34

time

断言语句,这一个c++调节和测试里面也时时用到。js中,当第三个表达式或参数为true时候什么也不发出,为false时停下程序并报错

console.assert(true, "我错了");
console.assert(false, "我真的错了");

金沙注册送58 35

assert

那是个纠结的难点,也是本身要首要说的。
像这种回调函数,特别是异步的,大家要在回调函数内部再一次下贰个断点。
就此我们在 玖陆 行再下个断点就可以,今后我们再点一下 推荐 依旧停在了 九二行,我们从来按 F8 就足以在 ajax 的回调函数处断下了。
金沙注册送58 36
今天,大家就足以调解回调数据了,同时能够发现左边 Scope Variables
多了叁个 Closure 的东西,那一个就是闭包。
假如前些天领悟不了,那就过,那东西要大篇幅介绍,不是3言两句就能讲理解的,反正调控台很有力就对了。
在观看闭包的还要,我们也看到 ajax 的回来数据 n,很精晓,小编的 IsSuccess
属性为 false 未有得逞,因为她重回了贰个新闻 “不能推荐自身的剧情”。
是还是不是很有意思,动态调解,让寻觅BUG变得 so easy。

console.info

用于出口提示性音讯

回来顶部

本性分析

function F(){
  var i = 0;
  function f(){
    while(i++ == 1000);
  }
  function g(){
    while(i++ == 100000);
  }
  f();
  g();
}
console.profile();
F();
console.profileEnd();

金沙注册送58 37

proformance

<small>注:Chrome开采者工具中的奥迪(Audi)ts标签页也得以兑现品质分析。</small>

接下去,我们来实验第多少个参数。
大家在支配台输入  votePost(cb_entryId, ‘Digg’, true);  然后回车。
一点差距也未有于停在了92行的断点处,这一个里就不调试了,直接F8跻身 ajax
的回调函数出。
金沙注册送58 38
在此间大家这么些了然的看出,当第十三个参数为 true
的时候,确实是打消推荐了,同时您能够观望推荐数确实 -1了,哪怕刷新也相同。

console.error

用来出口错误消息

再次回到顶部

debugger

其1重量级的是博主最常用的,恐怕是c++出身,对于单步调节和测试由衷的忠爱。单步调节和测试正是点一下,施行一句程序,并且可以查阅当前成效域可见的保有变量和值。而debugger便是告诉程序在这里停下来举办单步调节和测试,俗称断点。

金沙注册送58 39

debugger

右手按键如下:

  • Pause/Resume script
    execution:暂停/复苏脚本施行(程序推行到下1断点截至)。
  • Step over next function call:施行到下一步的函数调用(跳到下1行)。
  • Step into next function call:进入当前函数。
  • Step out of current function:跳出当前实践函数。
  • Deactive/Active all breakpoints:关闭/开启全数断点(不会收回)。
  • Pause on exceptions:格外情况自动断点设置。

实际右边还有为数不少强有力的效应

金沙注册送58 40

what’s more

  • Watch:Watch表达式
  • Call Stack: 栈中变量的调用,这里是递归调用,肯定是在内部存款和储蓄器栈部分调用。
  • Scope:当前作用域变量旁观。
  • BreakPoints:当前断点变量观看。
  • XHENVISION BreakPoints:面向Ajax,专为异步而生的断点调节和测试功用。
  • DOM BreakPoints:首要回顾下列DOM断点,注册格局见下图
  1. 当节点属性发生变化时断点(Break on attributes modifications)
  2. 当节点内部子节点变化时断点(Break on subtree modifications)
  3. 当节点被移除时断点(Break on node removal)

金沙注册送58 41

Broken Point

  • Global Listeners:全局事件监听
  • 伊芙nt Listener
    Breakpoints:事件监听器断点,列出了独具页面及脚才具件,包括:鼠标、键盘、动画、停车计时器、XHEvoque等等。

本次大家用到了七个火速键 F拾 和 F捌,明日详细介绍,前几天先学会基础调节和测试先。

console.warn

用来出口警示音讯

归来顶部

chrome中的调节和测试才具

  1. DOM成分的垄断(monopoly)台书签
    Chrome开拓者工具和Firebug都提供了书签功用,用于突显你在要素标签页(Chrome)或HTML标签页(Firebug)中最终点击的DOM成分。若是你各样选拔了A成分、B成分和C成分,那么$0
    表示C成分,$一 表示B成分,$2代表A成分。(那一个和正则表达式的$符号类似,可是顺序分歧)

  2. 一经您想调节和测试f函数,用debug(f)语句能够扩张那种断点。

  3. Sources标签页左侧面板上有1个代码片段(Snippet)子标签页,可用来保存代码片段,帮你调试代码。

  4. 能够用Chrome开采者工具Sources标签页中的格式化开关(Pretty Print
    Button)格式化压缩后的代码。

  5. 在Network面板,采用几个财富文件,右键Copy
    Response可高效复制响应内容。

  6. 使用媒体询问,那些重中之重是在Device Mode调度差别的分辨率展现。

  7. 金沙注册送58,采取Elements,按 Esc > Emulation > Sensors举行传感器模拟。

  8. 点击渐入效果样式Logo(木色图标),能够预览动画效果,并可对相应的贝塞尔曲线(cubic-bezier)举行调节和测试动画效果。

  9. 在Source中按住Alt键并拖动鼠标实行多列内容选取。

  10. Elements面板右键施行DOM成分节点,选取Force Element
    State或然点击左边Toggle Element StateLogo能够出发伪类。

  11. Network面板中接纳一张图片,在右边图片上鼠标右键选用copy it as a Data
    U卡宴I,就足以收获图片的Data U福睿斯L (base6四编码)。

  12. 经过按住Ctrl键能够增长多个编辑光标,同时对多处实行编写制定。按下Ctrl +
    U能够收回编辑。

  13. Elements面板右边的Style编辑器中,点击颜色十6进制编码前的小色块,会弹出1个调色板。

  14. 按下Alt键并且鼠标双击选拔DOM成分后面包车型大巴箭头,就会议及展览开该DOM成分下的持有字节点成分.

  15. 快捷键:

  • 十分的快牢固到行:快捷键Ctrl+O(Mac:CMD+O),输入:行号:列号
    来张开固定
  • 要素寻找:快捷键Ctrl+F(Mac:CMD+F),试试在搜索栏输入ID选取符可能类选取符就足以牢固到成分啦

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

console.debug

用于出口调节和测试音信

用图来讲话

金沙注册送58 42

console对象的下面三种办法,都足以动用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);

金沙注册送58 43

%o占位符,能够用来查看三个对象内部情状

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

金沙注册送58 44

上边重视说一下console.log的部分才干

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

金沙注册送58 45

金沙注册送58 46😉

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

金沙注册送58 47😉

出口的结果如下图所示:

金沙注册送58 48

 

2、利用调控台出口图片

金沙注册送58 49

3、钦定输出文字的样式

金沙注册送58 50

回去顶部

调理进度注意事项

一.幸免记录引用类型
当记录对象或数组时,恒久记得你在记录什么。记录原始类型时,使用带断点的watch表明式。若是是异步代码,防止记录引用类型。

var arr = [{ num: 0 }];
setInterval(function(){
console.log(arr);
arr[0].num += 1;
}, 1000);

金沙注册送58 51

watch

那边,第几本性子中目的引用的值是不可信的。当您首先次在开垦者工具中展现那脾本性时,num的值就早已分明了。之后无论你对同3个引用重新打开多少次都不会转移。

二.尽大概使用 source map。有时生产代码不能够选取source
map,但好歹,你都不应当一向对生育代码实行调治。

  1. 查看下边批评的 提交评论 按键,并找到她的轩然大波。(jQuery 绑定的)
  2. 动态调解那些 提交争论 事件的实践进程。

console.dirxml

用来体现网页的有个别节点(node)所含有的html/xml代码

金沙注册送58 52😉

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

金沙注册送58 53😉

金沙注册送58 54

回去顶部

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

console.group和console.groupEnd

>输出一组消息的上马和出口甘休一组输出消息

看你要求选取分化的出口方法来选拔,倘诺上述多个方法再合营group和groupEnd方法来二只利用就足以输入各式各样的不等款型的输出音讯。

金沙注册送58 55

嘿嘿,是否感到很奇妙啊!

回到顶部

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

console.assert

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

金沙注册送58 56

回来顶部

你或者感兴趣的稿子:

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

console.count

(那几个措施丰裕实用哦)当你想总括代码被实施的次数

金沙注册送58 57

重回顶部

console.dir

(那个点子是本人时常选择的 可不知道比for in方便了有点)
直接将该DOM结点以DOM树的构造实行输出,可以详细核对象的主意进步级等

金沙注册送58 58

回去顶部

console.time和console.timeEnd

计时发轫和计时终止(看了上边包车型客车图你弹指间就感受到它的狠心了)

金沙注册送58 59

回到顶部

console.profile和console.profileEnd

协作共同行使来查阅CPU使用相关消息

金沙注册送58 60

在Profiles面板里面查看就足以见到cpu相关应用音信

金沙注册送58 61

归来顶部

console.timeLine和console.timeLineEnd

卓越协同记录一段时间轴

回到顶部

console.trace

酒馆追踪相关的调弄整理

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

下边介绍一下调整台的有个别快速键

重临顶部

趋势键盘的上下键

大家一用就知晓。举个例子用上键就也便是采取上次在调节台的输入符号

回来顶部

$_

命令归来目前贰遍表明式实践的结果,作用跟按进步的方向键再回车是同1的

金沙注册送58 62

上面的$_亟待驾驭其奥义技巧采取方便,而$0~$四则表示了多年来四个你挑选过的DOM节点。

哪些意思?在页面右击接纳审查元素,然后在弹出来的DOM结点树上边随意点选,这几个被点过的节点会被记录下来,而$0会回来方今1回点选的DOM结点,由此及彼,$一重返的是最佳次点选的DOM节点,最多保留了四个,借使不够5个,则赶回undefined

金沙注册送58 63

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

看一下chrome调控台三个大致的操作,如何查看页面成分,看下图就驾驭了

金沙注册送58 64

你在调控台轻巧操作贰回就知晓了,是或不是以为很简短!

回去顶部

Chrome 调控斯特拉斯堡原生支持类jQuery的选拔器

也正是说你能够用$增多熟谙的css接纳器来挑选DOM节点

金沙注册送58 65

归来顶部

copy

因而此命令能够就要调控台获取到的剧情复制到剪贴板(一经在elements面板中选中某些节点,也足以直接按ctrl+c施行复制操作)

金沙注册送58 66

(哈哈
刚刚从调控台复制的body里面包车型地铁html能够自由粘贴到哪 例如记事本
是否感觉效率很强劲)

重临顶部

keys和values

前者再次回到传入对象具有属性名组成的数额,后者重返全部属性值组成的数组

金沙注册送58 67

归来顶部

console.table

金沙注册送58 68

回来顶部

monitor & unmonitor

monitor(function),它接受贰个函数名作为参数,举例function a,每次a被实施了,都会在决定台出口一条新闻,里面含有了函数的称谓a及施行时所传诵的参数。

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

金沙注册送58 69

看了那张图,应该清楚了,也就是说在monitor和unmonitor中间的代码,实施的时候会在支配台出口一条新闻,里面包括了函数的称呼a及施行时所传诵的参数。当免除监视(也正是推行unmonitor时)就不再在支配台出口音信了。

回来顶部

Console.log样式

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

说了地点一批公式,照旧举个例证让你影象深切一些,哈哈。

在决定台输入如下代码

金沙注册送58 70😉

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

金沙注册送58 71😉

输出的结果如下图所示:

金沙注册送58 72

 

归来顶部

如果

 

相关文章

网站地图xml地图