用法图像和文字详解,开拓者工具使用

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

现行反革命若是叁个场景,假设贰个数组里面有大多的因素,可是你想领悟各样成分具体的值,那时候想想纵然你用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日",二零一三,3,26); console.log("圆周率是%f",3.1415926);

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

图片 7

%o占位符,能够用来查阅三个对象内部景观

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,能够上合法看看,具体地址为:

 

下边介绍一下调整台的部分快速键

1、方向键盘的上下键,大家一用就清楚。举例用上键就一定于接纳上次在调整台的输入符号

2、$_指令归来近些日子二回表明式实施的结果,作用跟按升高的方向键再回车是同样的

图片 17

上面的$_需求了解其奥义本领采纳相当,而$0~$4则意味着了近年5个你挑选过的DOM节点。

怎样意思?在页面右击选取审查元素,然后在弹出来的DOM结点树上边随意点选,这么些被点过的节点会被记录下来,而$0会回到方今一次点选的DOM结点,以此类推,$1重回的是极品次点选的DOM节点,最多保留了5个,假诺相当不够5个,则赶回undefined

图片 18

3、Chrome 调控新北原生协理类jQuery的选取器,也便是说你能够用$加多驾驭的css选用器来抉择DOM节点

图片 19

4、copy通过此命令能够将要调节台获取到的内容复制到剪贴板

图片 20

(哈哈 刚刚从调控台复制的body里面包车型大巴html可以Infiniti制粘贴到哪 比如记事本  是否以为功效很强劲)

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

这段日子一经三个情景,如若一个数组里面有大多的成分,但是你想精晓各种成分具体的值,那时候想想倘若您用alert那将是多惨的一件事情,因为alert阻断线程运转,你不点击alert框的鲜明按键下叁个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占位符,能够用来查阅二个对象内幕

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

图片 30

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>

图片 31

7、console.group输出一组消息的启幕

8、console.groupEnd终止一组输出新闻

看你供给接纳区别的出口方法来利用,要是上述八个艺术再协作group和groupEnd方法来一块利用就足以输入多姿多彩的区别式样的输出新闻。

图片 32

哈哈哈,是还是不是认为相当漂亮妙啊!

9、console.assert对输入的表达式进行预感,独有表达式为false时,才输出相应的消息到调控台

图片 33

10、console.count(那些艺术十一分实用哦)当您想计算代码被推行的次数

图片 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,能够上合法看看,具体地址为:

调整台的一对急忙键

1、方向键盘的上下键,大家一用就知道。举例用上键就也就是选取上次在调整台的输入符号

2、$_命令归来方今贰回表达式实行的结果,功能跟按升高的方向键再回车是一致的

图片 39

上面的$_急需理解其奥义技艺利用方便,而$0~$4则意味了多年来5个你采取过的DOM节点。

怎样意思?在页面右击选取审查元素,然后在弹出来的DOM结点树上边随意点选,那一个被点过的节点会被记录下来,而$0会回来近些日子贰遍点选的DOM结点,就那样推算,$1再次回到的是一流次点选的DOM节点,最多保留了5个,借使缺乏5个,则赶回undefined

图片 40

3、Chrome 调节台中原生辅助类jQuery的选用器,也正是说你能够用$拉长熟识的css选取器来挑选DOM节点

图片 41

4、copy透过此命令能够将要调控台获取到的从头到尾的经过复制到剪贴板

图片 42

(哈哈 刚刚从调控台复制的body里面包车型地铁html能够私下粘贴到哪, 比方记事本, 是或不是以为成效很强劲)

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

图片 43

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

图片 44

6、monitor & unmonitor

monitor(function),它接受二个函数名作为参数,举个例子function a,每次a被试行了,都会在支配台出口一条音讯,里面含有了函数的名目a及实行时所传颂的参数。

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

图片 45

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

$ // 老妪能解正是 document.querySelector 而已。$$ // 轻易通晓就是document.querySelectorAll 而已。$_ // 是上三个表明式的值$0-$4 // 是这几天5个Elements面板选中的DOM成分,待会会讲。dir // 其实就是console.dirkeys // 取对象的键名, 重返键名组成的数组values // 去对象的值, 重返值组成的数组

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

