【必发88】怎么调试Javascript,js调试体系

by admin on 2019年1月31日

Chrome控制台 怎么着调试Javascript

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

上边的稿子业已大致介绍了瞬间console对象实际有哪些方面以及主旨的采纳,下边不难介绍一下如何采用好chrome控制台那么些神器好好调试javascript代码(那一个才是我们实在能用到实处的地点)

1、先说一下源码定位

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

必发88 1

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

必发88 2

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

必发88 3

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

必发88 4

此时大家再回去Console面板时会惊奇的意识原来的链接前边的1现在改为91了(其实那里的数字1依旧91就是象征votePost方法在源码中的行号
)现在来看Pretty print按钮的强大之处了吧

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

必发88 5

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

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

 

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

内部值得一提的是,当大家点击“推荐”按钮举行调节的时候会发现,不管我们是按的F10举办调试照旧按F11进展逐级调试,都没办法展开$.ajax函数内部,纵然大家在函数内部安装了断点也从不艺术进去,那里按F8才是实在起成效的,不信你尝试。

当大家在调试的时候,左侧Scope
Variables里面会来得当前功效域以及她的父级功能域,以及闭包。你非但能在右手
Scope Variables(变量成效域)
一栏处看到眼前变量,而且仍可以把鼠标直接移到自由变量上,就可以查阅该变量的值。

【必发88】怎么调试Javascript,js调试体系。用图说话(哈哈)

必发88 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]); // 获取绑定的事件

如下图所示:

必发88 7

安分守纪上述介绍的措施定位到实际的blog-common.js里面,找到postComment
 然后一罕见的找到切实可行的代码,再设置断点就好了。

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

一经您自己写的代码,你执行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你尝试!哈哈

赞 1 收藏
评论

必发88 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
  • 动向键盘的上下键
  • 【必发88】怎么调试Javascript,js调试体系。$_
  • Chrome
    控制罗利原生支持类jQuery的选用器
  • 必发88,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();//清空控制台(这个下方截图中没有)

必发88 9

console

在意上边输出的error和throw出的error差距,前者只是出口错误音信,不能捕获,不会冒泡,更不会暂停程序运行。

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

写在面前

世家都有用过各连串型的浏览器,每种浏览器都有温馨的表征,本人拙见,在自家用过的浏览器当中,我是最欣赏Chrome的,因为它对于调试脚本及前端设计调试都有它比其余浏览器有过之而无不及的地点。可能我们对console.log会有自然的刺探,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音讯呢,下边我就介绍部分调试的入门技巧,让您爱上console.log

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

必发88 10

世家可以见到控制台里面有一首诗还有其余音信,假使想清空控制台,能够点击左上角那多少个必发88 11来清空,当然也足以通过在控制台输入console.clear()来落到实处清空控制台音信。如下图所示

必发88 12

方今一经一个情景,假设一个数组里面有成百上千的元素,不过你想通晓各类元素具体的值,那时候想想假如您用alert那将是多惨的一件业务,因为alert阻断线程运行,你不点击alert框的规定按钮下一个alert就不会现出。

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

必发88 13

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

看了地点那张图,是否认识到log的强劲之处了,上面大家来看望console里面具体提供了如何方法可以供大家一贯调试时选用。

必发88 14

1、先说一下源码定位

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

必发88 15

咱俩明日想知道votePost方法到底在哪?跟着自己那样做,在Console面板里面输入votePost然后回车

必发88 16

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

必发88 17

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

必发88 18

那儿我们再再次回到Console面板时会惊奇的意识原先的链接后边的1现在成为91了(其实那里的数字1或者91就是表示votePost方法在源码中的行号
)现在看来Pretty print按钮的强劲之处了吗

掌握了哪些查看某一个按钮的源码,那接下去的办事便是调剂了,调试第一步要求做的便是设置断点,其实设置断点很粗略,点击一下上图所示的92即可,这时你会发觉92行号旁边会多了一个图标,那里解释一下为何不在91处安装断点,你可以试下,事实上根本就无奈在91处上设置断点,因为它是函数的定义处,所以不得已在此设置断点。

必发88 19

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

