10个chrome console实用小技巧
2015-11-09 12:01
330 查看
10个chrome console实用小技巧
1. 基本输出
让我们先从最常见的console.log开始,console.log负责将输入的一个或多个参数写入console,因此,如果你需要输出较为复杂的表达式,可以直接将它们分割为多个参数,而不需要用+进行手动拼接:console.log("Node count:", document.childNodes.length, "and the current time is:", Date.now());
除此之外,你也可以使用格式化字符来达到同样效果:
console.log("Node count: %d, and the current time is: %s", document.childNodes.length, Date.now());
除了d%和是%s,chrome console支持以下格式化字符,后面我们会详细说明:
%s,字符串
%d/%i,整数
%f,浮点数
%o,DOM元素
%O,JS对象
%c,CSS样式
2. DOM元素和JS对象
就如前面提到的,我们可是使用%o和%O来输出DOM元素和JS对象,实际上不用这么麻烦,你可以直接传递DOM元素给console.log,对于JS对象,则可以使用console.dir或者dir。console.log(document.body.firstElementChild)
console.dir(document.body.firstElementChild);
除了dir,chrome console还封装了Object.keys和Object.values,因此你可以直接使用keys和values来检查某个对象的键/值。
3. CSS
如果你希望console的输出更绚丽多彩一些,甚至可以使用css来控制输出的样式:console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
如果你是markdown爱好者,可以试试Github上的这个Log项目,它可以让你使用markdown语法来格式化输出:
项目地址:https://github.com/adamschwartz/log
4. console.assert & console.count
如果你读过jQuery作者John Resig和Bear Bibeault写的“Secrets of the JavaScript Ninja”这本书,想必还记得全书就是从一个assert函数定义开始的,使用chrome,你可以省去自定义assert的麻烦,直接使用console.assert来进行断言:console.assert(list.childNodes.length < 500, "Node count is > 500");
除了console.assert,chrome console还提供了一个很有用的API:console.count,有时候你可能想要知道某个函数执行了多少次,这时候console.count就派上用场了:
function login(user) { console.count("Login called"); // login() code... }
你还可以传递不同的label,每个label都会进行单独计数 :
5. 分组输出
你可能在JS的单元测试框架中见过这样的输出,如果你希望你的输出信息也像这样有条例,只需要使用console.group和console.groupEnd来对输出进行分组就可以了:var user = "jsmith", authenticated = true, authorized = true; // Top-level group console.group("Authenticating user '%s'", user); if (authenticated) { console.log("User '%s' was authenticated", user); // Start nested group console.group("Authorizing user '%s'", user); if (authorized) { console.log("User '%s' was authorized.", user); } // End nested group console.groupEnd(); } // End top-level groupconsole.groupEnd(); console.log("A group-less log trace.");
如果希望分组默认是折叠起来的,只需要用console.groupCollapsed代替console.group就可以了。
6. 测量时间
如果想要知道某段代码执行了多少时间,console.time和console.timeEnd可以很好的帮到你:console.time("Array initialize"); var a = new Array(); for(var i=0;i<10000;i++) a[i] = "element" + i; console.timeEnd("Array initialize");
7. 选取元素
即使当前页面没有加载jQuery,你也依然可以使用$和$$函数来选取元素,实际上,这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装,$用于选取单个元素,$$则用于选取多个:8. 检查元素
如果需要在DOM树中快速查找某个DOM元素,除了在那个元素上通过右键点击“检查元素”菜单外(有时这样会很低效),你还可以使用inspect方法,它会为你在DOM树中快速定位到你要检查的那个元素:上面这个例子使用了$_来引用最近的一个表达式,除了$_,你还可以使用$0,$1,$2,$3,$4,$5这5个变量来引用最近选取过的5个DOM元素。
9. 事件监控和检查
如果你需要监控某个对象上的事件,可以使用monitorEvents,下面的例子会在console中输出所有的resize事件:monitorEvents(window, "resize");
要停止监控,可以调用 unmonitorEvents()
unmonitorEvents(window);
如果想要了解某个对象绑定了那些事件处理函数,chrome console提供了getEventListeners函数用来检查某个对象上的所有事件处理函数:
10. CPU profile
最后,如果你希望了解某段代码的CPU占用情况,可以使用profile和profileEnd来生成CPU profile:profile("Array initialize"); var a = new Array(); for(var i=0;i<10000;i++) a[i] = "element" + i; profileEnd("Array initialize");
现在就可以在Profiles Tab下查看这段代码的CPU占用情况了:
本文转自:
http://heikezhi.com/yuanyi/10%E4%B8%AAchrome%20console%E5%AE%9E%E7%94%A8%E5%B0%8F%E6%8A%80%E5%B7%A7
相关文章推荐
- JQUERY 获取html标签中的属性值
- 示例详解JavaScript解析器的执行过程
- React学习中几个注意点
- xcode7.1更新之后使用真机调试
- 0-1背包问题与子集合加总问题的近似算法
- oracle还原数据库及遇到的问题
- Linux wext和nl80211接口简介
- GCD用法笔记
- 卷积的理解
- iOS开发 coreText
- Time machine 备份 硬盘分区格式化
- UIView 属性和方法
- 【UML】-九种图之状态图
- JavaScript__的this与函数
- Redmine一键安装配置、Redmine数据库管理备份
- 技术成长记录
- Mysql常用命令汇总
- ImportError: 'DLL load failed: %1 is not a valid Win32 application.
- wap 往下拉自动加载更多数据
- 二、八、十、十六进制转换(图解篇)