写点什么

浏览器上有趣的 Console 命令都了解吗?

用户头像
空城机
关注
发布于: 2021 年 06 月 14 日
浏览器上有趣的Console命令都了解吗?

作为用过 JavaScript 的各位来说,一定都知道使用console.log输出信息吧 (不知道也没关系


不过对于 console,各位都了解全了吗?





上手操作

按下 F12 键,就会出现浏览器上控制台了,如下图这里我使用的是 Chrome 浏览器,不同浏览器控制台可能会有所不同



接下来让我们使用一下console.log打印一下信息,看看效果


111 被直接打印了出来,arr 因为未定义,所以报错了





常用 console 命令

console的命令有很多,并不局限于我们常用的 log 日志命令


MDN 参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Console


console 的命令很多,本次也只会挑几个有意思的来说一下



打印信息命令

接下来先说说console.log的几个兄弟 info() 、debug()、warn()、error()


下面在火狐浏览器中测试的:


console.log('console log')   console.info('console info')console.debug("console debug")console.warn("console warn")console.error("console error")
复制代码



count 打印调用的次数

输出count()被调用的次数。此函数接受一个可选参数 label如果提供了label,则此函数记录调用带有此特定label的count()的次数


测试代码:


for (var i = 0; i < 5; i++){  console.count("key")}
复制代码



注意了,在这里会发现神奇的一点,每次重新运行测试代码,但是 count 计算的次数是不会被重置的


所以你可能会需要一句console.countReset(),来重置 countcountReset 是重置计数器。此函数有一个可选参数 label。


console.countReset("key");for (var i = 0; i < 5; i++){  console.count("key")}
复制代码



time 代码性能检测

说起来console.timeconsole.timeEnd这对兄弟也是经常会使用到的 console 命令


浏览器将以毫秒为单位,输出对应计时器所经过的时间,可以测试 time 和 timeEnd 之间 JavaScript 代码执行的时间


console.time(1)var knum = 0;for (var i = 0; i < 10000; i++){  knum /= i;}console.timeEnd(1)
复制代码



除此之外,其实还有一个console.timeLog命令


在控制台输出计时器的值,但是此命令的发动是有条件的,该计时器必须已经通过 console.time() 启动


console.timeLog命令的功能与timeEnd类似,但是timeEnd是结束,后面就无法再用当前的time计时器了timeLog之后还可以接着使用当前的time计时器


例子:timeEnd 结束后,timeLog 失效


console.time(1)var knum = 0;for (var i = 0; i < 10000; i++){  knum /= i;}
console.timeEnd(1);for (var i = 0; i < 100000; i++){ knum /= i;}console.timeLog(1);
复制代码





例子:timeLog 结束后,timeEnd 可以继续


console.time(1)var knum = 0;for (var i = 0; i < 10000; i++){  knum /= i;}console.timeLog(1);
for (var i = 0; i < 100000; i++){ knum /= i;}console.timeEnd(1);
复制代码



clear 控制台清理

在 cmd 终端中,大家都经常会使用 clear 命令进行清理


在浏览器控制条中也是同样存在 clear 命令的


console.clear()命令可以清理控制台



group 输出信息分组

有时候如果大家不嫌麻烦,可以做到像文件夹目录一般在控制台输出信息 ~ o( ̄▽ ̄)o


console.groupconsole.groupEnd这对兄弟相互结合


console.group("分组1")    console.log("第一次分组")    console.group("分组1的安排")        console.log("start")        console.log("begin")    console.groupEnd("分组1的安排")console.groupEnd("分组1")
console.group("分组2") console.log("第二次分组") console.warn("警告") console.error("报错")console.groupEnd("分组1")
复制代码



不过其实group还有一位兄弟,叫做groupCollapsed,它与 end 的配合也可以完成和 group 相同的功能


区别: groupCollapsed生成的输出信息会折叠,group生成的输出信息不会折叠


console.groupCollapsed("分组1");    console.log("第一次分组")    console.groupCollapsed("分组1的安排");        console.log("start")        console.log("begin")    console.groupEnd() console.groupEnd() 
console.groupCollapsed("分组2"); console.log("第二次分组") console.warn("警告") console.error("报错")console.groupEnd()
复制代码



table 将数据以表格的形式显示

使用console.table可以在控制台中以表格的形式显示出来


使用的条件是需要一个必须参数 data,data 必须是一个数组或者是一个对象


使用时可以添加可选参数 columns,此参数用来选择要显示的列的子集


基础示例:


console.table(["apples", "oranges", "bananas"]);
复制代码





输出一个对象数组:


var obj = {  name: 'apple',  age: 30,  color: 'red'}var obj2 = {  name: 'orange',  age: 15,  color: 'orange'}var obj3 = {  name: 'banana',  age: 24,  color: 'yellow'}console.table([obj,obj2,obj3]);
复制代码





使用可选参数 columns,只输出 age


console.table([obj,obj2,obj3], ["age"]);
复制代码



trace 输出一个堆栈跟踪

console.trace显示当前执行的代码在堆栈中的调用路径使用这一句话,你调用方法的路径就会很明白了 (私家侦探的跟踪)


function app() {  function check(){    console.trace()    function set() {      console.trace(2)    }    set()  }  check()}
app()
复制代码


trace 和 trace2 的运行到之前的方法都明明白白显示出来了 建议:在方法出错或者未成功运行时调用





console 输出一些有趣的

使用 %c,可以输出类似 HTML 中的内容


文字变色例子:


console.log("%c 看天上,%c 抱歉什么都没有", "color:red", "color:blue")
复制代码



输出图片例子:


background 的用法与 CSS 编写类似,并且也可以设置 margin 和 padding 属性 background:url 存放图片地址


注意:这里使用的是 chrome 浏览器


console.log(" %c\n %c 看左边", "background:url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=844971292,1777969318&fm=11&gp=0.jpg') no-repeat center center;background-size:200px 300px ;font-size:300px", "color:red" );
复制代码


效果:



输出 ascii 画


在线工具:



例子:(老司机都发车了,还不快来上车)


var d =`       .-------------------------------------------------------------.      '------..-------------..----------..----------..----------..--.|      |       \\            ||          ||          ||          ||  ||      |        \\           ||          ||          ||          ||  ||      |    ..   ||  _    _  ||    _   _ || _    _   ||    _    _||  ||      |    ||   || //   //  ||   //  // ||//   //   ||   //   //|| /||      |_.------"''----------''----------''----------''----------''--'|      .______________________________________________________________|       |)|      |       |       |       |    |      mga|      ||==|  |       | |      |  _-_  |       |       |    |  .-.    |      ||==| C|       | |  __  |.'.-.' |   _   |   _   |    |.'.-.'.  |  __  | "__=='       '---------'|( )|'----------------------'|( )|'----------""                   '-'                          '-'`console.warn(d)
复制代码


效果:




学习资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Consolehttps://www.calamus.xyz/https://www.cnblogs.com/tangwei89/p/11576936.html




发布于: 2021 年 06 月 14 日阅读数: 18
用户头像

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者,在线水文 主要干前端的活,业余会学学python 欢迎各位关注,互相学习,互相进步

评论

发布
暂无评论
浏览器上有趣的Console命令都了解吗?