js调试种类,简析chrome调试技巧

Chrome控制台 怎样调试Javascript

2015/01/12 · JavaScript
· Chrome

初稿出处:
ctriphire   

上边的稿子业已差不离介绍了一下console对象实际有哪些方面以及焦点的施用,下边简单介绍一下如何运用好chrome控制台那些神器好好调试javascript代码(那么些才是大家真的能用到实处的地点)

1、先说一下源码定位

世家开拓测试网页 
 看到页面右下方有一个引进的图标吗?右击推荐图标,接纳审查元素,打开谷歌(Google)控制台,如下图所示

亚洲必赢官网 1

俺们明天想知道votePost方法到底在哪?跟着自己这么做,在Console面板里面输入votePost然后回车

亚洲必赢官网 2

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

亚洲必赢官网 3

大家看了上边那些图形之后估计头都要晕了呢,这么多js都整在一行,令人怎么看呀,不用担心,按下图操作即可(也就是点击中间面板左下方的Pretty
print就行了)

亚洲必赢官网 4

此时大家再重返Console面板时会惊奇的意识原来的链接前边的1现在改为91了(其实那里的数字1如故91就是表示votePost方法在源码中的行号
)现在来看Pretty print按钮的强有力之处了吗

清楚了什么查看某一个按钮的源码,那接下去的做事便是调节了,调试第一步必要做的便是安装断点,其实设置断点很简单,点击一下上图所示的92即可,这时你会发现92行号旁边会多了一个图标,那里解释一下为啥不在91处安装断点,你可以试下,事实上根本就无可奈何在91处上安装断点,因为它是函数的定义处,所以没办法在此设置断点。

亚洲必赢官网 5

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

大家先来介绍一下用到的调试快速键吧(事实上我们也能够不要下表所示的神速键,直接点击上图所示左侧栏最上层的一排按钮来进展调试,具体用哪些按钮,把鼠标放到按钮上方一会就会来得它对应的提拔)

 

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

里面值得一提的是,当我们点击“推荐”按钮举行调剂的时候会发现,不管我们是按的F10进行调试依旧按F11举办逐步调试,都没办法展开$.ajax函数内部,即便我们在函数内部安装了断点也尚无主意进去,那里按F8才是真的起成效的,不信你尝试。

当我们在调试的时候,右边Scope
Variables里面会显示当前成效域以及她的父级功用域,以及闭包。你非但能在右边Scope Variables(变量效能域)
一栏处看到眼前变量,而且还是可以把鼠标直接移到任意变量上,就可以查阅该变量的值。

用图说话(哈哈)

亚洲必赢官网 6

 

刚巧大家介绍的只是在html里面能够看收获它绑定了onclick事件,那样大家就找到它绑定的js函数,假若它是在jQuery页面加载成功函数里面绑定的,这时候大家怎么领会它绑定的是哪个js函数呢,要是我们不清楚绑定的js函数就越是不用说调试进去了

下边介绍一下怎样查看,照旧以刚刚那一个js调试种类,简析chrome调试技巧。测试网页为例子吗,不过本次大家来看“提交评论”作表明呢,

右击“提交评论”–>审核元素,大家得以清楚的收看在那几个按钮上未绑定任何事件。在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

 

写在头里
正文包蕴浏览器调试,不包涵web移动端调试。
本文调试均在chrome浏览器进行

上几篇小说已经为大家介绍了js调试体系的有的基础知识,这一次乱码兄弟为我们带来了js断点与动态调试方法,须求的爱侣可以参见下

读书目录

alert

本条不用多说了,不言自明

前些天留的课后操练 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的选拔器
  • 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();//清空控制台(这个下方截图中没有)

亚洲必赢官网 9

console

瞩目上边输出的error和throw出的error不平等,前者只是出口错误音讯,不能捕获,不会冒泡,更不会中断程序运行。

大抵就以此样子的。
ps: 我用的是 sublime text
格式化的代码,和chrome控制台格式化后的结果有点分歧。
也得以试行这些在线格式化工具,效果几乎:Online JavaScript
beautifier 

写在前方

世家都有用过种种别型的浏览器,每种浏览器都有投机的特性,本人拙见,在本人用过的浏览器当中,我是最欣赏Chrome的,因为它对于调试脚本及前端设计调试都有它比任何浏览器有过之而无不及的地点。可能大家对console.log会有必然的垂询,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出新闻吗,上边我就介绍部分调节的入门技巧,让您爱上console.log

