javascript代码调节和测试之console,开发者工具使用

javascript代码调节和测试之console,开发者工具使用

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

原著出处:
ctriphire   

世家都有用过各种类型的浏览器,每一个浏览器都有投机的本性,本身拙见,在自小编用过的浏览器在这之中,笔者是最欢快Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比其余浏览器有过之而无比不上的地点。只怕我们对console.log会有早晚的垂询,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出新闻呢,上面小编就介绍部分调节和测试的入门技巧,让您爱上console.log

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

图片 1

大家能够看出控制台里面有一首诗还有别的消息,假如想清空控制台,能够点击左上角那么些图片 2来清空,当然也能够通过在支配台输入console.clear()来落实清空控制台信息。如下图所示

图片 3

于今若是3个情景,借使二个数组里面有诸多的要素,可是你想了然各样成分具体的值,那时候想想借使您用alert那将是多惨的一件业务,因为alert阻断线程运营,你不点击alert框的显明按钮下多少个alert就不会油可是生。

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

图片 4

看了地点那张图,是还是不是认识到log的强硬之处了,下边大家来看看console里面具体提供了如何方法能够供我们平素调节和测试时选用。

图片 5

此时此刻控制台方法和个性有:

JavaScript

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

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

下边大家来挨家挨户介绍一下一一艺术主要的用途。

相似情状下大家用来输入新闻的法门重借使用到如下三个

1、console.log 用于出口普通音讯

2、console.info 用于出口提醒性音信

3、console.error用以出口错误新闻

4、console.warn用来出口警示音信

5、console.debug用于出口调节和测试新闻

用图来发话

图片 6

console对象的上边5种办法,都足以应用printf风格的占位符。可是,占位符的品种比较少,只接济字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)八种

JavaScript

console.log(“%d年%d月%d日”,2012,3,26);
console.log(“圆周率是%f”,3.1415926);

1
2
console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

图片 7

%o占位符,能够用来查看3个指标内部境况

JavaScript

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

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

图片 8

6、console.dirxml用来彰显网页的某部节点(node)所蕴藏的html/xml代码**

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

图片 9

7、console.group输出一组消息的上马

8、console.groupEnd甘休一组输出新闻

看你供给采取区别的出口方法来行使,假设上述两个艺术再同盟group和groupEnd方法来共同行使就能够输入各样各个的两样样式的输出新闻。

图片 10

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

9、console.assert对输入的表明式实行预知,只有表明式为false时,才输出相应的新闻到控制台

图片 11

10、console.count(那几个点子丰硕实用哦)当你想总结代码被执行的次数

图片 12

11、console.dir(那么些方法是自身每每应用的 可不知道比for
in方便了不怎么) 直接将该DOM结点以DOM树的协会实行输出,能够详细核查象的法门升高等等

图片 13

12、console.time 计时始发

13、console.timeEnd  计时截止(看了上面包车型大巴图你瞬间就感受到它的立意了)

图片 14

14、console.profileconsole.profileEnd拾壹分协同行使来查阅CPU使用相关新闻

图片 15

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

图片 16

15、console.timeLineconsole.timeLineEnd匹配共同记录一段时间轴

16、console.trace  堆栈跟踪相关的调剂

上述措施只是本身个人知道罢了。假使想查看具体API,可以上合法看看,具体地址为:

 

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

① 、方向键盘的上下键,大家一用就领会。比如用上键就也就是接纳上次在控制台的输入符号

2、$_一声令下归来方今三次表明式执行的结果,成效跟按升高的方向键再回车是如出一辙的

图片 17

上面的$_急需驾驭其奥义才能使用方便,而$0~$4则表示了不久前五个你挑选过的DOM节点。

何以看头?在页面右击选用审查元素,然后在弹出来的DOM结点树上边随便点选,这个被点过的节点会被记录下来,而$0会回来近来一遍点选的DOM结点,以此类推,$1再次回到的是最棒次点选的DOM节点,最多保留了多少个,即使不够伍个,则赶回undefined

图片 18

三 、Chrome
控制奥兰多原生援救类jQuery的采用器
,也正是说你能够用$加上熟习的css选用器来摘取DOM节点

图片 19

4、copy经过此命令能够将在控制台获取到的内容复制到剪贴板

图片 20

(哈哈 刚刚从控制台复制的body里面包车型客车html能够随便粘贴到哪 比如记事本
 是还是不是觉得功用很强大)

5、keys和values 前者再次来到传入对象具备属性名组成的数额,后者重返全数属性值组成的数组

图片 21

