Chrome console(转)

Chrome控制台 如何调节和测试Javascript

2015/01/12 · JavaScript
· Chrome

初稿出处:
ctriphire   

地点的篇章现已大概介绍了一下console对象实际有哪些方面以及核心的施用,上边简单介绍一下如何使用好chrome控制台这么些神器好好调节和测试javascript代码(这几个才是大家确实能用到实处的地点)

一、先说一下源码定位

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

金沙js333娱乐场 1

咱俩前几日想驾驭votePost方法到底在哪?跟着本身这么做,在Console面板里面输入votePost然后回车

金沙js333娱乐场 2

一向点击上海教室标红的链接,控制台将定位到Sources面板中,体现如下图所示

金沙js333娱乐场 3

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

金沙js333娱乐场 4

此刻大家再回来Console面板时会惊奇的发现原本的链接前边的一未来成为玖一了(其实那里的数字1要么9壹就是意味votePost方法在源码中的行号
)今后见到Pretty print按钮的无敌之处了呢

知情了何等查看某三个按钮的源码,那接下去的行事就是调节了,调节和测试第3步必要做的就是安装断点,其实设置断点很简短,点击一下上航海用体育场所所示的玖贰即可,那时你会发觉九二行号旁边会多了二个图标,那里解释一下为啥不在九一处设置断点,你能够试下,事实上根本就无法在玖1处上安装断点,因为它是函数的定义处,所以无法在此设置断点。

金沙js333娱乐场 5

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

我们先来介绍一下用到的调节和测试火速键吧(事实上大家也能够毫无下表所示的连忙键,直接点击上海教室所示左边栏最上层的一排按钮来拓展调节和测试,具体用哪些按钮,把鼠标放到按钮上方壹会就会来得它对应的唤醒)

 

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

里头值得说的是,当大家点击“推荐”按钮举办调节的时候会发现,不管大家是按的F10实行调节和测试依旧按F1一拓展逐级调试,都无法展开$.ajax函数内部,固然大家在函数内部安装了断点也绝非主意进去,那里按F八才是真的起功效的,不信你尝试。

当大家在调节的时候,左边Scope
Variables里面会呈现当前效能域以及他的父级效用域,以及闭包。你非但能在右侧Scope Variables(变量成效域)
1栏处看到日前变量,而且仍是能够把鼠标直接移到自由变量上,就能够查阅该变量的值。

用图说话(哈哈)

金沙js333娱乐场 6

 

赶巧大家介绍的只是在html里面能够看收获它绑定了onclick事件,那样大家就找到它绑定的js函数,假使它是在jQuery页面加载成功函数里面绑定的,那时候大家怎么精通它绑定的是哪个js函数呢,如果大家不知底绑定的js函数就越来越不用说调试进去了

上边介绍一下怎么着查看,照旧以刚刚那3个测试网页为例子吗,然而这一次我们来看“提交评论”作表明呢,

右击“提交评论”–>审核元素,大家可以领略的阅览在这些按钮上未绑定任何事件。在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]); // 获取绑定的事件

正如图所示:

金沙js333娱乐场 7

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

最终介绍一下2个神器,很好用的debugger

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

赞 1 收藏
评论

金沙js333娱乐场 8

 

写在头里
正文包罗浏览器调节和测试,不包蕴web移动端调试。
本文调节和测试均在chrome浏览器实行

开卷目录

alert