先的简易介绍一下chrome的控制台,打开chrome浏览器,按f12就足以轻松的打开控制台

亚洲必赢官网 10

世家可以看看控制台里面有一首诗还有别的音信,即便想清空控制台,可以点击左上角这些亚洲必赢官网 11来清空,当然也得以经过在决定台输入console.clear()来促成清空控制台音讯。如下图所示

亚洲必赢官网 12

现今尽管一个情景,假设一个数组里面有为数不少的要素,不过你想明白各种元素具体的值,那时候想想如果您用alert那将是多惨的一件业务,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会出现。

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

亚洲必赢官网 13

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

看了地点那张图,是否认识到log的强硬之处了,上边大家来看看console里面具体提供了哪些方法可以供大家一向调试时选拔。

亚洲必赢官网 14

1、先说一下源码定位

大家打开测试网页  
看到页面右下方有一个推荐的图标吗?右击推荐图标,选取审查元素,打开谷歌(谷歌(Google))控制台,如下图所示

亚洲必赢官网 15

大家后天想通晓votePost方法到底在哪?跟着自己如此做,在Console面板里面输入votePost然后回车

亚洲必赢官网 16

直白点击上图标红的链接,控制台将定位到Sources面板中,浮现如下图所示

亚洲必赢官网 17

世家看了地方这一个图片之后猜想头都要晕了吗,这么多js都整在一行,令人怎么看呀,不用操心,按下图操作即可(也就是点击中间面板左下方的Pretty
print就行了)

亚洲必赢官网 18

那时大家再回到Console面板时会惊奇的发现原本的链接前面的1现在成为91了(其实那里的数字1或者91就是意味votePost方法在源码中的行号
)现在看到Pretty print按钮的强劲之处了啊

驾驭了怎样查看某一个按钮的源码,那接下去的工作便是调剂了,调试第一步须要做的便是设置断点,其实设置断点很粗略,点击一下上图所示的92即可,那时你会发觉92行号旁边会多了一个图标,那里解释一下为啥不在91处安装断点,你可以试下,事实上根本就没办法在91处上安装断点,因为它是函数的定义处,所以无法在此设置断点。

亚洲必赢官网 19

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

咱俩先来介绍一下用到的调剂快捷键吧(事实上大家也可以毫不下表所示的急忙键,直接点击上图所示左侧栏最上层的一排按钮来展开调试,具体用哪些按钮,把鼠标放到按钮上方一会就会呈现它对应的唤醒)

 

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

里面值得一提的是,当大家点击“推荐”按钮进行调节的时候会意识,不管大家是按的F10举办调剂仍旧按F11展开逐步调试,都没办法展开$.ajax函数内部,即使大家在函数内部安装了断点也远非章程进去,这里按F8才是当真起效果的,不信你尝试。

当我们在调试的时候,左侧Scope
Variables里面会来得当前效能域以及他的父级效用域,以及闭包。你不仅仅能在右侧Scope Variables(变量效能域)
一栏处看到眼前变量,而且还可以把鼠标直接移到任意变量上,就可以查阅该变量的值。

用图说话(哈哈)

亚洲必赢官网 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]); // 获取绑定的事件

如下图所示:

亚洲必赢官网 21

根据上述介绍的法子定位到实际的blog-common.js里面,找到postComment 
然后一稀罕的找到具体的代码,再安装断点就好了。

最后介绍一下一个神器,很好用的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");

亚洲必赢官网 22

formatted output

简不难单读过代码后,可以大体通晓,这几个函数有 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”
其余情况平昔提醒服务器重临的错误新闻。
那就是大体的流水线,因为这几个函数不难,所以基本上一眼就看出来了。

谷歌说了算台Elements面板

要想打开谷歌(谷歌(Google))控制台,有三种艺术

  1. ctrl+shift+i
  2. f12

世家知道Elements面板最大的效用就是操作属性和改动html。那里自己再说有些我们可能不太驾驭的特色,

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

这一个职能是本人觉得最有趣的,你们可以尝试啊。

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

再次回到顶部

DOM输出

下边多少个比较简单的,就不举例子了,不难说一下:

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

