10个chrome console实用小技巧

标签: chrome console 技巧 | 发表时间:2013-05-05 09: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 的对象,它提供多种方法向控制台输出信息,供开发人员调试使用.

Chrome 易用技巧:我的Chrome

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

chrome developer tool 调试技巧

- - Taobao UED Team
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.. 常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了..

谷奥: Chrome Tips 为您提供每日一条 Chrome 小技巧

- Lionheart - 谷奥聚合——谷奥主站+谷安 aggregator
Chrome Tips 是 Google Chrome 团队新搞的一个小扩展,为您提供每日一条关于 Chrome 使用的小技巧. 目前仍为测试版,没有什么设置选项,也仅提供英文的提示技巧. 奇怪的是,这货竟然需要那么多权限. 通过你的使用习惯和使用历史智能推荐合适的技巧. 如果各位看官通过这扩展发现什么实用的技巧,欢迎在留言中分享.

Chrome插件的国际化技巧

- iBeyond - keakon的涂鸦馆
今天在查看Proxy SwitchySharp的源码时,看到了一个国际化的技巧. 觉得很不错,于是给Sync My Tabs插件增加了国际化支持,并在此分享. 其实之前我在做Chrome插件时都有个疑点,翻译JavaScript里的文字用Chrome的i18n API很容易,但是要翻译HTML就麻烦了,毕竟动态生成HTML没有静态的方便.

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

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

免费电子书:《Chrome 的100个小技巧》

- 佳佳 - 谷奥——探寻谷歌的奥秘
经过长时间的不懈努力,ChromeStory 的博主终于完成了自己的第一本 E-Book:《Chrome 的100个小技巧》. 这本书包括了适用于 Chrome / Chrome OS / Chromebook 的10大类100个技巧,不管你是 Chrome 的新用户还是资深 Hacker 都不应该错过.

20条技巧,让Chrome超越Firefox (2010-11-16更新)

- Carl.King - 善用佳软
2010-11-16: 重写引言;新增目录;更新1-5的文字及配图. Firefox 浏览器是很多人心中的经典. 除了从NetScape开始的传奇色彩、对抗IE的英雄形象之外,在技术方面,Firefox 最被人称道的就是极为丰富的扩展、极强的定制性. 只要愿意花时间,用户可以打造出完全符合自己需求、具备无限功能的 Firefox.

在 Chrome 中使用 Gmail 发送图片的技巧:复制粘贴

- Goingmm - Chrome迷
大家应该已经知道了在 Chrome 中使用 Gmail 发送图片可以直接将图片拖到 Gmail 中进行发送,但你是否知道除了这个方法之外,还可以直接使用复制粘贴的方法呢. Lifehacker 今天给我们分享了这一技巧:. 使用方法简直是简单的不能再简单了,直接点右键复制任意网页上的随便一张图片,然后在 Gmail 的邮件编辑框中使用 Ctrl+V进行粘贴,就可以将图片呈现在邮件编辑框中进行发送了.