Chrome 控制台console的用法 Chrome 控制台console的用法

Chrome 控制台console的用法
Chrome 控制台console的用法

下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。

Chrome 控制台console的用法
Chrome 控制台console的用法

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

["$$", "$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用于输出警示信息

用图来说话:

Chrome 控制台console的用法
Chrome 控制台console的用法

6、console.groupEnd结束一组输出信息

看你需求选择不同的输出方法来使用,如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。

Chrome 控制台console的用法
Chrome 控制台console的用法

7、console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台。

Chrome 控制台console的用法
Chrome 控制台console的用法

8、console.count(这个方法非常实用哦)当你想统计代码被执行的次数。

Chrome 控制台console的用法
Chrome 控制台console的用法

9、console.dir(这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等。

Chrome 控制台console的用法
Chrome 控制台console的用法

10、console.time 计时开始。console.timeEnd  计时结束(看了下面的图你瞬间就感受到它的厉害了)

Chrome 控制台console的用法
Chrome 控制台console的用法

11、keys和values 前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。

Chrome 控制台console的用法
Chrome 控制台console的用法

12、console.table方法

Chrome 控制台console的用法
Chrome 控制台console的用法

13、Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节。

Chrome 控制台console的用法
Chrome 控制台console的用法

14、console.profileconsole.profileEnd配合一起使用来查看CPU使用相关信。

Chrome 控制台console的用法
Chrome 控制台console的用法

下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。

Chrome 控制台console的用法
Chrome 控制台console的用法

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

["$$", "$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用于输出警示信息

用图来说话:

Chrome 控制台console的用法
Chrome 控制台console的用法

6、console.groupEnd结束一组输出信息

看你需求选择不同的输出方法来使用,如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。

Chrome 控制台console的用法
Chrome 控制台console的用法

7、console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台。

Chrome 控制台console的用法
Chrome 控制台console的用法

8、console.count(这个方法非常实用哦)当你想统计代码被执行的次数。

Chrome 控制台console的用法
Chrome 控制台console的用法

9、console.dir(这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等。

Chrome 控制台console的用法
Chrome 控制台console的用法

10、console.time 计时开始。console.timeEnd  计时结束(看了下面的图你瞬间就感受到它的厉害了)

Chrome 控制台console的用法
Chrome 控制台console的用法

11、keys和values 前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。

Chrome 控制台console的用法
Chrome 控制台console的用法

12、console.table方法

Chrome 控制台console的用法
Chrome 控制台console的用法

13、Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节。

Chrome 控制台console的用法
Chrome 控制台console的用法

14、console.profileconsole.profileEnd配合一起使用来查看CPU使用相关信。

Chrome 控制台console的用法
Chrome 控制台console的用法