Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

大家都有用过各体系型的浏览器,各样浏览器都有温馨的表征,自身拙见,在自己用过的浏览器个中,小编是最开心Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比其他浏览器有过之而无不比的地点。大概我们对console.log会有一定的刺探,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么1长串的字符串来代替alert输出音讯呢,上面笔者就介绍一些调护医疗的入门才能,让你爱上console.log

先的归纳介绍一下chrome的调控台,展开chrome浏览器,按f1二就足以轻易的展开调节台

金沙注册送58 1

世家能够看出调节台里面有一首诗还有任何消息,假设想清中央空调控台,能够点击左上角那一个金沙注册送58 2来清空,当然也得以由此在调整台输入console.clear()来落实清中央空调节台新闻。如下图所示

金沙注册送58 3

近日如果多少个现象,借使1个数组里面有广大的成分,可是你想精晓各样成分具体的值,那时候想想假设你用alert这将是多惨的一件业务,因为alert阻断线程运营,你不点击alert框的规定按钮下2个alert就不会晤世。

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

金沙注册送58 4

看了上边那张图,是否认识到log的强有力之处了,下边大家来看看console里面具体提供了如何方法能够供大家一向调节和测试时采纳。

金沙注册送58 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用于出口调节和测试消息

用图来发话

金沙注册送58 6

console对象的地点三种办法,都足以行使printf风格的占位符。不过,占位符的品种比较少,只扶助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)三种

JavaScript

console.log(“%d年%d月%d日”,201一,三,贰六);
console.log(“圆周率是%f”,三.141592陆);

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

金沙注册送58 7

%o占位符,能够用来查看2个对象内部景况

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

金沙注册送58 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>

金沙注册送58 9

7、console.group出口一组新闻的起先

8、console.groupEnd利落一组输出音讯

看你需求采纳分化的出口方法来行使,如果上述多个点子再同盟group和groupEnd方法来①块利用就足以输入五花八门的区别式样的输出消息。

金沙注册送58 10

嘿嘿,是否认为很奇妙啊!

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

金沙注册送58 11

10、console.count(这几个办法11分实用哦)当你想总括代码被实行的次数

金沙注册送58 12

11、console.dir(那么些艺术是自个儿每每利用的 可不知道比for
in方便了不怎么) 直接将该DOM结点以DOM树的结构举办输出,能够详细核查象的办法发展等等

金沙注册送58 13

12、console.time 计时始发

13、console.timeEnd  计时结束(看了上边包车型大巴图你刹那间就感受到它的决心了)

金沙注册送58 14

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

金沙注册送58 15

在Profiles面板里面查看就足以看来cpu相关应用新闻

金沙注册送58 16

15、console.timeLineconsole.timeLineEnd相称协同记录1段时间轴

16、console.trace  仓库追踪相关的调养

上述方法只是本身个人掌握罢了。如若想查看具体API,能够上合法看看,具体地址为:

 

上边介绍一下调节台的有些飞快键

1、方向键盘的上下键,我们壹用就清楚。举例用上键就也正是选取上次在调控台的输入符号

2、$_命令归来目前二遍表明式实施的结果,功效跟按提升的方向键再回车是均等的

金沙注册送58 17

上面的$_亟待驾驭其奥义本事应用方便,而$0~$四则表示了不久前七个你选用过的DOM节点。

什么看头?在页面右击选取审查元素,然后在弹出来的DOM结点树上边随意点选,那些被点过的节点会被记录下来,而$0会回去方今二次点选的DOM结点,依此类推,$一重临的是顶级次点选的DOM节点,最多保留了6个,若是不够多少个,则赶回undefined

金沙注册送58 18

三、Chrome
调控毕尔巴鄂原生援救类jQuery的采纳器
,也便是说你能够用$增加熟识的css选取器来挑选DOM节点

金沙注册送58 19

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

金沙注册送58 20

(哈哈 刚刚从调节台复制的body里面的html能够私自粘贴到哪 比方记事本
 是否感觉作用很有力)

5、keys和valuesjavascript代码调节和测试之console,用法图像和文字详解。 前者再次来到传入对象具有属性名组成的数据,后者重回全部属性值组成的数组

金沙注册送58 21

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

金沙注册送58 22

 

 

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

javascript代码调试之console.log 用法图文详解,javascriptconsole

