`

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

分享到:
评论

相关推荐

    轻松玩转chrome开发者模式

    除了基本的功能外,还有一些实用的小技巧可以帮助更高效地使用Chrome开发者工具: - **快捷键**:熟练掌握常用快捷键可以极大提升工作效率,比如`Ctrl + Shift + C`用于直接选择元素。 - **保存快照**:在Network...

    chrome helloworld程序

    在这个Hello World程序中,可能包含了一些简单的日志输出或者通知,如`console.log("Hello, Chrome Extension!")`。 3. **content_script.js**:内容脚本是在网页上下文中运行的JavaScript,它可以访问和修改网页的...

    javascript小技巧全集

    这个"JavaScript小技巧全集"涵盖了各种实用的编程技巧,旨在帮助开发者提升效率,编写出更优雅、性能更好的代码。无论您是在Windows、MacOS还是Linux等任何操作系统上工作,这些技巧都是通用的。 一、函数与闭包 1....

    Chrome 调试技巧(小结)

    Chrome浏览器的调试技巧是Web开发过程中必不可少的一部分,它可以帮助开发者高效地定位和修复代码问题。以下是一些关键的Chrome调试技巧: 1. **控制台输出**:`console.log()`是最常用的输出方法,用于打印字符串...

    chrome devtools.zip

    Chrome DevTools 是一款强大的网页开发和调试工具,它内置于Google Chrome浏览器中,为开发者提供了丰富的功能,...这个压缩包可能包含了一些使用技巧、实践示例或教学材料,帮助用户更好地掌握Chrome DevTools的使用。

    javascript小技巧&nbsp;&nbsp;超强推荐第3 5页.docx

    根据提供的文档信息,...10. **41个Web开发者必须收藏的JavaScript实用技巧:** 涵盖了从基础语法到高级应用的各种技巧,非常值得学习和参考。 以上就是从给定文档中提取的主要JavaScript知识点,希望对你有所帮助。

    js DIV滚动条随机位置的设置技巧.docx

    js DIV 滚动条随机位置的设置技巧 在 Web 开发中,DIV 滚动条是非常常见的交互元素,而随机设置 DIV 滚动条的位置可以增加用户体验的随机性和趣味性。今天,我们将介绍如何使用 ...* 9 个 JavaScript 日常开发小技巧

    使用Chrome调试JavaScript的断点设置和调试技巧

    在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题。不过放着 Chrome 中功能越发强大的开发者工具不用...

    实用Javascript调试技巧分享(小结)

    本文主要总结了一些实用的JavaScript调试技巧,旨在提高调试效率和体验。 首先,避免使用`alert`来调试。`alert`会阻塞用户界面,且仅能显示字符串形式的数据,对于复杂数据的查看并不友好。推荐使用`console.log`...

    在 Chrome DevTools 中调试 JavaScript

    为了便于学习,通常我们会创建一个简单的示例程序,比如在这个例子中,有一个计算两个数字之和的小 demo。当用户在输入框 num1 和 num2 中分别输入 6 和 9 后,点击“num1+num2”按钮,预期结果应该是 15,但实际...

    谷歌浏览器调试JavaScript小技巧

    5. 控制台(Console)调试:Chrome的控制台是另一个强大的调试工具。在控制台中,你可以直接输入JavaScript代码并立即执行。如果程序在某处中断,控制台的作用域将指向中断的位置。如果在全局范围内使用控制台,那么...

    amCoffee:Chrome控制台的CoffeeScript版本

    描述中提到的 "Chrome控制台的CoffeeScript版本" 表明amCoffee这个工具让开发者能够在Chrome的开发者工具(Console)中使用CoffeeScript语言进行调试和交互。这对于习惯于CoffeeScript语法的开发者来说是一个非常...

    (JavaScript调试工具,需要配合上一个一起使用)

    Chrome DevTools是Google Chrome浏览器内置的一套Web开发和调试工具,它包含了多个模块,每个模块都有特定的功能,如Elements、Sources、Console、Network、Performance等。这些工具可以帮助开发者在浏览器环境中...

    Chrome手势

    通过研究这个项目,开发者可以快速掌握Chrome手势的开发技巧,并应用到自己的项目中。 总之,Chrome手势通过JavaScript实现,可以极大地丰富用户在浏览器中的交互方式。通过理解其原理,结合实际的项目需求,开发者...

    得到浏览器尺寸,判断浏览器内核

    标题“得到浏览器尺寸,...总结来说,这个主题涵盖了前端开发中获取浏览器尺寸以适应不同设备屏幕,判断浏览器内核以确保代码兼容性,以及实现页面顶部返回功能的实用技巧。这些都是现代Web开发中不可或缺的基础技能。

    手机端web调试打印控制台

    这个“谷歌浏览器调试版”可能是一个特定的、与手机浏览器版本相匹配的低版本Chrome,确保可以在手机上正常运行并接受调试连接。下载并安装完成后,开发者需要在手机和电脑上都打开这个浏览器,并保持在同一局域网...

    shiny-robot:使用Chrome开发者编辑器

    这个名为"shiny-robot"的项目很可能是一个教学资源或示例代码,旨在引导用户学习如何有效利用Chrome DevTools进行JavaScript编程。 ### Chrome DevTools概述 Chrome DevTools是一套集成在Chrome浏览器中的Web开发...

Global site tag (gtag.js) - Google Analytics