0
点赞
收藏
分享

微信扫一扫

js调试工具console方法详解

Xin_So 2022-03-30 阅读 121


打开 Chrome 浏览器的调试工具后,在代码中执行,查看 console 的所有方法

console.dir(console)

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

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

一一介绍一下各个方法主要的用途。

一般情况下我们用来输入信息的方法主要是用到如下5个

1、console.log​ 用于输出普通信息

2、​​console.info​​​ 用于输出提示性信息

3、console.error​用于输出错误信息

4、console.warn​用于输出警示信息

5、console.debug​用于输出调试信息

用图来说话

console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,​只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种​。

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

js调试工具console方法详解_浏览器

%o占位符,可以用来查看一个对象内部情况

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

js调试工具console方法详解_调试_02

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>

js调试工具console方法详解_调试_03

7、console.group​输出一组信息的开头

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

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

js调试工具console方法详解_浏览器_04

哈哈,是不是觉得很神奇呀!

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

js调试工具console方法详解_debug_05

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

js调试工具console方法详解_浏览器_06

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

js调试工具console方法详解_javascript_07

12、console.time​ 计时开始

13、console.timeEnd​ 计时结束(看了下面的图你瞬间就感受到它的厉害了)

js调试工具console方法详解_浏览器_08

14、console.profile​和​console.profileEnd​配合一起使用来查看CPU使用相关信息

js调试工具console方法详解_浏览器_09

在Profiles面板里面查看就可以看到cpu相关使用信息

js调试工具console方法详解_chrome_10

15、console.timeLine​和​console.timeLineEnd​配合一起记录一段时间轴

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

上述方法只是我个人理解罢了。如果想查看具体API,可以上官方看看,具体地址为:​​https://developer.chrome.com/devtools/docs/console-api​​

更多技巧

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

console.log(‘%c字符串[%c字符串]’, 样式1, [样式2]);
console.log('%chello','color:#fff;background:red')

2、利用控制台输出图片

js调试工具console方法详解_debug_11


举报

相关推荐

0 条评论