大家都有用过各类别型的浏览器,每个浏览器都有温馨的表征,自个儿拙见,在自家用过的浏览器个中,小编是最欣赏Chrome的,因为它对于调试脚本及前端设计调节和测试都有它比其余浏览器有过之而无比不上的地点。大概我们对console.log会有早晚的摸底,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么1长串的字符串来代替alert输出消息呢,下边笔者就介绍一些调治的入门才能,让你爱上console.log

先的简易介绍一下chrome的调控台,展开chrome浏览器,按f1二就能够轻便的开垦调节台

金沙注册送58 23

大家能够看出调节台里面有壹首诗还有此外消息,假设想清中央空调控台,能够点击左上角那么些金沙注册送58 24来清空,当然也足以由此在调控台输入console.clear()来促成清中央空调控台消息。如下图所示

金沙注册送58 25

现行反革命一经三个场景,如若2个数组里面有广大的因素,可是你想精晓各种成分具体的值,那时候想想如若您用alert那将是多惨的一件事情,因为alert阻断线程运转,你不点击alert框的分明按键下一个alert就不会并发。

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

金沙注册送58 26

看了地点那张图,是或不是认知到log的精锐之处了,上边大家来探视console里面具体提供了什么样措施能够供大家平日调节和测试时接纳。

金沙注册送58 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用以出口调节和测试音讯

用图来讲话

金沙注册送58 28

console对象的下边多种形式,都得以选择printf风格的占位符。可是,占位符的品类相比较少,只匡助字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)多种

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

金沙注册送58 29

%o占位符,可以用来查阅四个对象内部境况

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

金沙注册送58 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>

金沙注册送58 31

7、console.group出口1组音信的发端

8、console.groupEnd终结1组输出新闻

看您需求采纳差别的出口方法来使用,假使上述八个主意再合营group和groupEnd方法来一块行使就足以输入精彩纷呈的分裂式样的输出消息。

金沙注册送58 32

哈哈,是还是不是感到极赏心悦目妙啊!

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

金沙注册送58 33

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

金沙注册送58 34

11、console.dir(这么些主意是自小编时时应用的 可不知道比for
in方便了有个别)直接将该DOM结点以DOM树的组织举办输出,能够详细核查象的法门发展等等

金沙注册送58 35

12、console.time 计时始发

13、console.timeEnd 计时甘休(看了上面包车型大巴图你须臾间就感受到它的厉害了)

金沙注册送58 36

14、console.profileconsole.profileEnd协作协同利用来查看CPU使用相关音信

金沙注册送58 37

在Profiles面板里面查看就能够看看cpu相关应用消息

金沙注册送58 38

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

16、console.trace 饭店追踪相关的调弄整理

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

调节台的一对连忙键

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

2、$_命令归来近期贰遍表明式实践的结果,作用跟按升高的方向键再回车是一模同样的

金沙注册送58 39

上面的$_急需精晓其奥义技艺应用方便,而$0~$四则意味了近来陆个你挑选过的DOM节点。

如何意思?在页面右击选拔审查元素,然后在弹出来的DOM结点树上边随便点选,这个被点过的节点会被记录下来,而$0会回到近日三回点选的DOM结点,依此类推,$一重返的是一级次点选的DOM节点,最多保留了陆个,借使不够5个,则赶回undefined

金沙注册送58 40

三、Chrome
调控斯科普里原生支持类jQuery的采取器
,也正是说你能够用$增加熟谙的css选拔器来采取DOM节点

金沙注册送58 41

4、copy因而此命令能够将要调控台获取到的内容复制到剪贴板

金沙注册送58 42

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

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

金沙注册送58 43

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

金沙注册送58 44

6、monitor & unmonitor

monitor(function),它接受贰个函数名作为参数,比方function a,每次a被实行了,都会在调控台出口一条消息,里面包括了函数的名目a及实行时所传颂的参数。

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

金沙注册送58 45

看了这张图,应该掌握了,也正是说在monitor和unmonitor中间的代码,执行的时候会在调控台出口一条信息,里面包罗了函数的名称a及实行时所传颂的参数。当打消监视(也便是实践unmonitor时)就不再在调节台出口信息了。

