在js调试中,大部分的前端人员都是采用console.log()方法来打印出调试的数据,但是很多人都不知道console这个对象有很多很实在的方法,本文就来介绍一下这些方法的使用。

一、console.log()

console.log()这个方法是前端人员最熟悉的了,几乎我们每天都会使用,除了简单的打印对象功能,那么以下两种使用方法你知道吗?
1、多参数记录

当我们要去比对两个对象时,想让这两个对象整齐的在两边,这时console.log()就能帮上我们的忙。
2、格式化输出
console.log(msg, values);这种跟C#的string.Format()有点像,console.log()能支持字符串、整数、浮点数、object对象以及css样式的格式化输出。占位符及其描述如下表。

占位符 描述
%s 字符串
%d/%i 整数
%f 浮点数
%o/%O object对象
%c css样式

接下来我们来做一下举例:
①、字符串格式化为在占位符的地方原样输出我们的值:

②、整数与浮点数一致我们这里就不过多举例了:

③、对于object对象的格式化输出就有比较大区别了,当为%o时输出和不使用格式化输出打印出来的结果一样,当为%O时,可以看到对象的各个属性,比如我们打印一个DOM节点,%o打印的是此节点及其子节点,%O打印的是是该dom节点各个对象属性。

④、css样式输出,样式会在%c后面都加上这个样式

二、console.dir()

这个方法在大部分时候都跟console.log()一致,但是还是略有不同。

在查询DOM结构时,更能体现出两者的不同。console.log(element)打印的dom结构,而console.dir(element)打印的则是整个dom对象。

三、console.table()

令人意外的是,很多人都不知道有这个方法,其作用是当我们想对一个复杂的对象进行输出时,使用console.log()往往是输出一些不能一目了然的数据,此时console.table()就能帮我们把这个对象整理成一个列表,以便于我们很清晰的看到数据。

四、console.warn()

这个方法跟console.log()几乎一致,唯一的区别就是浏览器会对其有不一样的对待,会输出一个警告。

五、console.assert()

assert函数是对输入的值进行断言,相信有写过单元测试的读者们都很熟悉了。当

六、console.count()

此方法是用来统计count被调用的次数。

七、console.trace()

调试JavaScript程序时,有时需要打印函数调用的栈信息,这可以通过使用console.trace()来实现,此方法一般用来显示当前执行的代码在堆栈中的调用路径,可清洗的看到被调用的过程。

八、console.time()与console.timeEnd()

console.time() 方法是作为计算器的起始方法。该方法一般用于测试程序执行的时长。
console.timeEnd() 方法为计算器的结束方法,并将执行时长显示在控制台。如果一个页面有多个地方需要使用到计算器,可以添加标签参数来设置。

九、console.group()与console.groupEnd()

console.group() 方法用于设置分组信息的起始位置,该位置之后的所有信息将写入分组。
console.groupEnd() 方法用于结束分组标签。
使用 console. groupCollapsed() 方法来设置折叠的分组信息。

十、console.clear()

console.clear() 方法用于清除控制台所有信息。
console.clear() 方法在执行成功后,会在控制台输出: "Console was cleared"。

总结

在js调试中,虽然console对象的有些方法我们也很少用到,但是我们不能单纯只会一个console.log(),了解并学会使用其他方法,对我们在调试过程中起到了很关键的作用,使我们的效率能更高。关于此对象的所有用法,本文参考了菜鸟教程的部分文章,想深入学习的读者可以继续移步学习。
笔者水平有限,本文若有不对之处,请留言指正,不胜感激!

Js调试中不得不知的Console的更多相关文章

  1. JS 调试中常见的报错的解决办法

    报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) ...

  2. js调试中打印语句

    document.write(); console.log(); window.alert();

  3. JavaScript调试中Console命令

    JS调试中,用console.log 感觉比 alert 好用,不用弹出窗口,还要关闭.除了console.log()其他命令没怎么用过,先在这里记一下,用到时在看看 一.显示信息的命令 consol ...

  4. 一探前端开发中的JS调试技巧

    前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  5. 前端开发中的JS调试技巧

    前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  6. 【repost】一探前端开发中的JS调试技巧

    有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...

  7. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  8. 一探前端开发中的JS调试技巧(转)

    有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...

  9. [转]九个Console命令,让js调试更简单

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...

随机推荐

  1. Django 通过 mongoengine 连接 MongoDB 进而使用orm进行CRUD

    一. 在python脚本中, 我们通常可以使用pymongo模块实现与mongodb数据库的交互, 但是在使用Django框架进行定制开发的web server 项目中, 仍然使用pymongo模块的 ...

  2. AndroidStudio制作欢迎界面与应用图标

    前言 大家好,给大家带来AndroidStudio制作欢迎界面与应用图标的概述,希望你们喜欢 欢迎界面与应用图标 本项目使用Android Studio 3.0.1作为开发工具 activity_sp ...

  3. 三种方法在当前目录下打开cmd命令窗口

    概述 运行npm的时候,每次都要cd到目录,很麻烦,所以总结了三种在当前目录下直接打开cmd窗口的方法,供以后开发时参考,相信对其他人也有用. 方法一 在当前目录按住shift再右键. 会看到右键菜单 ...

  4. Setting Up Swagger 2 with a Spring REST API

    Last modified: August 30, 2016 REST, SPRING by baeldung If you're new here, join the next webinar: & ...

  5. Android 开发工具推荐

    简评: 自己过去在 Android 开发中发现的好工具,在这里分享给大家.: ) Library methods count 每一个 Android App 的开发中都会用到很多的库,这个工具能够让你 ...

  6. python实现线性排序-基数排序

    基数排序算法是一种是一种非比较型整数排序算法,其原理是将整数按位数切割成不同的数字,然后按每个位数分别比较. 由于整数也可以表达字符串(比如名字或日期)和特定格式的浮点数,所以基数排序也不是只能使用于 ...

  7. typeof 与instanceof

    函数原型链: 2.typeof获取到的是产生该对象的根源object, instanceof获取的是最终产生该对象的父级构造函数 <script> var arr=[1,2,3,4,&qu ...

  8. MongoDB索引管理-索引的创建、查看、删除

    索引是提高查询查询效率最有效的手段.索引是一种特殊的数据结构,索引以易于遍历的形式存储了数据的部分内容(如:一个特定的字段或一组字段值),索引会按一定规则对存储值进行排序,而且索引的存储位置在内存中, ...

  9. Mac上安装pipenv时报错

    version:mac os Mojave 10.14.2 执行时报错: pip install pipenv 改为: sudo pip install pipenv --upgrade --igno ...

  10. 杜绝假死,Tomcat容器做到自我保护,设置最大连接数(服务限流:tomcat请求数限制)

    为了确保服务不会被过多的http长连接压垮,我们需要对tomcat设定个最大连接数,超过这个连接数的请求会拒绝,让其负载到其它机器.达到保护自己的同时起到连接数负载均衡的作用. 一.解决方案:修改to ...