亚洲必赢官网 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 的第多个参数, 表明事件是以 冒泡 依旧捕获 顺序执行

亚洲必赢官网 24

回到顶部

对象输出

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

亚洲必赢官网 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);

亚洲必赢官网 26

output in table

亚洲必赢官网 27
so easy,我们就稳定到了源码。
接下去大家点下92卓殊数字,举行下断点操作。
何以不是在91行下断点呢?
因为91行是函数评释部分,无法下断点,大家在函数要履行的代码处下断点才行。
亚洲必赢官网 28
观察 91
行的行号变成灰色了,表示那么些地点业已下了断点了。同时,大家可以在左侧Breakpoints 一栏里看到已下的断点。
Breakpoints
那么些一栏是管理所有断点的,可以便宜的跳转到对应断点的职位出,未来平时会用到啊。

体制操作

可以通过 ctrl + z 裁撤

亚洲必赢官网 29

回去顶部

成组输出

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

亚洲必赢官网 30

output in group

后天下完断点了,大家回头点下
推荐。。(尽管感到自己在骗推荐,但是自己虔诚没这么想,当初是不管找了个按钮当磨练的。)
当您点 推荐
按钮的时候,神奇的政工时有暴发了,并不曾运行推荐功用,而是跳到了控制台
Sources 面板里大家恰好下的这些断点处。
亚洲必赢官网 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);

亚洲必赢官网 32

trace of fun

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

咱俩开展下一步,按3次 F10 就可以观望那样的东西。
亚洲必赢官网 33
咱俩每按三遍 F10
会举行一条语句,刚才按了3次,就是实践到了  $(“#digg_tips”).css(“color”,
“red”).html(“提交中…”); 
故此大家可以在页面上观察 #digg_tips 彰显提交中的字样。
唯独当我们再一次按 F10 的时候,发现她一块履行下去,而并未进去 ajax
内部的回调函数。

console.log

用以出口普通信息

回去顶部

计时

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

亚洲必赢官网 34

time

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

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

亚洲必赢官网 35

assert

那是个纠结的题材,也是自身要珍惜说的。
像那种回调函数,越发是异步的,我们要在回调函数内部再一次下一个断点。
之所以大家在 96 行再下个断点即可,现在大家再点一下 推荐 依旧停在了 92
行,我们直接按 F8 就可以在 ajax 的回调函数处断下了。
亚洲必赢官网 36
现行,大家就可以调剂回调数据了,同时可以窥见左边 Scope Variables
多了一个 Closure 的事物,这些就是闭包。
如若现在知晓不了,那就过,这东西要大篇幅介绍,不是三言两句就能讲驾驭的,反正控制台很强劲就对了。
在察看闭包的还要,大家也观望 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();

亚洲必赢官网 37

proformance

<small>注:Chrome开发者工具中的奥迪ts标签页也足以兑现性能分析。</small>

接下去,大家来尝试首个参数。
俺们在控制台输入  votePost(cb_entryId, ‘Digg’, true);  然后回车。
一如既往停在了92行的断点处,这几个里就不调试了,直接F8进入 ajax
的回调函数出。
亚洲必赢官网 38
在此间大家格外清楚的看到,当第多少个参数为 true
的时候,确实是废除推荐了,同时你可以看来推荐数确实 -1
了,哪怕刷新也一如既往。

console.error

用来出口错误新闻

回来顶部

debugger

那几个重量级的是博主最常用的,可能是c++出身,对于单步调试由衷的挚爱。单步调试就是点一下,执行一句程序,并且可以查看当前功能域可知的具有变量和值。而debugger就是告诉程序在那里停下来举办单步调试,俗称断点。

亚洲必赢官网 39

debugger

左侧按钮如下:

  • Pause/Resume script
    execution:暂停/恢复生机脚本执行(程序执行到下一断点为止)。
  • Step over next function call:执行到下一步的函数调用(跳到下一行)。
  • Step into next function call:进入当前函数。
  • Step out of current function:跳出当前推行函数。
  • Deactive/Active all breakpoints:关闭/开启所有断点(不会取消)。
  • Pause on exceptions:万分景况自动断点设置。

其实右边还有好多强劲的效果

亚洲必赢官网 40