$ // 轻便了然正是 document.querySelector 而已。$$ // 轻便明了正是document.querySelectorAll 而已。$_ // 是上一个表明式的值$0-$四 //
是近年来陆个Elements面板选中的DOM成分,待会会讲。dir // 其实正是console.dirkeys // 取对象的键名, 重临键名组成的数组values // 去对象的值,
重回值组成的数组

下边看一下console.log的1部分才能

壹、重写console.log 更改输出文字的体裁

金沙注册送58 46

2、利用调控台出口图片

金沙注册送58 47

三、钦定输出文字的体制

金沙注册送58 48

末尾说一下chrome调控台三个归纳的操作,怎么样查看页面成分,看下图就知晓了

金沙注册送58 49

你在调控台轻易操作一回就知道了,是还是不是以为很简短!

用法图像和文字详解,javascriptconsole
大家都有用过各体系型的浏览器,每一种浏览器都有和好的特色,自己拙见,在自己用…

我们都有用过各种类型的浏览器,各类浏览器都有本身的风味,自己拙见,在小编用过的浏览器个中,作者是最欣赏Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比其他浏览器有过之而无不如的地点。大概大家对console.log会有一定的询问,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来代替alert输出新闻吗,上面作者就介绍一些调节和测试的入门技能,让你爱上console.log

6、monitor & unmonitor

monitor(function),它接受二个函数名作为参数,举个例子function a,每次a被试行了,都会在调节台出口一条信息,里面富含了函数的称号a及实践时所盛传的参数。

而unmonitor(function)就是用来终止那第一监狱听。

金沙注册送58 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的1对本事

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

金沙注册送58 51

2、利用调整台出口图片

金沙注册送58 52

三、钦点输出文字的体裁

金沙注册送58 53

最终说一下chrome调节台贰个简单的操作,怎样查看页面成分,看下图就精晓了

金沙注册送58 54

你在决定台轻巧操作2遍就清楚了,是否认为极粗略!

赞 6 收藏
评论

金沙注册送58 55


先的大概介绍一下chrome的调节台,展开chrome浏览器,按f1贰就足以轻巧的开垦调控台

先的简易介绍一下chrome的调节台,张开chrome浏览器,按f1贰就可以轻便的开荒调整台

金沙注册送58 56

金沙注册送58 57

大家能够见到调节台里面有一首诗还有此外音信,假如想清空气调节器控台,能够点击左上角那二个金沙注册送58 58来清空,当然也足以由此在调控台输入console.clear()来促成清中央空调节台消息。如下图所示

大家能够看来调节台里面有1首诗还有其余消息,如若想清空气调节器节台,能够点击左上角那多少个

金沙注册送58 59

金沙注册送58 60

前几日1经叁个地方,假若1个数组里面有繁多的元素,不过你想理解各样元素具体的值,那时候想想如若你用alert那将是多惨的一件业务,因为alert阻断线程运转,你不点击alert框的规定开关下七个alert就不会现出。

来清空,当然也能够透过在决定台输入console.clear()来得以完毕清空调节台消息。如下图所示

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

金沙注册送58 61

金沙注册送58 62

后日一旦三个风貌,借使三个数组里面有多数的要素,不过你想清楚各种成分具体的值,那时候想想要是你用alert那将是多惨的1件专门的学问,因为alert阻断线程运营,你不点击alert框的明确开关下3个alert就不会产出。
下边大家用console.log来替换,感受一下它的魔力。

看了地方那张图,是或不是认知到log的强硬之处了,上面大家来看望console里面具体提供了如何方法能够供大家平日调节和测试时采纳。

金沙注册送58 63

金沙注册送58 64

看了上边那张图,是还是不是认知到log的雄强之处了,上面我们来探望console里面具体提供了什么样措施能够供大家平昔调节和测试时行使。

当下调控台方法和本性有:

金沙注册送58 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用来出口调节和测试消息
用图来讲话

下边大家来所有人家介绍一下依次艺术首要的用途。


貌似景况下我们用来输入音讯的点子主固然用到如下八个

金沙注册送58 66

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

console对象的上边5种办法,都得以行使printf风格的占位符。不过,占位符的品类比较少,只援救字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)两种。
console.log(“%d年%d月%d日”,201一,三,二六);console.log(“圆周率是%f”,三.141592六);

2、console.info 用以出口提示性音讯

金沙注册送58 67

