断点与动态调试,简析chrome调试技巧

Chrome控制台 如何调试Javascript

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

上边的稿子一度大致介绍了须臾间console对象实际有哪些方面以及主旨的利用,上边简单介绍一下怎么着使用好chrome控制台这一个神器好好调试javascript代码(那几个才是我们确实能用到实处的地方)

1、先说一下源码定位

我们开拓测试网页 
 看到页面右下方有一个推介的图标吗?右击推荐图标,选用审查元素,打开谷歌控制台,如下图所示

皇家赌场手机版 1

我们明日想驾驭votePost方法到底在哪?跟着自己这么做,在Console面板里面输入votePost然后回车

皇家赌场手机版 2

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

皇家赌场手机版 3

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

皇家赌场手机版 4

此时大家再回去Console面板时会惊奇的觉察原来的链接前边的1现在成为91了(其实那里的数字1要么91就是意味着votePost方法在源码中的行号
)现在观察Pretty print按钮的强大之处了吧

了然了什么样查看某一个按钮的源码,那接下去的做事便是调剂了,调试第一步必要做的便是设置断点,其实设置断点很不难,点击一下上图所示的92即可,那时你会意识92行号旁边会多了一个图标,那里解释一下为啥不在91处安装断点,你可以试下,事实上根本就搓手顿脚在91处上设置断点,因为它是函数的定义处,所以不得已在此设置断点。

皇家赌场手机版 5

断点与动态调试,简析chrome调试技巧。安装好了断点后,你就会在右手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

 

写在前方
本文包罗浏览器调试,不包罗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
  • 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调试技巧。写在前方

我们都有用过各种别型的浏览器,每种浏览器都有投机的特性,本人拙见,在自家用过的浏览器当中,我是最欣赏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面板

要想打开谷歌控制台,有三种方法

  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标签页也在Watch表明式上边展现调用栈。</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开发者工具中的奥迪(Audi)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

 

回去顶部

如果

 

Leave a Comment.