js技巧 console.log使用

很多时候，我们就用到console.log()来输入一个信息，用了来调试，其实console对象有很多方法，今天针对一些常用的方法进行讲解。

输出带色彩的信息

   console.log('消息内容！'); //输出普通信息console.info('消息内容！'); //输出提示信息console.error('消息内容！');//输出错误信息console.warn('消息内容！'); //输出警告信息

平时我们自己调试可以用console.log()，但是在某些时候，可以才catch里面用console.log(err)来打印错误信息，也可以用console.warn()来输出警告信息。

console.table，格式化表格
console.table可以将一段同格式的数组转换为一个表格输出在控制台，方便只管的查看。

const tableArr = [{name:'jack',age:21,sex:'男'},{name:'joden',age:25,sex:'女'}
]

3. 统计代码的执行时间

console.time('统计时间')
for(var i = 0; i < 999 ;i++){}
console.timeEnd('统计时间')

使用console.time和console.timeEnd的组合可以统计出代码的执行时间，有利于我们分析代码的优劣，从而选取更好的实现方式。

分组输出

   console.group('a组');console.log('a1');console.log('a2');console.log('a3');console.groupEnd();

某些时候我们的调试复杂的程序，需要大量的输出判断的时候，分组输出就很有用了。

输出有样式的立体文字
我们打开知乎的控制台，就可以看到下面这张图片：

我在网上找了几种实现方式，给大家参考，我们先看一下console.log的文档：

打印3d文字：

console.log("%ctest"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")

想要更多更丰富，更灵活的立体文字，可以参照下面的网址的实现方式：
在线生成
在线生成

其他函数
对象以树状结构展现 console.dir;显示某个节点的内容 console.dirxml(;断变量是否是真 console.assert。

想看更多文章，可以关注我的个人公众号：

js技巧 console.log使用相关推荐

开发chrome 插件， background.js中 console log 看不到解决方法
开发chrome 插件, background.js中 console log 看不到解决方法参考文章: (1)开发chrome 插件, background.js中 console log 看不到 ...
js调试console.log使用总结图解
一实例打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1 如果你js没 ...
js重写console.log函数
重写console.log函数在前端开发中console.log是我们必不可少的调试工具,但是原生的console.log有两点不能很好地满足我们的需求开发时需要log,但是上线时希望去掉log, ...
【JS】console.log()打印出五彩斑斓的黑
逛B站不小心点到了F12,于是乎看到了蓝色的小电视,于是乎了解了一下先大致说一下语法: console.log('%c巴拉%c巴拉','color:#fff','color:#000'); //上述 ...
nodejs 下使用js封装console.log方法输出自定义的彩色字体，遇到Octal escape sequences are not allowed in template strings
阳光明媚,在家敲javascript的代码,控制台里清一色的黑底白字,我console.log出来的文字也是黑底白字淹没在茫茫字母海中,所以我想封装一下log方法,能自己定义字体还有背景的颜色,然后就 ...
将js中console.log打印的内容输出保存到txt文件的简单方法
方法 :结合DOS 简单的将输出信息保存到一个文件命令以及用node执行js代码的方法电脑cmd输入如下命令: node print.js >D:\output.txt 其中node为安装好的 ...
java script console_JS调试之console.log()作用与用法
在前端调试js代码的时分,许多人都喜欢用 alert() 来进行调试,不过 alert() 会阻断JS的运行,并且对少许范例的变量无法输出,这就导致了很多的麻烦.针对这个问题,这篇文章就说一说js中的 ...
Android中获取WebView加载的html中console.log输出的内容
场景 Android中使用WebView加载本地html并支持运行JS代码和支持缩放: Android中使用WebView加载本地html并支持运行JS代码和支持缩放_BADAO_LIUMANG_QI ...
Console 3000字完整指南，让你不只会用console.log !
创作不易,求一个免费的赞,谢谢啦 !!! 前言为啥会突然想起写一篇关于console的文章?笔者接触JS也不少时间了,除了用vscode的debuger,其实大部分时间都在使用console.log ...

js技巧 console.log使用

js技巧 console.log使用相关推荐

最新文章

热门文章