菜单

Chrome console(转)

2019年2月10日 - 金沙前端

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函数就一发不用说调试进去了

下边介绍一下什么样查看,依旧以刚刚那几个测试网页为例子吗,可是本次我们来看“提交评论”作表明呢,

右击“提交评论”–>审核元素,大家可以了然的看出在那些按钮上未绑定任何事件。在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

console.trace

库房跟踪相关的调剂

上述措施只是自个儿个人领悟罢了。借使想查看具体API,可以上合法看看,具体地址为:

上边介绍一下控制台的一些快速键

归来顶部

调节进度注意事项

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

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

图片 9

watch

此间,第三个属性中目的引用的值是不可靠的。当您首先次在开发者工具中显得这一个特性时,num的值就早已确定了。之后无论你对同一个引用重新打开多少次都不会变动。

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

接下去,大家来试验第多少个参数。
咱俩在控制台输入  votePost(cb_entryId, ‘Digg’, true);  然后回车。
如出一辙停在了92行的断点处,那几个里就不调试了,直接F8进去 ajax
的回调函数出。
图片 10
在此处我们丰裕清楚的收看,当第多个参数为 true
的时候,确实是撤消推荐了,同时你可以见到推荐数确实 -1
了,哪怕刷新也一律。

console.profile和console.profileEnd

合营共同利用来查阅CPU使用有关音讯

图片 11

在Profiles面板里面查看就足以观望cpu相关应用音讯

图片 12

再次回到顶部

成组输出

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

图片 13

output in group

课后操练:(进步下难度)

写在前边

世家都有用过各体系型的浏览器,每种浏览器都有协调的特征,本人拙见,在本人用过的浏览器当中,我是最喜爱Chrome的,因为它对于调试脚本及前端设计调试都有它比别的浏览器有过之而无不及的地方。可能大家对console.log会有必然的询问,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音讯呢,上面我就介绍一些调试的入门技巧,让你爱上console.log

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

图片 14

世家可以看到控制台里面有一首诗还有其它信息,倘诺想清空控制台,可以点击左上角那几个图片 15来清空,当然也足以因而在控制台输入console.clear()来兑现清空控制台新闻。如下图所示

图片 16

近来一经一个光景,假设一个数组里面有很多的因素,不过你想驾驭各样元素具体的值,那时候想想假使您用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会油然则生。

上面我们用console.log来替换,感受一下它的魅力。

图片 17

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

看了地点那张图,是还是不是认识到log的强劲之处了,上面大家来看望console里面具体提供了咋样措施可以供我们平日调试时行使。

图片 18

1、先说一下源码定位

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

图片 19

俺们现在想了解votePost方法到底在哪?跟着我如此做,在Console面板里面输入votePost然后回车

图片 20

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

图片 21

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

图片 22

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

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

图片 23

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

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

 

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

里头值得一提的是,当我们点击“推荐”按钮举办调节的时候会意识,不管大家是按的F10举办调试依旧按F11拓展逐级调试,都无法展开$.ajax函数内部,尽管大家在函数内部安装了断点也尚未艺术进去,那里按F8才是实在起成效的,不信你试试。

当大家在调节的时候,右边Scope
Variables里面会显示当前功效域以及他的父级成效域,以及闭包。你不单能在右侧Scope Variables(变量作用域)
一栏处看到眼前变量,而且还是可以把鼠标直接移到任意变量上,就足以查看该变量的值。

用图说话(哈哈)

图片 24

 

正要大家介绍的只是在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]); // 获取绑定的事件

正如图所示:

图片 25

服从上述介绍的主意定位到实际的blog-common.js里面,找到postComment 
然后一稀世的找到具体的代码,再设置断点就好了。

末段介绍一下一个神器,很好用的debugger

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

再次回到顶部

目的输出

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

图片 26

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

图片 27

output in table

大家举办下一步,按3次 F10 就足以观望这么的事物。
图片 28
我们每按一遍 F10
会履行一条语句,刚才按了3次,就是实行到了  $(“#digg_tips”).css(“color”,
“red”).html(“提交中…”); 
就此我们得以在页面上收看 #digg_tips 展现提交中的字样。
然则当我们再一次按 F10 的时候,发现她协同实践下去,而并未进去 ajax
内部的回调函数。

console.table

图片 29

归来顶部

写在面前
本文包含浏览器调试,不包罗web移动端调试。
正文调试均在chrome浏览器进行

本文来源:新浪博主 乱码 的文章。

console.info

用来出口提醒性新闻

回来顶部

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

monitor & unmonitor

monitor(function),它接受一个函数名作为参数,比如function a,每次a被实施了,都会在控制台出口一条信息,里面包蕴了函数的名称a及实施时所盛传的参数。

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

图片 30

看了那张图,应该了解了,也就是说在monitor和unmonitor中间的代码,执行的时候会在支配台出口一条音信,里面含有了函数的称谓a及实施时所盛传的参数。当废除监视(也就是执行unmonitor时)就不再在支配台出口新闻了。

再次来到顶部

格式化输出

除此以外,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");

图片 31

formatted output

今日留的课后陶冶 1. 分析 votePost 函数是怎么样贯彻 推荐 的。
事实上大家早就观看了源码,只要读下源码即可见道她是怎么落到实处的了。

console.dirxml

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

图片 32😉

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

图片 33😉

图片 34

回来顶部

主导输出

兴许大家都在用console.log在控制台出口点东西,其实console还有任何的方法:

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

图片 35

console

专注上边输出的error和throw出的error不均等,前者只是出口错误音讯,不可以捕获,不会冒泡,更不会一噎止餐程序运行。

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

console.log

用以出口普通新闻

回去顶部

debugger

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

图片 36

debugger

右边按钮如下:

实则左边还有众多强劲的功效

图片 37

what’s more

  1. 当节点属性暴发变化时断点(Break on attributes modifications)
  2. 当节点内部子节点变化时断点(Break on subtree modifications)
  3. 当节点被移除时断点(Break on node removal)

图片 38

Broken Point

此次大家用到了多少个火速键 F10 和 F8,明天详细介绍,后天先学会基础调试先。

相关文章

发表评论

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

网站地图xml地图