除Console.log()外更多的Javascript调试命令


Posted in Javascript onJanuary 24, 2018

Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。

Console对象可以在任何全局对象中访问,如 Window,WorkerGlobalScope 以及通过属性工作台提供的特殊定义。
它被浏览器定义为 Window.Console,也可被简单的 Console 调用。

最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log(),几乎没有见过Console的其他用法,难道Console真的没有别的用法了?查了一下后发现Console还是非常强大的,至于为什么很少看到有人用可能是因为用过都删掉了吧。在此记录一下Console的其他用法。

注意:因为Console 对象提供对浏览器控制台的接入 所以在不同浏览器中的支持及表现形式可能不太一样,但是调试内容只有我们开发者会看,所以保证开发环境能用这些方法就可以了,下面演示全部都为Chrome上面的效果。

分类输出

不同类别信息的输出

console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('错误信息');

除Console.log()外更多的Javascript调试命令

分组输出

使用Console.group()Console.groupEnd()包裹分组内容。

还可以使用Console.groupCollapsed()来代替Console.group()生成折叠的分组。

console.group('第一个组');
 console.log("1-1");
 console.log("1-2");
 console.log("1-3");
console.groupEnd();
console.group('第二个组');
 console.log("2-1");
 console.log("2-2");
 console.log("2-3");
console.groupEnd();

除Console.log()外更多的Javascript调试命令

Console.group()还可以嵌套使用

console.group('第一个组');
 console.group("1-1");
  console.group("1-1-1");
   console.log('内容');
  console.groupEnd();
 console.groupEnd();
 console.group("1-2");
  console.log('内容');
  console.log('内容');
  console.log('内容');
 console.groupEnd();
console.groupEnd();
console.groupCollapsed('第二个组');
 console.group("2-1");
 console.groupEnd();
 console.group("2-2");
 console.groupEnd();
console.groupEnd();

除Console.log()外更多的Javascript调试命令

表格输出

使用console.table()可以将传入的对象,或数组以表格形式输出。适合排列整齐的元素

var Obj = {
 Obj1: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 },
 Obj2: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 },
 Obj3: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 },
 Obj4: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 }
}
console.table(Obj);
var Arr = [
 ["aa","bb","cc"],
 ["dd","ee","ff"],
 ["gg","hh","ii"],
]
console.table(Arr);

除Console.log()外更多的Javascript调试命令

查看对象

使用Console.dir()显示一个对象的所有属性和方法
在Chrome中Console.dir()Console.log()效果相同

var CodeDeer = {
 nema: 'CodeDeer',
 blog: 'www.xluos.com',
  
}
console.log("console.dir(CodeDeer)");
console.dir(CodeDeer);
console.log("console.log(CodeDeer)");
console.log(CodeDeer);

除Console.log()外更多的Javascript调试命令

查看节点

使用Console.dirxml()显示一个对象的所有属性和方法

在Chrome中Console.dirxml()Console.log()效果相同

百度首页logo的节点信息

除Console.log()外更多的Javascript调试命令

条件输出

利用console.assert(),可以进行条件输出。

当第一个参数或返回值为真时,不输出内容当第一个参数或返回值为假时,输出后面的内容并抛出异常

console.assert(true, "你永远看不见我");
console.assert((function() { return true;})(), "你永远看不见我");
console.assert(false, "你看得见我");
console.assert((function() { return false;})(), "你看得见我");

除Console.log()外更多的Javascript调试命令

计次输出

使用Console.count()输出内容和被调用的次数

(function () {
 for(var i = 0; i < 3; i++){
  console.count("运行次数:");
 }
})()

除Console.log()外更多的Javascript调试命令

追踪调用堆栈

使用Console.trace()来追踪函数被调用的过程,在复杂项目时调用过程非常多,用这个命令来帮你缕清。

function add(a, b) {
 console.trace("Add function");
 return a + b;
}
function add3(a, b) {
 return add2(a, b);
}
function add2(a, b) {
 return add1(a, b);
}
function add1(a, b) {
 return add(a, b);
}
var x = add3(1, 1);

除Console.log()外更多的Javascript调试命令

计时功能

使用Console.time()Console.timeEnd()包裹需要计时的代码片段,输出运行这段代码的事件。

Console.time()中的参数作为计时器的标识,具有唯一性。 Console.timeEnd()中的参数来结束此标识的计时器,并以毫秒为单位返回运行时间。最多同时运行10000个计时器。

console.time("Chrome中循环1000次的时间");
for(var i = 0; i < 1000; i++)
{
}
console.timeEnd("Chrome中循环1000次的时间");

除Console.log()外更多的Javascript调试命令

性能分析

使用Console.profile()Console.profile()进行性能分析,查看代码各部分运行消耗的时间,但是我在Chrome自带的调试工具中并没有找到在哪里查看这两个方法生成的分析报告。应该需要其他的调试工具。

有趣的Console.log()

最后再来介绍一下强大的Console.log(),这个方法有很多的用法(其他输出方法的用法,如error()等,可以参照log()使用)。

一、提示输出

可以再输出的对象、变量前加上提示信息,增加辨识度

var ans = 12345;
console.log("这是临时变量ans的值:",ans);

除Console.log()外更多的Javascript调试命令

二、格式化输出

占位符

含义 %s 字符串输出 %d or %i 整数输出 %f 浮点数输出 %o 打印javascript对象,可以是整数、字符串以及JSON数据

样例:

var arr = ["小明", "小红"];
console.log("欢迎%s和%s两位新同学",arr[0],arr[1]);
console.log("圆周率整数部分:%d,带上小数是:%f",3.1415,3.1415);

除Console.log()外更多的Javascript调试命令

三、自定义样式

使用%c为打印内容定义样式,再输出信息前加上%c,后面写上标准的css样式,就可以为输出的信息添加样式了

console.log("%cMy stylish message", "color: red; font-style: italic");
console.log("%c3D Text", " 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.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');

除Console.log()外更多的Javascript调试命令

总结

Console的用法很多,有些再调试过程中非常实用,可以节省很多时间。当然我知道debug还是用断点调试的方法比较好,但是小问题用“printf大法”也是很好用的(滑稽脸)。

Javascript 相关文章推荐
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
深入理解node.js http模块
Jan 24 #Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 #Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 #Javascript
Angular整合zTree的示例代码
Jan 24 #Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 #Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 #Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 #Javascript
You might like
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
JavaScript如何操作css
2020/10/24 Javascript
python函数形参用法实例分析
2015/08/04 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python3多线程知识点总结
2019/09/26 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
数学系个人求职信范文
2014/01/30 职场文书
思想品德自我评价
2014/02/04 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
刑事代理授权委托书
2014/09/17 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
教师病假条范文
2015/08/17 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS