10个chrome console实用小技巧

标签: chrome console | 发表时间:2013-05-05 01:06 | 作者:yuanyi
出处:http://heikezhi.com

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占用情况了:

参考:

相关 [chrome console] 推荐:

10个chrome console实用小技巧

- - 黑客志
让我们先从最常见的console.log开始,console.log负责将输入的一个或多个参数写入console,因此,如果你需要输出较为复杂的表达式,可以直接将它们分割为多个参数,而不需要用+进行手动拼接:. 除此之外,你也可以使用格式化字符来达到同样效果:. 除了d%和是%s,chrome console支持以下格式化字符,后面我们会详细说明:.

Firebug Console API 与命令行

- 红茶 - WEB前端开发
前几天有人问我关于firebug console的问题,其实我平时用的最多也就是console.log,相当于alert(). 还真没深入了解其他的api,今天在jsmix上看到了,所以转载过来分享一下 Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调试使用.

[收藏]利用 Console 来学习、调试JavaScript

- - Web前端 - ITeye博客
利用 Console 来学习、调试JavaScript. 一  什么是 Console. Console 是用于显示 JS和 DOM 对象信息的单独窗口. 并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 二  什么浏览器支持 Console. 很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console.

Chrome三岁啦!

- Yousri - Google 黑板报 - Google (谷歌)中国的博客网志,走近我们的产品、技术和文化
发布者:Google中国公关部. 今天,我们迎来了Chrome浏览器的三岁生日. 过去三年来,网络世界不断激发着我们的灵感,将网络的力量注入所有应用程序和网络体验中. 同时,所有的现代浏览器也在速度、简易性和安全性方面有了显著的提升. 为了庆祝Chrome的生日,我们制作了一个互动的信息图形,向大家展示主要的互联网技术和浏览器的演变进程.

Chrome 14发布

- Woooon - Solidot
Google发布了Chrome 14浏览器. 主要改进了Mac OS X Lion支持和激活Native Client(NaCl). 新版的特性包括:支持Web Audio API规格,允许Web应用支持富音频处理(演示);启用NaCl,允许第三方以非特定平台二进制的形式安全的执行原生码,NaCl为浏览器新能力开启了大门,如在浏览器中原生运行Vim编辑器.

ActiveX for Chrome 登陆 Chrome 官方扩展库

- Tony - Chrome迷
三个星期前,我们报道了 Chrome迷论坛会员 eagleonhill 打造出了首款可以在 Chrome 上使用 ActiveX 控件的扩展,引来了不少网友的关注. 不过当时的版本还非常初级,问题也很多,并且没有发布到官方 Chrome 扩展库中,很多用户表示不敢用. 经过作者的努力,现在这枚扩展已经修正了大量的Bug、给用户提供了一些预定义设置.

Chrome Extensions:超強大的 Chrome Remote Desktop!

- 阿良 - TechOrz 囧科技
Cloud Computing 令目前大部份用戶要做的,都可以在一個瀏覽器當中完成. 不過,雖然目前 HTML5 的技術開始普及,但總有些動作不能在 Browser 中完成,而日前 Chromium 團隊開發的全新 Chrome Extensions,大概可以補充到 Browser 不足之處. (...)閱讀全文Chrome Extensions:超強大的 Chrome Remote Desktop.

Chrome 易用技巧:我的Chrome

- 甜菜 - 煎蛋
我只是按照自己的想法和需求,简单改造了一下Chrome,将它变成了独一无二且为我服务的玩具. 我爱这种小清新式的个性化,实用、简洁、且让别人摸不着头脑 :D. 如上图,我的Chrome 界面是这样,它的目的是清爽、放松、没有任何的压迫性,所以我不喜欢Chrome 自带的最常访问的网站快捷框,特别是当你升级到15稳定版后,标签页强制显示的“最常访问的网站”或许会让你不爽,那么就用下面的方法,让自己变回小清新吧.

Chrome GNOME 3 主题

- robby - LinuxTOY
在 GNOME 3 环境下使用 Chrome/Chromium. 那么赶紧看看这款 Adwaita 风格的主题吧. 如图所示,在选项中设置使用系统边框后,Chrome/Chromium 在 GNOME 3 环境下成功还原了 Adwaita 风格,使用 GNOME 3 的铬粉们赶紧上吧. 消息来源:LinuxART.

Chrome Stable 11.0.696.77发布

- HRS - cnBeta.COM
在 Adobe 官方针对 Flash 的最新安全公告公开后,Chrome Stable/Beta/Dev 三个分支迅速同时进行了升级,除了升级内置的 Flash 外没有其他变化,但是由于安全事大,推荐所有用户马上升级.