在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. hiho 第七周 完全背包

    完全背包 #include<iostream> #include<memory.h> #include<cmath> using namespace std; #d ...

  2. WeexSDK之注册Modules

    注册Modules的流程和注册Components非常类似. + (void)_registerDefaultModules { [self registerModule:@"dom&quo ...

  3. first one

    我说一句话你就知道我是干什么的 hello world

  4. 583. Delete Operation for Two Strings

    Given two words word1 and word2, find the minimum number of steps required to make word1 and word2 t ...

  5. 第九节:详细讲解Java中的泛型,多线程,网络编程

    前言 大家好,给大家带来详细讲解Java中的泛型,多线程,网络编程的概述,希望你们喜欢 泛型 泛型格式:ArrayList list= new ArrayList(); ArrayList list= ...

  6. React.js 三周 -- 入门到搭建团队基础项目

    吐槽 公司自己的产品,由于历史遗留问题,前端一直是和java放到一个项目里写的. 导致了,前端就被死死的绑在了IDEA战车上.想要看页面效果,先起几个java服务.想要调试一个改动,重启个java服务 ...

  7. Java学习笔记28(集合框架二:Iterator迭代器)

    Iterator接口,翻译成中文是迭代器 迭代器的概念通俗解释: java中有很多的集合,内部有各种存储方法,取出的方式也各不相同,是否可以有一种通用的方式来获取呢? 这种方式类似for循环遍历, 通 ...

  8. /etc/sysconfig/iptables 默认配置详解

    [参考链接]:一把三尺剑的百度知道回答 1. iptables文件 2. 规则语句详解 :INPUT ACCEPT [0:0] # 该规则表示INPUT表默认策略是ACCEPT :FORWARD AC ...

  9. maven 下载镜像文件卡,下载pom文件慢的问题

    问题原因: maven默认的镜像库URL为 http://maven.net.cn/content/groups/public/ 由于网络原因,可能导致响应速度超级慢,或者无法效应: 解决方法: 配置 ...

  10. [P4921] 情侣?给我烧了!

    回顾一下错排公式 错排问题: 设n位错排数为D[n].考虑元素1的位置,设置为k(有n-1中 ):在考虑元素k的位置, 若为1,则转换为n-2位的错排:否则,视元素k为元素1(不能放在位置1),转换为 ...