1、重写console.log 退换输出文字的体裁

图片 46

2、利用调整台出口图片

图片 47

3、钦赐输出文字的体制

图片 48

末尾说一下chrome调整台贰个简短的操作,怎样查看页面成分,看下图就知晓了

图片 49

您在支配台轻便操作一回就通晓了,是还是不是感觉很简短!

用法图像和文字详解,javascriptconsole 大家都有用过各体系型的浏览器,每一个浏览器都有本人的风味,自身拙见,在自家用...

世家都有用过各类别型的浏览器,各样浏览器都有温馨的表征,本身拙见,在本身用过的浏览器个中,小编是最垂怜Chrome的,因为它对于调节和测量检验脚本及前端设计调节和测验都有它比任何浏览器有过之而无不如的地方。恐怕我们对console.log会有必然的摸底,心里难免会想调节和测量检验的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来代替alert输出新闻吗,下面作者就介绍部分调节和测量检验的入门本领,让您爱上console.log

6、monitor & unmonitor

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

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

图片 50

看了那张图,应该清楚了,也正是说在monitor和unmonitor中间的代码,实施的时候会在调整台出口一条音讯,里面包蕴了函数的称呼a及实施时所传诵的参数。当裁撤监视(也正是实行unmonitor时)就不再在支配台出口消息了。

JavaScript

$ // 简单了然正是 document.querySelector 而已。 $$ // 老妪能解正是document.querySelectorAll 而已。 $_ // 是上三个表明式的值 $0-$4 // 是新近5个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的局地技术

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

图片 51

2、利用调节台出口图片

图片 52

3、钦赐输出文字的样式

图片 53

最后说一下chrome调整台三个简短的操作,如何查看页面成分,看下图就知晓了

图片 54

你在调控台轻巧操作贰次就知道了,是否认为很简短!

赞 6 收藏 评论

图片 55


先的简约介绍一下chrome的调整台,展开chrome浏览器,按f12就可以轻易的开发调整台

先的简介一下chrome的调控台,展开chrome浏览器,按f12就足以轻易的打开调节台

图片 56

图片 57

大家能够看出调节台里面有一首诗还会有其他音讯,借使想清空气调节器控台,能够点击左上角那么些图片 58来清空,当然也得以透过在调整台输入console.clear()来贯彻清空气调节器整台音讯。如下图所示

咱们能够看看调控台里面有一首诗还只怕有别的音讯,假设想清空控制台,能够点击左上角这多少个

图片 59

图片 60

未来一经二个现象,如果三个数组里面有那几个的成分,不过你想精通各类元素具体的值,那时候想想借使您用alert那将是多惨的一件事情,因为alert阻断线程运转,你不点击alert框的分明开关下叁个alert就不会产出。

来清空,当然也得以通过在控制台输入console.clear()来促成清空气调节器整台音信。如下图所示

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

图片 61

图片 62

当今只要贰个气象,假使叁个数组里面有成都百货上千的因素,但是你想了解各类成分具体的值,那时候想想假若你用alert那将是多惨的一件职业,因为alert阻断线程运维,你不点击alert框的规定按键下贰个alert就不会现出。
上边大家用console.log来替换,感受一下它的吸重力。

看了上面那张图,是还是不是认知到log的兵不血刃之处了,上边大家来拜访console里面具体提供了如何措施能够供大家向来调节和测验时采纳。

图片 63

图片 64

看了地方那张图,是还是不是认知到log的有力之处了,下边我们来看看console里面具体提供了哪些方法能够供我们一直调节和测验时利用。

日前调整台方法和总体性有:

图片 65

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

当下调整台方法和个性有:
["$$", "$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用来出口调节和测量检验新闻
用图来说话

上面大家来家家户户介绍一下依次艺术主要的用处。


相似意况下大家用来输入消息的章程首纵然用到如下八个

图片 66

1、console.log 用于出口普通新闻

console对象的地方5种办法,都能够行使printf风格的占位符。可是,占位符的门类非常少,只帮助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)各类。
console.log("%d年%d月%d日",贰零壹壹,3,26);console.log("圆周率是%f",3.1415926);

