前言

很多时候我们在调试的时候经常用console.log,我感觉其实一个就够了,但是有时候你不可能写一步就去调试下,所以呢,经常用几个console.log,有时候挺难找的,后面翻了翻console的这个知识的,发下还有很多可以用的,总结分享一下。

正文

和console.log的兄弟(同等级):

<script>
console.log("log","log提示");
console.info("info","info提示");
console.warn("warn","warn提示");
function error() {
console.error("error", "error提示");
alert("123");
}
error();
</script>

经过console并不会影响代码的允许过程,会弹出"123";

结果:

可以看到,他们的区别就是颜色的不同。给我们看到的信息也是不同的。

随着js的模块化,那么我们能否根据某个不同的模块去划分不同的log区域?如果可以区分不同模块的log,那么我们定位问题debug的能力也会提高。

console.group("功能a块");
console.log("功能a产生的数据");
console.groupEnd();
console.group("功能b块");
console.log("功能b产生的数据");
console.groupEnd();

还有一个就是groupCollapsed

console.groupCollapsed("功能a块");
console.log("功能a产生的数据");
console.groupEnd();
console.groupCollapsed("功能b块");
console.log("功能b产生的数据");
console.groupEnd();
console.group("功能a块");
console.log("功能a产生的数据");
console.groupEnd();
console.group("功能b块");
console.log("功能b产生的数据");
console.groupEnd();

其实一个是闭合的一个是展开的。

同样有时候我们查看一些list的时候,如果数据太多,我们看起来是有点费劲的,那么如果你使用console.table将会清晰一些:

var jsonarr=[{"name":"张三","age":"21"}];
console.table(jsonarr);
var arr=[
["aa","bb","cc"]
];
console.table(arr);

这个主要是为了看的方便,但是用完了关闭log功能,性能真的差。

接下来看一下:console.dir() console.dirxml()吧。

console.dir()来看一下吧:

console.log(document.location);
console.dir(document.location);

来看下有啥区别:

console.dirxml():

console.log(document.getElementById('test'));
console.dir(document.getElementById('test'));

console.assert()这个是按条件输出的。

var numarr=[1,2,3,4,5,6,7,8,9];
console.assert((function () {
if(numarr.length<100)
{
return false;
}
else
{
return true;
};
})(),"数组长度不大于100")

console.count("第几次运行:");

后面自动会补充数字:

console.group()
console.count("第几次运行:");
console.count("第几次运行:");
console.count("第几次运行:");
console.groupEnd()
console.group()
console.count("第几次运行:");
console.count("第几次运行:");
console.count("第几次运行:");
console.groupEnd()

有点局限性,就是他是全局的,而不分组。



但是呢,我们可以重置:

console.countReset();

let user = "";

function greet() {
console.count();
return "hi " + user;
} user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();

结果为:

"default: 1"
"default: 2"
"default: 3"
"default: 4"
"default: 0"

console.trace();在这之前调用了啥,一个运行过程。

function  action()
{
console.trace("执行过程");
}
function actionparent()
{
action();
}
actionparent();

console.time()和console.timeEnd();这个比较重要了,我们测试性能的必备。

console.time()
for (var i = 0; i < 1000; i++) { }
console.timeEnd();

还有一个调试非常需要用到的:console.clear() 清除前面的log,方便我们局部测试。

console.log(1);
console.clear();
console.log(2);

js console一些常用的功能的更多相关文章

  1. js,jQuery数组常用操作小结

    一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...

  2. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  3. 【原】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  4. 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  5. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  6. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

  7. js javascript map函数去重功能的使用实例

    js javascript map函数去重功能的使用实例 先上一个实战例子代码 var map = new Map(); for(var i=0; i<=9; i++){ map.set(i,i ...

  8. js插件---datatable常用配置

    js插件---datatable常用配置 一.总结 一句话总结: datatable常用配置百度一下特别方便 二.jquery datatable 实例操作 转自或参考:jquery datatabl ...

  9. php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

随机推荐

  1. 如何利用python实现报表自动化?让你更高效的完成工作内容

    如果能够实现报表自动化,那我们将节约不少的时间,更高效的完成工作内容.那么,如何利用python实现报表自动化呢?本文将介绍xlwt .xlrd.xlutils的常用功能,xlwt写Excel时公式的 ...

  2. 3. css百度制作字体图片

    http://fontstore.baidu.com/static/editor/index.html?qq-pf-to=pcqq.group

  3. cgi、fastCGI、php-fpm、 php-CGI的区别

    cgi.fastCGI.php-fpm. php-CGI的区别 作为面试的高频热点问题,必须来一波记录: 我们发送一个请求到收到响应之间的一个过程是什么? 如果客户端请求的是 index.html,那 ...

  4. 百度云BCH配置说明

    百度云虚拟空间(BCH)  来源:https://www.cnblogs.com/llll/p/7930029.html 参考资料:https://cloud.baidu.com/doc/BCH/Ge ...

  5. 地点下来框的实现(php)

    效果图: 样式(bootstrap): class="selectpicker show-tick form-control",就是多了个form-contro就行了 概念: 这里 ...

  6. 2018 ICPC Pacific Northwest Regional Contest I-Inversions 题解

    题目链接: 2018 ICPC Pacific Northwest Regional Contest - I-Inversions 题意 给出一个长度为\(n\)的序列,其中的数字介于0-k之间,为0 ...

  7. Python下redis包安装

    找到Python的第三方包安装路径,在dos命令行中切换到该目录,输入: pip install redis 最后在Python解释器中即可.

  8. Linux笔记(shell基础,历史命令,命令补全/别名,通配符,输出重定向)

    一.shell 基础 shell是个命令解释器,提供用户和机器之间的交互 每个用户都可以拥有自己特定的shell centos7默认Shell为bash(Bourne Agin shell) 除了ba ...

  9. cookie、session 和 token 区别

    1.什么是 cookie cookie 是保存在本地终端的数据.cookie 由服务器生成,发送给浏览器,浏览器把 cookie 以 kv 形式保存到某个目录下的文本文件内,下一次请求同一网站时会把该 ...

  10. shell之路 Linux核心命令【第一篇】管道符与重定向

    输出重定向 命令输出重定向的语法为: command > file 或 command >> file 这样,输出到显示器的内容就可以被重定向到文件.果不希望文件内容被覆盖,可以使用 ...