除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 相关文章推荐
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
微信小程序实现留言板
Oct 31 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
YII框架常用技巧总结
2019/04/27 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
使用python实现链表操作
2018/01/26 Python
Python实现的栈(Stack)
2018/01/26 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
教师个人自我鉴定
2014/02/08 职场文书