专注于
IT技术和业内交流

Chrome DevTools — 诊断、打印log

控制台记录是监测页面和应用运行的强有力的工具。让我们开始使用console.log() 并探索其他高级用法。

输出信息到console

console.log()方法可以用于任何控制台的基础记录。可以把一个或者多个语句当作参数传递进去然后把它们当前的值输出到 console。

在JavaScript执行这行代码:

console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());

在控制台中会输出:
Log Multiple

自动填充命令

当您在控制台中键入命令,控制台将自动显示匹配你已经输入文字得相关的方法并自动完成下拉菜单。这包括你以前执行的命令。

example of autocomplete

分组输出

分组信息汇总

你可以通过分组命令把相关联的输出信息分在一起。console.group() 命令通过一个字符串的参数来给你的组命名。控制台将会把所有所有的输出信息组合到一块。要结束分组,你只需要调用

console.groupEnd() 即可。

示例输出:

var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
    console.log("User '%s' not authenticated.", user)
}
console.groupEnd();

示例输出:
Simple console group output

嵌套组

日志信息的分组可能还会相互嵌套,这对于在一个狭小空间一次性看大量信息来说非常有用。

这个示例代码展示了一个登录程序中验证阶段的日志分组:

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 group
console.groupEnd();
console.log("A group-less log trace.");

控制台中的嵌套分组输出信息:
Simple console group output

自动折叠组

当你对输出信息进行多次分组以后,你就不用直接看到全部的输出信息了,这是非常有用的。你可以通过调用console.groupCollapsed() 代替之前使用的 console.group()来自动为信息分组:

console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
    ...
}
console.groupEnd();

groupCollapsed()输出:
Initially collapsed group

错误和警告

错误和警告就跟一般的日志信息显示的一样,不同之处在于error() and warn() 通过它们的样式来吸引大家注意力。

console.error()

console.error() 方法会显示一个红色图标并伴有红色的信息文字。

function connectToServer() {
    console.error("Error: %s (%i)", "Server is  not responding",500);
}
connectToServer();

输出结果如下:

Error example output

console.warn()

console.warn() 方会显示是黄色图标和黄色的信息文字:

if(a.childNodes.length < 3 ) {
    console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
}

输出结果如下:

Warn example

断言

console.assert() 方法仅仅只当它的第一个参数为 false 时才显示一个错误信息字符串(它的第二个参数)。

一个简单的断言并且如何展示的例子

在下面的代码中,如果在列表中的子节点的数量超过 500,将会在控制台中引起错误信息。

console.assert(list.childNodes.length < 500, "Node count is > 500");

一个失败断言如何在控制台中显示:
Assertion failed

字符串的替换和格式化

任何日志方法的第一个参数可能都会包含一个或者多个格式说明符。一个说明符由一个 % 符号和后面跟着的字符组成,这个字符用来定义用于格式化的值。这个参数跟随的字符串就是占位符中所要显示的。

下面的例子使用了字符串和数字格式来插入要输出的字符串。你将会看到在控制台中 Sam 有 100 个点。

console.log("%s has %d points", "Sam", 100);

完整的格式化说明符如下:

格式符 输出结果
%s 格式化成字符串。
%i or %d 格式化成整型 。
%f 格式化成浮点类型
%o 格式化成一个可扩展的DOM元素。就跟在元素面板中看到的一样。
%O 格式化成一个可扩展的JavaScript
%c 通过第二个参数来申请一个CSS风格的输出字符串。

这个例子使用了数字占位符来格式化document.childNodes.length的值。它也同样使用了浮点类型的占位符来格式化 Date.now().

代码如下:

console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());

输出结果:
Example subsitution output

使用 CSS 样式来更改控制台输出形式

CSS 格式说明符可以修改在控制台中输出的样式。以你要修饰的文字配上占位符开始,然后在第二个参数中写上你要展示的风格。

示例代码:

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

将你的输出结果字体加大变蓝:

Formatted string

将 DOM 元素格式化成 JavaScript 对象

默认情况下,当你想要在控制台中记录一个 DOM 元素,就显示成了HTML格式。但当你想要访问DOM元素的JavaScript对象并检查性能的时候,你可以通过使用%o字符分类符来实现,或者使用console.dir达到相同目的:

Logging an element using dir()

本文由朱怡霏翻译、周海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools — 诊断、打印log

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们