console
你所不知道的 Console
转自 https://segmentfault.com/a/119000000672160
1.凡人视角
打印字符串
代码:
console.log("I am a 凡人");
打印提示消息
代码:
console.info("Yes, you arm a 凡人");
打印警告消息
代码:
console.warn("凡人你居然敢窥视我");
打印错误消息
代码:
console.error("天兵天将,把这个凡人给我打入地狱");
打印调试信息
console.debug("我就是传说中的debug");
2.上帝视角
查看所有方法
console 除了上面的几个方法还有什么方法呢?log 除了能打印字符串外,还能打印出对象,我们可以利用 console.log 打印自己。
代码:
console.log(console);
输出:
Object {
assert: ...,
clear: ...,
count: ...,
debug: ...,
dir: ...,
dirxml: ...,
error: ...,
group: ...,
groupCollapsed: ...,
groupEnd: ...,
info: ...,
log: ...,
markTimeline: ...,
profile: ...,
profileEnd: ...,
table: ...,
time: ...,
timeEnd: ...,
timeStamp: ...,
timeline: ...,
timelineEnd: ...,
trace: ...,
warn: ...
}
啊咧咧?怎么这么多方法。其实上面的 console 方法 不一定每个浏览器 都有实现,我这边使用的是 chrome浏览器 。所以说,这个特性是非标准的,请尽量不要在 生产环境 中使用它。
但是我们可以在 开发环境 中,合理的利用 这些方法来帮助我们开发。
清理控制台
如果我们在控制台调试的时候,难免 强迫症 发作想清理掉已经乱七八糟的控制台。浏览器和命令行 clear 一样提供了一个清理函数 console.clear() 。
console.clear()
当然我们也可以用 chrome 的 command line api 来清理控制台。
clear()
又或者可以使用按键Mac上 cmd + k ,Win ctrl + l(我用的是chrome浏览器)。
分组
当代码非常长,或者我们需要把一个函数,或者一个文件中的函数等区分出来。我们可以使用分组来实现。
代码:
console.group('凡人');
console.log("手");
console.log("脚");
console.groupEnd();
console.group('神');
console.log("法力无边");
console.log("腾云架雾");
console.groupEnd();
输出:
如果想要输出为折叠,我们可以使用 console.groupCollapsed ,用法和 console.group 类似。
查看对象信息
有时候我们需要打印出对象信息,可以使用 console.log 来进行简单的输出。
代码:
var person = {
head: 1,
hand: 2,
leg: 2
};
console.log(person);
呜呜,可是这个显示得好丑,我们这个时候就可以使用传说中的神器 console.table 来帮助我们清楚的显示 关联数组信息。
var data = [
{
'姓名': '幼儿园',
'性别': '女'
},
{
'姓名': '李狗嗨',
'数量': 1
}
];
console.table(data);
输出:
但是如果想要看详细的对象信息,我们可以使用 console.dir,将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,它还能打印出函数等。
console.dir(clear);
什么?你想看某个节点中的html代码?没事,我们可以用 console.dirxml 来查看页面中对应元素的 html/xml 内容。
html代码:
<div id='person'>
<p>I am a 凡人</p>
</div>
javascirpt代码:
var person = document.getElementById('person');
console.dirxml(person);
性能测试
雷军粑粑老是喜欢说:“不服?跑个分。”有时候,我们也需要对代码跑个分。这个时候,我们可以使用console.time和console.timeEnd,他们可以记录代码运行所花费的时间。
console.time("神机妙算");
(function () {
for(var i = 0; i < 10; i++) {
var sum = (function () {
var flog = 0;
for(var i = 0; i < 10; i++) {
flog+=i;
}
})();
}
})();
console.timeEnd("神机妙算");
啊咧咧?你这个顶多就是 计时器 怎么能说是 性能测试 。客官别急,我们这还有一个叫做 console.profile 和 console.profileEnd 姐妹呢~~
console.profile("神机妙算");
(function () {
for(var i = 0; i < 10; i++) {
var sum = (function () {
var flog = 0;
for(var i = 0; i < 10; i++) {
flog+=i;
}
})();
}
})();
console.profileEnd("神机妙算");
输出会显示在 profile
什么还是不够?你还想知道运行时的结果栈?可以可以,我们这还有一位 console.trace 哦。他可以看透大爷你的一局一动哦。
代码:
function add(num) {
if (0 < num) {
console.trace("现在num的值为", num);
return num + add(num - 1);
} else {
return 0;
}
}
var a =3;
add(3);
输出:
判断真假
平时我们在写代码是时候,经常需要判断一下当前值的真假情况,使用if或者三元表达式来达到目的。我们现在也可以使用 console.assert 来判断,该方法会在条件为错误时,返回一个 console.error 的输出。
console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));
统计次数
有时候我们需要统计一个函数或者被调用了几次,我们通常会增加一个变量 count 来记录,然后在控制台中查看。这样相当的麻烦,我们可以使用 console.count 函数来帮忙我们记录次数,并输出。
function hi(name) {
console.count(name);
return "hi " + name;
}
for(var i = 0; i < 10; i++) {
if(i < 4) {
hi("person");
} else {
hi("god");
}
}
console的更多相关文章
- console的高级使用
1.console.table()用来表格化展示数据. var people = { zqz: { name: 'zhaoqize', age: 'guess?' }, wdx: { name: 'w ...
- const let,console.log('a',a)跟console.log('a'+a)的区别
const 创建一个只读的常量 let块级作用域 const let重复赋值都会报错 console.log('a',a) a console.log('a'+a) a2 逗号的值会有空格:用加号的值 ...
- 学习笔记之(console)
今天小颖在逛博客园时,发现一位帅锅写的有意思的Console小颖看了后,就自己敲了一遍嘻嘻,为了方便以后查看,小颖把它记录下来嘻嘻,有兴趣的小伙伴也可以自己试试哦. 格式占位符 作用 %s 字符串 % ...
- Node.js:console模块
console模块提供了一个简单的调试功能,类似与web浏览器的javscript console. 下面简单介绍下该模块的使用以及用途,我使用了ES6的模版字符串(使用反引号标识),有兴趣的可以去了 ...
- console.log("A"-"B"+"3")=?
(点击上方的订阅号,可快速关注,关注有惊喜哦^_^) 前不久看到一道JS基础题目,做了一下竟然错了一半...在此分享一下: 先把题目放上来,大家可以自己测试一下再看答案哦^_^ ①console.lo ...
- [No000090]C#捕获控制台(console)关闭事件及响应cmd快捷键
捕获控制台(console)关闭事件: 1.Ctrl+C信号: 2.Ctrl+Break信号: 3.用户系统关闭Console时: 4.用户退出系统时: 5.系统将要关闭时: using System ...
- 简单的浏览器调试——console命令
一.显示信息 <script type="text/javascript"> console.log('hello'); console.info('信息'); con ...
- 浏览器控制台命令调试——console
控制台命令调试时通过浏览器开发工具中的控制台命令嵌入到JavaScript中,输出特定的信息或日志,从而达到调试的目的. 我们常用的Chrome和FireFox,都可以通过F12来打开开发工具. 下面 ...
- Chrome浏览器调试,console简述
作为一个前端开发者,不可避免的需要进行各种各样的调试. 在谷歌浏览器出来以前,火狐的firebug是特别有名的一款调试工具,不过自从谷歌浏览器诞生以来,其自带的开发者工具足以媲美firebug,某种程 ...
- 尝试在你浏览器的Console(F12)中运行一下,你会发现页面被不同的颜色块高亮了(css调试中学到的js)
现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享A ...
随机推荐
- Ideas about the future of management
1. Business markets a. greater competition among companies b. increase in power of global companies ...
- AngularJs--angular-pagination可复用的分页指令
1.angular-pagination 是基于angular 编写的可复用分页指令 安装 克隆项目到本地: git clone https://github.com/febobo/angular-p ...
- JavaScript,复习总结
ECMA(European Computer Manufacturers Association)欧洲计算机制造商协会.其制定很多标准:C#语言规范:C++/CLI语言规范:Eiffel语言:CD-R ...
- PhpStorm创建Drupal模块项目开发教程(2)
通常支持Drupal HOOK的文件为.module.首先我们需要在这里对它进行声明,以便索引,并且在代码完成中使用Ctrl+Space(空格)完成HOOK实现. Drupal HOOK调用,通常情况 ...
- 写Python脚本语言时,“SyntaxError: Non-ASCII character '\xe6' in file”错误的处理
如图是一段简单的文件操作代码,以为打开文件"test1221_1.py",若不存在此文件,则创建此文件.接下来并输出相关信息. 当少写了黄色方框圈起来的一行看似不经意的带有编码格式 ...
- XML Schema choice 元素
XSD : <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:sch="http://w ...
- Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器
(八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵 ...
- spring " expected single matching bean but found 2" 问题一例。
初入java,使用spring时遇到一个问题,左边是一个接口和实现.右边是service和实现. @Service@Transactional(rollbackFor = Exception.clas ...
- 常用快捷键(WebStorm, Eclipse, Sublime)
WebStorm 常用快捷键 Ctrl + / 单行注释// Ctrl + Shift + / 块注释/*…*/ Ctrl + D 复制行 Ctrl + Y 删除行 Ctrl + X 剪切(删除)行, ...
- js,jquery获取浏览器信息
1.js获取: 查看:window.navigator 2.jQuery获取: chrome firefox 推荐使用navigator获取userAgent然后去正则匹配 参考匹配规则:http:/ ...