2、console.info 用来出口提醒性音讯

图片 67

3、console.error用于出口错误音信

%o占位符,能够用来查阅一个对象内部原因
var dog = {};dog.name = "大毛";dog.color = "黄色";console.log("%o", dog);

4、console.warn用以出口警示音讯

图片 68

5、console.debug用来出口调节和测量检验新闻

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>

用图来讲话

图片 69

图片 70

7、console.group出口一组消息的开始
8、console.groupEnd甘休一组输出音讯
看您要求选择区别的输出方法来行使,假如上述七个法子再同盟group和groupEnd方法来一齐行使就可以输入美妙绝伦的不如格局的出口消息。

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

图片 71

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

哈哈,是否以为很美妙啊!
9、console.assert对输入的表达式举办预见,唯有表明式为false时,才输出相应的消息到调节台

图片 72

图片 73

%o占位符,能够用来查阅一个对象内幕

10、console.count(那几个法子充裕实用哦)当您想总括代码被实践的次数

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

图片 74

图片 75

11、console.dir(那一个措施是自己日常利用的 可不知道比for in方便了有些)直接将该DOM结点以DOM树的结构举办输出,能够详细核查象的主意发展等等

6、console.dirxml用来突显网页的某部节点(node)所富含的html/xml代码

图片 76

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

12、console.time 计时始于
13、console.timeEnd 计时甘休(看了下边包车型大巴图你眨眼之间间就感受到它的立意了)

图片 77


7、console.group出口一组音讯的发端

图片 78

8、console.groupEnd利落一组输出消息

14、console.profile和console.profileEnd协作协同行使来查看CPU使用有关消息

看您须求采纳分歧的输出方法来使用,假使上述三个章程再合作group和groupEnd方法来三只使用就能够输入五花八门的例外式样的出口信息。

图片 79

图片 80

在Profiles面板里面查看就能够看到cpu相关应用音讯

嘿嘿,是还是不是以为很奇妙啊!

图片 81

9、console.assert对输入的表明式实行预感,唯有表明式为false时,才输出相应的新闻到调整台

15、console.timeLineconsole.timeLineEnd相当共同记录一段时间轴
16、console.trace 仓库追踪相关的调节和测量试验
上述办法只是本身个人知道罢了。假如想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
调节台的有的急忙键
1、方向键盘的上下键,我们一用就知晓。比方用上键就一定于选取上次在调节台的输入符号
2、$_命令归来近年来一回表达式实践的结果,功效跟按升高的方向键再回车是一致的

图片 82

图片 83

10、console.count(这么些方法十三分实用哦)当您想总括代码被实施的次数

上面的$_
须要精通其奥义本领接纳特别,而0
4则意味着了近年5个你选取过的DOM节点。
如何意思?在页面右击采取考察元素
,然后在弹出来的DOM结点树上面随便点选,那几个被点过的节点会被记录下来,而$0
会回去近来叁遍点选的DOM结点,就那样推算,$1再次回到的是顶级次点选的DOM节点,最多保留了5个,倘使非常不足5个,则重回undefined

图片 84

图片 85

11、console.dir(这一个方法是自家时时应用的 可不知道比for in方便了多少)直接将该DOM结点以DOM树的布局举行输出,能够详细查对象的章程提升档等

3、Chrome 调整高雄原生协助类jQuery的采纳器,也正是说你能够用$
加上熟习的css接纳器来挑选DOM节点

图片 86

图片 87

12、console.time 计时开首

4、copy通过此命令能够就要调节台获取到的剧情复制到剪贴板

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

图片 88

图片 89

(哈哈 刚刚从调整台复制的body里面包车型客车html能够自由粘贴到哪, 比方记事本, 是否以为功用很有力)
5、keys和values后面一个重回传入对象具备属性名组成的数目,前者再次来到全体属性值组成的数组

14、console.profileconsole.profileEnd相配共同使用来查阅CPU使用有关音信

图片 90

图片 91

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

在Profiles面板里面查看即可看到cpu相关应用消息

图片 92

图片 93