说到那,不免想起console.table方法了

图片 22

 

 

本文转自Chrome
控制台console的用法

javascript代码调节和测试之console.log 用法图像和文字详解,javascriptconsole

大家都有用过各类别型的浏览器,各类浏览器都有和好的风味,本身拙见,在自家用过的浏览器个中,作者是最欣赏Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比任何浏览器有过之而无比不上的地点。也许我们对console.log会有自然的刺探,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出消息吗,上边小编就介绍一些调剂的入门技巧,让你爱上console.log

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

图片 23

世家可以看到控制台里面有一首诗还有别的新闻,要是想清空控制台,能够点击左上角这一个图片 24来清空,当然也足以通过在控制台输入console.clear()来贯彻清空控制台音信。如下图所示

图片 25

当今假诺2个气象,假设2个数组里面有成都百货上千的因素,可是你想通晓各种成分具体的值,那时候想想假使您用alert那将是多惨的一件工作,因为alert阻断线程运维,你不点击alert框的显著按钮下1个alert就不会晤世。

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

图片 26

看了上边那张图,是或不是认识到log的雄强之处了,上边大家来看望console里面具体提供了何等方法能够供我们向来调试时选择。

图片 27

眼前控制台方法和属性有:

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

下边大家来挨家挨户介绍一下逐项艺术主要的用处。

相似情状下大家用来输入消息的法门首若是用到如下八个

1、console.log 用于出口普通消息

2、console.info 用于出口提醒性消息

3、console.error用以出口错误新闻

4、console.warn用来出口警示音信

5、console.debug用以出口调节和测试音讯

用图来说话

图片 28

console对象的上边5种格局,都足以运用printf风格的占位符。不过,占位符的体系相比较少,只援救字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)多种

console.log("%d年%d月%d日",2011,3,26);console.log("圆周率是%f",3.1415926);

图片 29

%o占位符,能够用来查阅3个对象内部情形

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

图片 30

六 、console.dirxml用来显示网页的某部节点(node)所包罗的html/xml代码

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

图片 31

7、console.group出口一组音信的起来

8、console.groupEnd甘休一组输出消息

看你须要选拔分歧的出口方法来利用,若是上述八个艺术再配合group和groupEnd方法来一同行使就足以输入各类各类的比不上方式的输出音讯。

图片 32

哈哈哈,是还是不是觉得很神奇啊!

9、console.assert对输入的表达式进行预见,唯有表达式为false时,才输出相应的音信到控制台

图片 33

10、console.count(那个法子13分实用哦)当你想计算代码被实践的次数

图片 34

11、console.dir(这些艺术是本身平常利用的 可不知道比for
in方便了有个别)直接将该DOM结点以DOM树的结构举行输出,能够详细核查象的情势发展等等

图片 35

12、console.time 计时开始

13、console.timeEnd 计时截止(看了上边包车型客车图你刹那间就感受到它的厉害了)

图片 36

14、console.profileconsole.profileEnd协作协同利用来查阅CPU使用相关新闻

图片 37

在Profiles面板里面查看就足以见到cpu相关应用音信

图片 38

15、console.timeLineconsole.timeLineEnd合作协同记录一段时间轴

16、console.trace 堆栈跟踪相关的调剂

上述形式只是本人个人驾驭罢了。借使想查看具体API,能够上合法看看,具体地址为:

控制台的部分快捷键

壹 、方向键盘的上下键,大家一用就了然。比如用上键就相当于选取上次在控制台的输入符号

2、$_命令归来近日贰次表达式执行的结果,功用跟按升高的方向键再回车是同一的

图片 39

上面的$_内需理解其奥义才能采取合适,而$0~$4则象征了目前几个你挑选过的DOM节点。

怎么着意思?在页面右击选取审查元素,然后在弹出来的DOM结点树下面随便点选,那几个被点过的节点会被记录下来,而$0会回去最近一遍点选的DOM结点,以此类推,$1再次来到的是一流次点选的DOM节点,最多保留了几个,如若不够八个,则赶回undefined

图片 40

③ 、Chrome
控制马尔默原生补助类jQuery的接纳器
,约等于说你能够用$累加熟知的css采纳器来选择DOM节点

图片 41

4、copy因此此命令能够将在控制台获取到的始末复制到剪贴板

图片 42

(哈哈 刚刚从控制台复制的body里面包车型大巴html能够自由粘贴到哪, 比如记事本,
是否觉得功能很强劲)

5、keys和values前端再次回到传入对象具备属性名组成的数据,后者重临全部属性值组成的数组