咱俩先来介绍一下用到的调试疾速键吧(事实上大家也可以毫无下表所示的神速键,直接点击上图所示左边栏最上层的一排按钮来拓展调试,具体用哪些按钮,把鼠标放到按钮上方一会就会显示它对应的唤起)

 

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

内部值得一提的是,当我们点击“推荐”按钮进行调节的时候会意识,不管大家是按的F10举办调试照旧按F11拓展逐级调试,都没办法进行$.ajax函数内部,即便我们在函数内部设置了断点也从没艺术进入,那里按F8才是实在起成效的,不信你试试。

当咱们在调节的时候,左侧Scope
Variables里面会展现当前功用域以及她的父级效率域,以及闭包。你不单能在左侧Scope Variables(变量效用域)
一栏处看到眼前变量,而且还是可以把鼠标直接移到自由变量上,就足以查看该变量的值。

用图说话(哈哈)

必发88 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]); // 获取绑定的事件

正如图所示:

必发88 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");

必发88 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是动态的,所以这个得到的结果肯定是动态的

必发88 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 的首个参数, 表明事件是以 冒泡 仍然捕获 顺序执行

必发88 24

再次来到顶部

目的输出

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

必发88 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);

必发88 26

output in table

必发88 27
so easy,大家就一定到了源码。
接下去大家点下92可怜数字,举办下断点操作。
干什么不是在91行下断点呢?
因为91行是函数申明部分,没办法下断点,大家在函数要实践的代码处下断点才行。
必发88 28
探望 91
行的行号变成青色了,表示那么些地点早就下了断点了。同时,我们得以在右侧Breakpoints 一栏里看看已下的断点。
Breakpoints
那些一栏是管理所有断点的,可以便宜的跳转到对应断点的职位出,以后平时会用到哦。

体制操作

可以通过 ctrl + z 打消

必发88 29

回来顶部

成组输出

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

必发88 30

output in group

现行下完断点了,大家回头点下
推荐。。(尽管感到自己在骗推荐,然而自己虔诚没这样想,当初是不管找了个按钮当训练的。)
当您点 推荐
按钮的时候,神奇的政工时有暴发了,并不曾运行推荐功效,而是跳到了控制台
Sources 面板里我们刚刚下的尤其断点处。
必发88 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);

必发88 32

trace of fun

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

俺们举办下一步,按3次 F10 就足以看出那般的事物。
必发88 33
俺们每按几次 F10
会实施一条语句,刚才按了3次,就是实施到了  $(“#digg_tips”).css(“color”,
“red”).html(“提交中…”); 
因而我们可以在页面上看到 #digg_tips 呈现提交中的字样。
不过当我们重新按 F10 的时候,发现她一道举办下去,而没有进来 ajax
内部的回调函数。

console.log

用于出口普通新闻

回到顶部

计时

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

必发88 34

time

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

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

必发88 35

assert

这是个纠结的标题,也是自家要重点说的。
像那种回调函数,更加是异步的,大家要在回调函数内部再度下一个断点。
于是我们在 96 行再下个断点即可,现在我们再点一下 推荐 如故停在了 92
行,咱们平素按 F8 就可以在 ajax 的回调函数处断下了。
必发88 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();

必发88 37

proformance

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

接下去,大家来实验第多个参数。
大家在决定台输入  votePost(cb_entryId, ‘Digg’, true);  然后回车。
一如既往停在了92行的断点处,这么些里就不调试了,间接F8跻身 ajax
的回调函数出。
必发88 38
在此处大家那么些驾驭的收看,当第一个参数为 true
的时候,确实是撤除推荐了,同时您可以看来推荐数确实 -1
了,哪怕刷新也一如既往。

console.error

用来出口错误音信

归来顶部

debugger

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

必发88 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:非凡情形自动断点设置。

实际上左边还有很多强硬的意义

必发88 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)

必发88 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

用来出口调试音讯

用图来讲话

必发88 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);

必发88 43

%o占位符,可以用来查阅一个对象内部情状

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

必发88 44

上边重点说一下console.log的一部分技能

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

必发88 45

必发88 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;');

必发88 47😉

输出的结果如下图所示:

必发88 48

 

2、利用控制台出口图片

必发88 49

3、指定输出文字的体制

必发88 50

回来顶部

调节进度注意事项