这些不用多说了,不言自明

  • 写在前边
  • 谷歌(谷歌(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

回到顶部

主干输出

莫不大家都在用console.log在控制台出口点东西,其实console还有别的的法子:

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

金沙js333娱乐场 9

console

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

写在日前

我们都有用过各种类型的浏览器,各样浏览器都有谈得来的性状,本人拙见,在自家用过的浏览器个中,作者是最欢娱Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比别的浏览器有过之而无不比的地点。也许我们对console.log会有一定的摸底,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么1长串的字符串来替代alert输出音讯吗,上面小编就介绍1些调节的入门技巧,让你爱上console.log

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

金沙js333娱乐场 10

世家能够看出控制台里面有1首诗还有别的消息,要是想清空控制台,可以点击左上角这几个金沙js333娱乐场 11来清空,当然也得以透过在决定台输入console.clear()来贯彻清空控制台信息。如下图所示

金沙js333娱乐场 12

现今壹旦三个情景,如若一个数组里面有许多的要素,不过你想清楚各种成分具体的值,那时候想想要是你用alert那将是多惨的1件业务,因为alert阻断线程运营,你不点击alert框的规定按钮下1个alert就不会并发。

下边我们用console.log来替换,感受一下它的吸重力。

金沙js333娱乐场 13

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

看了地点那张图,是否认识到log的强劲之处了,下边大家来看望console里面具体提供了何等措施能够供我们平时调试时使用。

金沙js333娱乐场 14

一、先说一下源码定位

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

金沙js333娱乐场 15

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

金沙js333娱乐场 16

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

金沙js333娱乐场 17

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

金沙js333娱乐场 18

那儿大家再再次来到Console面板时会惊奇的意识原先的链接前边的1以往成为玖一了(其实那里的数字1依然玖一正是代表votePost方法在源码中的行号
)将来见到Pretty print按钮的强劲之处了吗

通晓了何等查看某八个按钮的源码,那接下去的劳作正是调剂了,调节和测试第壹步供给做的正是设置断点,其实设置断点相当粗略,点击一下上航海用体育场面所示的92即可,那时你会发现九2行号旁边会多了三个图标,那里解释一下为何不在九1处安装断点,你能够试下,事实上根本就无奈在玖一处上设置断点,因为它是函数的定义处,所以不得已在此设置断点。

金沙js333娱乐场 19

设置好了断点后,你就会在右手Breakpoints方框里观看刚刚安装的断点。

我们先来介绍一下用到的调剂飞速键吧(事实上大家也得以不用下表所示的火速键,直接点击上海教室所示左侧栏最上层的1排按钮来开展调剂,具体用哪个按钮,把鼠标放到按钮上方1会就会显得它对应的提示)

 

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

其间值得一提的是,当我们点击“推荐”按钮进行调节和测试的时候会意识,不管我们是按的F拾进行调剂照旧按F1一开展逐步调节和测试,都没办法实行$.ajax函数内部,即便大家在函数内部设置了断点也未曾办法进入,那里按F八才是确实起效果的,不信你尝试。

当我们在调节和测试的时候,左侧Scope
Variables里面会议及展览示当前功能域以及她的父级成效域,以及闭包。你不单能在左侧Scope Variables(变量功能域)
1栏处看到如今变量,而且还能够把鼠标直接移到自由变量上,就足以查看该变量的值。

用图说话(哈哈)

金沙js333娱乐场 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]); // 获取绑定的事件

如下图所示:

金沙js333娱乐场 21

依据上述介绍的法子定位到现实的blog-common.js里面,找到postComment 
然后1稀缺的找到切实可行的代码,再安装断点就好了。

提起底介绍一下3个神器,很好用的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");

金沙js333娱乐场 22

formatted output

谷歌(谷歌)控制台Elements面板

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

  1. ctrl+shift+i
  2. f12

我们知道Elements面板最大的功用正是操作属性和修改html。那里本人再说一些豪门兴许不太熟练的性状,

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

那么些功能是作者觉着最有意思的,你们能够试试啊。

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

回去顶部

金沙js333娱乐场 ,DOM输出

上面多少个相比较简单的,就不举例子了,简单说一下:

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

金沙js333娱乐场 23

DOM output

查看成分上绑定的事体

  • 暗中认可会列出 All Nodes, 这个包含代办绑定在该节点的父/祖父节点上的事件,
    因为在在冒泡或捕获阶段会透过该节点
  • Selected Node Only 只会列出当前节点上绑定的风云
  • 各个事件会有照应的多少个特性 handler, isAtribute, lineNumber,
    listenerBody, sourceName, type, useCapture

 

  • handler是处理函数, 右键能够观察这几个函数定义的地点, 一般 js
    库绑定事件会包一层, 所以那里很难找到对应handler
  • isAtribute 申明事件是不是因此 html 属性(类似onClick)形式绑定的
  • useCapture 是 add伊芙ntListener 的第多少个参数, 表达事件是以 冒泡 还是捕获 顺序执行

金沙js333娱乐场 24

重返顶部

指标输出

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

金沙js333娱乐场 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);

金沙js333娱乐场 26

output in table

体制操作

能够通过 ctrl + z 撤销

金沙js333娱乐场 27

回到顶部

成组输出

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

金沙js333娱乐场 28

output in group

总况

现阶段控制台方法和属性有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

上面大家来挨家挨户介绍一下相继艺术首要的用处。

1般景色下大家用来输入消息的章程主倘若用到如下多少个

归来顶部

函数计数和跟踪

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

金沙js333娱乐场 29

trace of fun

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

console.log

用于出口普通音信

再次来到顶部

计时

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

金沙js333娱乐场 30

time

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

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

金沙js333娱乐场 31

assert

console.info

用于出口提醒性新闻

回到顶部

个性分析

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

金沙js333娱乐场 32

proformance

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

发表评论

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