图片 43

说到那,不免想起console.table方法了

图片 44

6、monitor & unmonitor

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

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

图片 45

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

$ // 简单驾驭正是 document.querySelector 而已。$$ // 简单明了就是document.querySelectorAll 而已。$_ // 是上一个表明式的值$0-$4 //
是近日四个Elements面板选中的DOM成分,待会会讲。dir // 其实就是console.dirkeys // 取对象的键名, 重回键名组成的数组values // 去对象的值,
重回值组成的数组

上面看一下console.log的局地技艺

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

图片 46

二 、利用控制台出口图片

图片 47

三 、钦赐输出文字的体裁

图片 48

末尾说一下chrome控制台三个简短的操作,如何查看页面元素,看下图就清楚了

图片 49

你在支配台简单操作二次就精通了,是或不是觉得非常粗略!

用法图像和文字详解,javascriptconsole
我们都有用过各种类型的浏览器,每一个浏览器都有和好的特色,自个儿拙见,在本人用…

6、monitor & unmonitor

monitor(function),它接受三个函数名作为参数,比如function a,每次a被执行了,都会在决定台出口一条新闻,里面富含了函数的名号a及执行时所盛传的参数。

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

图片 50

看了那张图,应该驾驭了,也便是说在monitor和unmonitor中间的代码,执行的时候会在决定台出口一条消息,里面富含了函数的名号a及实施时所盛传的参数。当撤消监视(约等于举行unmonitor时)就不再在决定台出口新闻了。

JavaScript

$ // 不难精晓便是 document.querySelector 而已。 $$ // 不难明了就是document.querySelectorAll 而已。 $_ // 是上贰个表达式的值 $0-$4 //
是近年陆个Elements面板选中的DOM成分,待会会讲。 dir // 其实正是console.dir keys // 取对象的键名, 重回键名组成的数组 values //
去对象的值, 再次来到值组成的数组

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

 

上面看一下console.log的一对技巧

① 、重写console.log 改变输出文字的样式

图片 51

二 、利用控制台出口图片

图片 52

③ 、内定输出文字的体制

图片 53

终极说一下chrome控制台3个简易的操作,如何查看页面成分,看下图就知道了

图片 54

您在支配台简单操作二遍就通晓了,是还是不是觉得很简单!

赞 6 收藏
评论

图片 55


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

图片 56

我们能够阅览控制台里面有一首诗还有别的音讯,要是想清空控制台,能够点击左上角那些

图片 57

来清空,当然也足以经过在支配台输入console.clear()来贯彻清空控制台音信。如下图所示

图片 58

今后一旦二个现象,假使1个数组里面有许多的成分,可是你想清楚各类元素具体的值,那时候想想若是你用alert这将是多惨的一件工作,因为alert阻断线程运营,你不点击alert框的鲜明按钮下叁个alert就不会出现。
上边大家用console.log来替换,感受一下它的吸引力。

图片 59

看了上面这张图,是或不是认识到log的兵不血刃之处了,下边咱们来看望console里面具体提供了怎么样方法能够供大家一贯调节和测试时行使。

图片 60

当下控制台方法和属性有:
[“$$”, “$x”, “dir”, “dirxml”, “keys”, “values”, “profile”,
“profileEnd”, “monitorEvents”, “unmonitorEvents”, “inspect”, “copy”,
“clear”, “getEventListeners”, “undebug”, “monitor”, “unmonitor”,
“table”, “$0”, “$1”, “$2”, “$3”, “$4”, “$_”]
上边大家来挨家挨户介绍一下梯次艺术首要的用途。
貌似景观下大家用来输入音讯的方法首如若用到如下多少个
1、console.log 用于出口普通新闻
2、console.info 用来出口提醒性音讯
3、console.error用于出口错误音信
4、console.warn用以出口警示音信
5、console.debug用于出口调节和测试消息
用图来发话


图片 61

console对象的方面5种办法,都能够应用printf风格的占位符。但是,占位符的系列相比少,只援救字符(%s)、整数(%d或%i)、浮点数(%f)和指标(%o)各个。
console.log(“%d年%d月%d日”,二〇一一,3,26);console.log(“圆周率是%f”,3.1415926);

图片 62

%o占位符,能够用来查阅3个指标内部景色
var dog = {};dog.name = “大毛”;dog.color = “黄色”;console.log(“%o”,
dog);

图片 63

6、console.dirxml用来显示网页的某部节点(node)所包蕴的html/xml代码****
<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>

发表评论

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

网站地图xml地图