关于JavaScript console的使用

使用console.log()进行基本日志记录
使用console.erroe()和console.warn()获取醒目的内容
使用console.group()和console.groupEnd()来分组相关消息，避免混乱
使用console.assert()显示条件语句错误消息

1.console.log(“Node count:”, a.childNodes.length, “and the current time is:”, Date.now()); 分空格打印多行 console.error();console.warn();
2. 使用console.group()命令，通过传递一个字符串参数来设置分组的名称。在JavaScript中调用它之后，控制台会将所有后续输出组合在一起。要结束分组，只需调用console.groupEnd()。
仅当属于列表元素的子节点的数量大于（等于）500时，将在控制台中触发一个错误消息。
console.assert(list.childNodes.length < 500, “Node count is > 500”);

使用console.time()和console.timeEnd()测量代码两个执行点之间所需的时间。

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

如何检查堆栈跟踪以找到错误源

让我们看看如何使用刚才学到的工具，并找出错误的真正原因。这里有一个简单的HTML页面，其中包含两个脚本：

在这里插入图片描述

当用户点击页面时，段落（**<.p .>**标签）内的文本将被改变，并调用lib.js提供的callLibMethod()函数。

此函数打印一个console.log，然后调用console.slog，一个不是由Console API提供的方法。这应该会触发一个错误。
当页面运行并点击它时，会触发这个错误：
在这里插入图片描述
单击箭头可以展开错误消息：

控制台告诉您，错误是在lib.js第4行中触发的，它又是由script.js第3行中addEventListener回调的一个匿名函数触发。

这是一个非常简单的例子，但不管多复杂的调试都遵循相同的过程。

Chrome公开了window.onerror的处理函数，每当在JavaScript代码执行中发生错误时调用。每当 JavaScript 抛出的异常在window上下文中，并且没有被try / catch捕获时，该函数被调用，异常消息（message），抛出异常的文件URL（url）和行号（line），作为三个参数依次传递。

window.onerror=function(message,url.line){
console.log();
}

最后推荐一个chrome开发者选项使用的指南：http://www.css88.com/doc/chrome-devtools/

关于JavaScript console的使用

猜你喜欢