what’s more

  • Watch:Watch表达式
  • Call Stack: 栈中变量的调用,那里是递归调用,肯定是在内存栈部分调用。
  • Scope:当前成效域变量观看。
  • BreakPoints:当前断点变量观看。
  • XHR BreakPoints:面向Ajax,专为异步而生的断点调试作用。
  • DOM BreakPoints:主要概括下列DOM断点,注册情势见下图
  1. 当节点属性暴发变化时断点(Break on attributes modifications)
  2. 当节点内部子节点变化时断点(Break on subtree modifications)
  3. 当节点被移除时断点(Break on node removal)

亚洲必赢官网 41

Broken Point

  • Global Listeners:全局事件监听
  • 伊夫nt Listener
    Breakpoints:事件监听器断点,列出了富有页面及脚本事件,包蕴:鼠标、键盘、动画、定时器、XHR等等。

这次大家用到了四个火速键 F10 和 F8,前天详细介绍,明日先学会基础调试先。

console.warn

用以出口警示音信

回去顶部

chrome中的调试技巧

  1. DOM元素的决定台书签
    Chrome开发者工具和Firebug都提供了书签功效,用于显示你在要素标签页(Chrome)或HTML标签页(Firebug)中最后点击的DOM元素。假如您各类选取了A元素、B元素和C元素,那么$0
    表示C元素,$1 表示B元素,$2
    意味A元素。(那一个和正则表达式的$符号类似,不过顺序分化)

  2. 要是您想调试f函数,用debug(f)语句可以增添那种断点。

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

  4. 可以用Chrome开发者工具Sources标签页中的格式化按钮(Pretty Print
    Button)格式化压缩后的代码。

  5. 在Network面板,选拔一个资源文件,右键Copy
    Response可高效复制响应内容。

  6. 使用媒体询问,那几个重点是在Device Mode调节分裂的分辨率突显。

  7. 采纳Elements,按 Esc > Emulation > Sensors举行传感器模拟。

  8. 点击渐入效果样式图标(青色图标),可以预览动画效果,并可对相应的贝塞尔曲线(cubic-bezier)进行调节动画效果。

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

  10. Elements面板右键执行DOM元素节点,拔取Force Element
    State或者点击右边Toggle Element State图标可以出发伪类。

  11. Network面板中甄选一张图纸,在右边图片上鼠标右键选用copy it as a Data
    URI,就可以赢得图片的Data URL (base64编码)。

  12. 因此按住Ctrl键可以增加三个编辑光标,同时对多处举办编辑。按下Ctrl +
    U可以收回编辑。

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

  14. 按下Alt键并且鼠标双击拔取DOM元素前边的箭头,就会开展该DOM元素下的所有字节点元素.

  15. 快捷键:

  • 快捷稳定到行:快捷键Ctrl+O(Mac:CMD+O),输入:行号:列号
    来展开一定
  • 要素搜索:快捷键Ctrl+F(Mac:CMD+F),试试在搜索栏输入ID接纳符或者类接纳符就足以稳定到元素啦

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

console.debug

用以出口调试音讯

用图来说话

亚洲必赢官网 42

亚洲必赢官网,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);

亚洲必赢官网 43

%o占位符,可以用来查看一个目的内部情状

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

亚洲必赢官网 44

下边重点说一下console.log的一对技巧

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

亚洲必赢官网 45

亚洲必赢官网 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;');

亚洲必赢官网 47😉

输出的结果如下图所示:

亚洲必赢官网 48

 

2、利用控制台出口图片

亚洲必赢官网 49

3、指定输出文字的体裁

亚洲必赢官网 50

回来顶部

调剂进程注意事项

1.幸免记录引用类型
当记录对象或数组时,永远记得您在记录什么。记录原始类型时,使用带断点的watch表明式。假若是异步代码,幸免记录引用类型。

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

亚洲必赢官网 51

watch

此处,首个特性中目的引用的值是不可靠的。当您首先次在开发者工具中突显这么些特性时,num的值就已经确定了。之后无论你对同一个引用重新打开多少次都不会生成。

2.尽可能使用 source map。有时生产代码不可能选拔source
map,但好歹,你都不应该直接对生育代码举办调试。

  1. 翻看下面评论的 提交评论 按钮,并找到她的轩然大波。(jQuery 绑定的)
  2. 动态调试这一个 提交评论 事件的推行进度。