6、monitor & unmonitor
monitor(function),它接受三个函数名作为参数,譬喻function a
,每次a
被试行了,都会在决定台出口一条音讯,里面包罗了函数的名称a
及推行时所盛传的参数。
而unmonitor(function)就是用来终止这一监听。

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

图片 94

16、console.trace 堆栈追踪相关的调和

看了那张图,应该明了了,也便是说在monitor和unmonitor中间的代码,实行的时候会在调节台出口一条音信,里面满含了函数的名称a
及举行时所传诵的参数。当打消监视(也正是实践unmonitor时)就不再在支配台出口新闻了。
$ // 简单领悟便是 document.querySelector 而已。
$$ // 老妪能解就是 document.querySelectorAll 而已。
$_ // 是上八个表明式的值
0−
4 // 是近年5个Elements面板选中的DOM成分,待会会讲。
dir // 其实正是 console.dir
keys // 取对象的键名, 重回键名组成的数组
values // 去对象的值, 重回值组成的数组

上述措施只是自身个人理解罢了。若是想查看具体API,能够上合法看看,具体地址为:

上面看一下console.log的一些本事
1、重写console.log 改换输出文字的样式

调整台的片段快速键

图片 95

1、方向键盘的上下键,大家一用就领悟。比方用上键就一定于接纳上次在调整台的输入符号

2、利用调整台出口图片

2、$_一声令下归来近日二次表明式推行的结果,成效跟按提升的方向键再回车是同样的

图片 96

图片 97

3、内定输出文字的样式

上面的$_内需驾驭其奥义工夫动用合适,而$0~$4则象征了近日5个你挑选过的DOM节点。

图片 98

怎样意思?在页面右击选取审查元素,然后在弹出来的DOM结点树下面随意点选,那些被点过的节点会被记录下来,而$0会重返前段时间叁回点选的DOM结点,由此及彼,$1重临的是极品次点选的DOM节点,最多保留了5个,如果远远不足5个,则赶回undefined

最后说一下chrome调控台一个简便的操作,如何查看页面成分,看下图就精晓了

图片 99

图片 100

3、Chrome 调节台北原生帮助类jQuery的选用器,也正是说你能够用$累加熟识的css选取器来摘取DOM节点

图片 101

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

图片 102

(哈哈 刚刚从调节台复制的body里面包车型地铁html能够随性所欲粘贴到哪, 举例记事本, 是否以为效率很有力)

5、keys和values前面一个再次来到传入对象具有属性名组成的多少,前面一个再次回到全部属性值组成的数组

图片 103

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

图片 104

6、monitor & unmonitor

monitor(function),它接受三个函数名作为参数,举例function a,每次a被实践了,都会在支配台出口一条新闻,里面含有了函数的称谓a及进行时所传诵的参数。

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

图片 105

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

$ // 老妪能解正是 document.querySelector 而已。$$ // 轻便领会正是document.querySelectorAll 而已。$_ // 是上一个表达式的值$0-$4 // 是近年来5个Elements面板选中的DOM元素,待会会讲。dir // 其实正是console.dirkeys // 取对象的键名, 再次来到键名组成的数组values // 去对象的值, 再次来到值组成的数组

上边看一下console.log的有的技能

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

图片 106

2、利用调控台出口图片

图片 107

3、钦点输出文字的体制

图片 108

末尾说一下chrome调控台贰个轻易易行的操作,如何查看页面成分,看下图就精通了

图片 109

您在支配台轻松操作一遍就通晓了,是不是以为一点也不细略!

您大概感兴趣的篇章:

  • JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
  • 采取Js的console对象,在调整台打字与印刷调式音信测验Js的完毕
  • js console.log打印对像与数组用法详解
  • javascript中alert()与console.log()的区别
  • JS中抓获console.log()输出的秘技
  • JavaScript中的console.dir()函数介绍
  • JavaScript中的console.trace()函数介绍
  • JavaScript中的console.profile()函数详细介绍
  • Javascript的console['''']常用输入方法汇总

本文由星彩网app下载发布于前端技术,转载请注明出处:用法图像和文字详解,开拓者工具使用

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。