哪些调节和测试Javascript,简析chrome调节和测试技巧

哪些调节和测试Javascript,简析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按钮的精锐之处了啊

知晓了怎么着查看某一个按钮的源码,那接下去的工作正是调节了,调节和测试第3步须求做的就是设置断点,其实设置断点很简短,点击一下上海教室所示的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函数就尤其不用说调节和测试进去了

下边介绍一下什么样查看,仍旧以刚刚那1个测试网页为例子吗,但是此次大家来看“提交评论”作注明呢,

右击“提交评论”–>审核成分,大家能够知道的看来在那个按钮上未绑定任何事件。在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浏览器举办

翻阅目录

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();//清空控制台(这个下方截图中没有)

图片 9

console

小心上面输出的error和throw出的error不等同,前者只是出口错误新闻,无法捕获,不会冒泡,更不会暂停程序运维。

写在前方

世家都有用过种种类型的浏览器,每个浏览器都有和好的特色,本身拙见,在本身用过的浏览器个中,小编是最喜爱Chrome的,因为它对于调试脚本及前端设计调节和测试都有它比其他浏览器有过之而无不如的地点。只怕我们对console.log会有一定的打听,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音信呢,上边小编就介绍部分调剂的入门技巧,让您爱上console.log

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

图片 10

大家能够看出控制台里面有一首诗还有别的新闻,若是想清空控制台,可以点击左上角那一个图片 11来清空,当然也得以经过在决定台输入console.clear()来兑现清空控制台新闻。如下图所示

图片 12

现行反革命就算一个地方,就算贰个数组里面有无数的成分,然而你想清楚种种成分具体的值,那时候想想假诺你用alert那将是多惨的一件事情,因为alert阻断线程运营,你不点击alert框的规定按钮下2个alert就不会合世。

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

图片 13

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

看了上边这张图,是还是不是认识到log的兵不血刃之处了,上边我们来探视console里面具体提供了什么样措施能够供我们日常调节和测试时选拔。

图片 14

① 、先说一下源码定位

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

图片 15

我们今后想精通votePost方法到底在哪?跟着本身如此做,在Console面板里面输入votePost然后回车

图片 16

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

图片 17

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

图片 18

这时候大家再回去Console面板时会惊奇的意识原先的链接前面的1现在改为91了(其实那里的数字1依然91就是代表votePost方法在源码中的行号
)今后见到Pretty print按钮的强劲之处了呢

通晓了何等查看某三个按钮的源码,那接下去的做事正是调节了,调节和测试第1步必要做的就是安装断点,其实设置断点很不难,点击一下上海教室所示的92即可,那时你会发现92行号旁边会多了2个图标,那里解释一下为何不在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

谷歌(谷歌(Google))决定台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

翻看成分上绑定的作业

  • 暗中认可会列出 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

体制操作

能够由此 ctrl + z 裁撤

图片 27

重回顶部

成组输出

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

图片 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", "$_"]

上边大家来挨家挨户介绍一下每一个艺术首要的用处。

一般情况下我们用来输入音信的章程主倘使用到如下八个

回来顶部

函数计数和跟踪

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

图片 29

trace of fun

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

console.log

用于出口普通音信

回来顶部

计时

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

图片 30

time

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

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

图片 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();

图片 32

proformance

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

相关文章

发表评论

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

网站地图xml地图