console.dirxml

用来呈现网页的某部节点(node)所包含的html/xml代码

亚洲必赢官网 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>

亚洲必赢官网 53😉

亚洲必赢官网 54

回去顶部

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

console.group和console.groupEnd

>输出一组新闻的早先和出口截止一组输出音讯

看您须求选拔差其他输出方法来行使,倘诺上述多少个主意再合营group和groupEnd方法来一头行使就可以输入各样各个的例外款型的出口新闻。

亚洲必赢官网 55

哈哈,是或不是认为很神奇啊!

回到顶部

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

console.assert

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

亚洲必赢官网 56

回来顶部

你或许感兴趣的文章:

  • Chrome调试折腾记之JS断点调试技巧
  • 必备的JS调试技巧汇总
  • js断点调试心得分享(必须求看篇)

console.count

(这些主意格外实用哦)当你想总括代码被执行的次数

亚洲必赢官网 57

回到顶部

console.dir

(那个法子是自家时常应用的 可不知道比for in方便了有点)
直接将该DOM结点以DOM树的布局举行输出,可以详细校对象的章程升高等等

亚洲必赢官网 58

回来顶部

console.time和console.timeEnd

计时上三宝太监计时完工(看了下边的图你刹那间就感受到它的立意了)

亚洲必赢官网 59

回来顶部

console.profile和console.profileEnd

匹配共同利用来查看CPU使用相关音信

亚洲必赢官网 60

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

亚洲必赢官网 61

回到顶部

console.timeLine和console.timeLineEnd

万分共同记录一段时间轴

回来顶部

console.trace

仓库跟踪相关的调试

上述办法只是自家个人明白罢了。假使想查看具体API,可以上合法看看,具体地址为:

上边介绍一下控制台的一部分飞快键

回来顶部

趋势键盘的上下键

世家一用就明白。比如用上键就一定于拔取上次在控制台的输入符号

回来顶部

$_

一声令下归来近来四次表明式执行的结果,作用跟按进步的方向键再回车是一律的

亚洲必赢官网 62

上面的$_亟待领会其奥义才能应用合适,而$0~$4则表示了不久前5个你接纳过的DOM节点。

什么样看头?在页面右击接纳审查元素,然后在弹出来的DOM结点树下边随便点选,那一个被点过的节点会被记录下来,而$0会回来近来两回点选的DOM结点,以此类推,$1重返的是顶级次点选的DOM节点,最多保留了5个,如若不够5个,则赶回undefined

亚洲必赢官网 63

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

看一下chrome控制台一个粗略的操作,如何查看页面元素,看下图就了解了

亚洲必赢官网 64

你在控制台简单操作两回就知晓了,是否认为很简短!

归来顶部

Chrome 控制苏州原生扶助类jQuery的接纳器

也就是说您可以用$加上熟稔的css选拔器来挑选DOM节点

亚洲必赢官网 65

回到顶部

copy

由此此命令可以将在控制台获取到的情节复制到剪贴板(只要在elements面板中选中某个节点,也得以一贯按ctrl+c执行复制操作)

亚洲必赢官网 66

(哈哈
刚刚从控制台复制的body里面的html可以无限制粘贴到哪 比如记事本
是或不是认为成效很强劲)

回来顶部

keys和values

前者重返传入对象具备属性名组成的数据,后者重返所有属性值组成的数组

亚洲必赢官网 67

回去顶部

console.table

亚洲必赢官网 68

重临顶部

monitor & unmonitor

monitor(function),它接受一个函数名作为参数,比如function a,每次a被执行了,都会在支配台出口一条新闻,里面含有了函数的称谓a及进行时所传颂的参数。

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

亚洲必赢官网 69

看了这张图,应该清楚了,也就是说在monitor和unmonitor中间的代码,执行的时候会在控制台出口一条音信,里面包罗了函数的称号a及举行时所传诵的参数。当免除监视(也就是履行unmonitor时)就不再在控制台出口音讯了。

回到顶部

Console.log样式

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

说了上面一堆公式,如故举个例证让您印象深刻一些,哈哈。

在决定台输入如下代码

亚洲必赢官网 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;');

亚洲必赢官网 71😉

出口的结果如下图所示:

亚洲必赢官网 72

 

回去顶部

如果

 

网站地图xml地图