3、console.error用于出口错误消息

%o占位符,可以用来查看多个目标内部景色
var dog = {};dog.name = “大毛”;dog.color = “黄色”;console.log(“%o”,
dog);

4、console.warn用以出口警示新闻

金沙注册送58 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>

用图来讲话

金沙注册送58 69

金沙注册送58 70

7、console.group出口1组音讯的起来
8、console.groupEnd得了1组输出音讯
看你供给接纳分化的出口方法来选拔,要是上述七个章程再同盟group和groupEnd方法来一齐使用就足以输入五光十色的不比方式的输出音信。

console对象的上边五种艺术,都足以利用printf风格的占位符。可是,占位符的类型比较少,只补助字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)多样

金沙注册送58 71

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

哈哈,是否以为很神奇啊!
9、console.assert对输入的表明式进行预感,唯有表明式为false时,才输出相应的音信到调节台

金沙注册送58 72

金沙注册送58 73

%o占位符,能够用来查阅二个目的内部景观

10、console.count(那么些点子充足实用哦)当你想总计代码被施行的次数

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

金沙注册送58 74

金沙注册送58 75

11、console.dir(这几个方式是本人常常使用的 可不知道比for
in方便了略微)直接将该DOM结点以DOM树的构造举办输出,能够详细核对象的秘技升高端等

六、console.dirxml用来突显网页的有些节点(node)所蕴藏的html/xml代码

金沙注册送58 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
计时截至(看了下边包车型大巴图你弹指间就感受到它的决意了)

金沙注册送58 77


7、console.group输出1组新闻的发端

金沙注册送58 78

8、console.groupEnd得了壹组输出音信

14、console.profile和console.profileEnd合作共同使用来查阅CPU使用有关音信

看你必要采取差异的出口方法来选用,假诺上述八个点子再协作group和groupEnd方法来一齐利用就足以输入美妙绝伦的不等款式的出口音讯。

金沙注册送58 79

金沙注册送58 80

在Profiles面板里面查看就足以看看cpu相关应用消息

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

金沙注册送58 81

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

15、console.timeLineconsole.timeLineEnd十分共同记录壹段时间轴
16、console.trace 仓库追踪相关的调解
上述措施只是自己个人精通罢了。如若想查看具体API,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
调控台的壹对快捷键
一、方向键盘的上下键,我们一用就知道。比方用上键就一定于选拔上次在调节台的输入符号
2、$_指令归来近来1回表明式施行的结果,作用跟按提升的方向键再回车是千篇1律的

金沙注册送58 82

金沙注册送58 83

10、console.count(这些点子丰盛实用哦)当你想总括代码被施行的次数

上面的$_
亟需明白其奥义技能运用十分,而0
4则代表了目前5个你挑选过的DOM节点。
如何意思?在页面右击选拔审查成分
,然后在弹出来的DOM结点树上边随意点选,这一个被点过的节点会被记录下来,而$0
会再次回到近来一遍点选的DOM结点,就那样类推,$壹再次回到的是极品次点选的DOM节点,最多保留了5个,尽管不够五个,则重回undefined

金沙注册送58 84

金沙注册送58 85

11、console.dir(这一个办法是本人每每选用的 可不知道比for
in方便了不怎么)直接将该DOM结点以DOM树的结构举办输出,能够详细核对象的方法发展等等

叁、Chrome 调节罗利原生支持类jQuery的采用器,约等于说你能够用$
增进熟练的css采用器来挑选DOM节点

金沙注册送58 86

金沙注册送58 87

12、console.time 计时起来

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

13、console.timeEnd 计时截止(看了上边的图你须臾间就感受到它的厉害了)

金沙注册送58 88

金沙注册送58 89

(哈哈 刚刚从调控台复制的body里面的html能够随便粘贴到哪, 举个例子记事本,
是或不是感到功效很强劲)
5、keys和values前端重返传入对象具有属性名组成的数目,后者重返全体属性值组成的数组

14、console.profileconsole.profileEnd协作共同利用来查阅CPU使用有关音信

金沙注册送58 90

金沙注册送58 91

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

在Profiles面板里面查看就足以看出cpu相关应用新闻

金沙注册送58 92

金沙注册送58 93