1.防止记录引用类型
当记录对象或数组时,永远记得你在记录什么。记录原始类型时,使用带断点的watch表达式。就算是异步代码,防止记录引用类型。

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

必发88 51

watch

此处,第二个特性中目的引用的值是不可靠的。当您首先次在开发者工具中浮现那么些特性时,num的值就已经规定了。之后无论你对同一个引用重新打开多少次都不会变卦。

2.尽可能使用 source map。有时生产代码不能够使用source
map,但无论怎么样,你都不应有直接对生育代码进行调剂。

  1. 查看上边评论的 提交评论 按钮,并找到她的风浪。(jQuery 绑定的)
  2. 动态调试那几个 提交评论 事件的履行进度。

console.dirxml

用来突显网页的某个节点(node)所富含的html/xml代码

必发88 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>

必发88 53😉

必发88 54

回来顶部

假如不会以此磨练,推荐看下 《浅谈 jQuery
事件源码定位难点》,有详细分析哦。

console.group和console.groupEnd

>输出一组音讯的早先和输出甘休一组输出新闻

看你必要选取差别的出口方法来选拔,假设上述多少个艺术再合作group和groupEnd方法来一同利用就足以输入各样各种的不比格局的出口新闻。

必发88 55

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

回来顶部

本文来源:乐乎博主 乱码 的小说。

console.assert

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

必发88 56

重回顶部

你或许感兴趣的稿子:

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

console.count

(这么些法子丰富实用哦)当您想统计代码被执行的次数

必发88 57

回去顶部

console.dir

(那几个艺术是我不时采纳的 可不知道比for in方便了稍稍)
直接将该DOM结点以DOM树的结构举办输出,可以详细查对象的主意发展等等

必发88 58

归来顶部

console.time和console.timeEnd

计时早先和计时竣事(看了上边的图你弹指间就感受到它的决心了)

必发88 59

回来顶部

console.profile和console.profileEnd

同盟共同利用来查看CPU使用有关音信

必发88 60

在Profiles面板里面查看就足以看到cpu相关应用新闻

必发88 61

回去顶部

console.timeLine和console.timeLineEnd

非常协同记录一段时间轴

归来顶部

console.trace

库房跟踪相关的调试

上述措施只是本人个人精通罢了。如果想查看具体API,可以上合法看看,具体地址为:

下边介绍一下控制台的局地火速键

归来顶部

动向键盘的上下键

大家一用就领悟。比如用上键就相当于选取上次在控制台的输入符号

回来顶部

$_

命令归来近日五回表达式执行的结果,效能跟按提升的方向键再回车是同一的

必发88 62

上面的$_亟待精通其奥义才能利用方便,而$0~$4则象征了多年来5个你挑选过的DOM节点。

哪些意思?在页面右击选拔审查元素,然后在弹出来的DOM结点树上边随便点选,那么些被点过的节点会被记录下来,而$0会回来近期一次点选的DOM结点,以此类推,$1再次来到的是最佳次点选的DOM节点,最多保留了5个,如果不够5个,则赶回undefined

必发88 63

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

看一下chrome控制台一个大约的操作,怎么样查看页面元素,看下图就领会了

必发88 64

您在支配台简单操作三次就精通了,是还是不是认为很简短!

回到顶部

Chrome 控制斯特拉斯堡原生援助类jQuery的选拔器

也就是说你可以用$增进驾驭的css选用器来挑选DOM节点

必发88 65

回来顶部

copy

通过此命令可以将在控制台获取到的始末复制到剪贴板(假若在elements面板中当选某个节点,也足以直接按ctrl+c执行复制操作)

必发88 66

(哈哈
刚刚从控制台复制的body里面的html可以擅自粘贴到哪 比如记事本
是否觉得功用很有力)

再次来到顶部

keys和values

前者重回传入对象拥有属性名组成的数码,后者重返所有属性值组成的数组

必发88 67

再次回到顶部

console.table

必发88 68

归来顶部

monitor & unmonitor

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

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

必发88 69

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

归来顶部

Console.log样式

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

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

在支配台输入如下代码

必发88 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;');

必发88 71😉

出口的结果如下图所示:

必发88 72

 

重返顶部

如果

 

发表评论

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

网站地图xml地图