6、monitor & unmonitor
monitor(function),它接受二个函数名作为参数,比如function a
,每次a
被执行了,都会在支配台出口一条新闻,里面含有了函数的名称a
及进行时所传诵的参数。
而unmonitor(function)就是用来终止这一监听。

15、console.timeLineconsole.timeLineEnd相当协同记录1段时间轴

金沙注册送58 94

16、console.trace 旅舍追踪相关的调节和测试

看了那张图,应该精通了,也便是说在monitor和unmonitor中间的代码,实行的时候会在支配台出口一条消息,里面含有了函数的名称a
及实施时所盛传的参数。当免除监视(也正是进行unmonitor时)就不再在支配台出口音讯了。
$ // 轻便明了就是 document.querySelector 而已。
$$ // 简单明了便是 document.querySelectorAll 而已。
$_ // 是上1个表明式的值
0−
肆 // 是近几年来四个Elements面板选中的DOM成分,待会会讲。
dir // 其实正是 console.dir
keys // 取对象的键名, 重临键名组成的数组
values // 去对象的值, 重返值组成的数组

上述情势只是本人个人通晓罢了。要是想查看具体API,可以上合法看看,具体地址为:

上面看一下console.log的部分才能
壹、重写console.log 改动输出文字的体裁

调控台的片段急忙键

金沙注册送58 95

一、方向键盘的上下键,我们壹用就领会。比如用上键就一定于采用上次在调整台的输入符号

2、利用调节台出口图片

2、$_命令归来目前壹次表达式实施的结果,作用跟按提升的方向键再回车是1律的

金沙注册送58 96

金沙注册送58 97

三、内定输出文字的样式

上面的$_急需精晓其奥义才具运用拾分,而$0~$四则意味了近年来陆个你挑选过的DOM节点。

金沙注册送58 98

如何看头?在页面右击选拔审查元素,然后在弹出来的DOM结点树上面随意点选,那些被点过的节点会被记录下来,而$0会回来近年来三次点选的DOM结点,就那样类推,$①再次回到的是超级次点选的DOM节点,最多保留了七个,要是不够陆个,则赶回undefined

最后说一下chrome调整台多个粗略的操作,怎么着查看页面成分,看下图就精通了

金沙注册送58 99

金沙注册送58 100

三、Chrome
调控西安原生协助类jQuery的选拔器
,也等于说你能够用$累加熟识的css选拔器来摘取DOM节点

金沙注册送58 101

4、copy经过此命令能够将在调节台获取到的始末复制到剪贴板

金沙注册送58 102

(哈哈 刚刚从调整台复制的body里面包车型地铁html能够自由粘贴到哪, 举例记事本,
是否感觉成效很强劲)

5、keys和values前端再次来到传入对象拥有属性名组成的数量,后者再次来到全数属性值组成的数组

金沙注册送58 103

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

金沙注册送58 104

6、monitor & unmonitor

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

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

金沙注册送58 105

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

$ // 轻松明了正是 document.querySelector 而已。$$ // 轻易精通正是document.querySelectorAll 而已。$_ // 是上二个表明式的值$0-$4 //
是方今多少个Elements面板选中的DOM成分,待会会讲。dir // 其实便是console.dirkeys // 取对象的键名, 重临键名组成的数组values // 去对象的值,
重回值组成的数组

上边看一下console.log的有的本事

一、重写console.log 改动输出文字的体制

金沙注册送58 106

2、利用调控台出口图片

金沙注册送58 107

叁、内定输出文字的体裁

金沙注册送58 108

末段说一下chrome调控台八个简便的操作,怎样查看页面成分,看下图就清楚了

金沙注册送58 109

您在支配台简单操作二次就精通了,是还是不是感到非常的粗略!

您恐怕感兴趣的篇章:

  • JavaScript
    输出展现内容(document.write、alert、innerHTML、console.log)
  • 使用Js的console对象,在调控台打印调式音讯测试Js的贯彻
  • 金沙注册送58,js
    console.log打字与印刷对像与数组用法详解
  • javascript中alert()与console.log()的区别
  • JS中捕获console.log()输出的方法
  • JavaScript中的console.dir()函数介绍
  • JavaScript中的console.trace()函数介绍
  • JavaScript中的console.profile()函数详细介绍
  • Javascript的console[””]常用输入方法汇总

相关文章

网站地图xml地图