首页 » JavaScript » console

console

IE8、Firefox、Chrome和Safari都有JavaScript控制台,可以用来查看JavaScript错误。而且,在这些浏览器中,都可以通过代码向控制台输出消息。对Firefox而言,需要安装firebug(www.firebug.com),因为Firefox要使用Firebug的控制台。对IE8、Firefox、Chrome和Safari来说,则可以通过console对象向JavaScript控制台中写入消息,这个对象具有下列方法。

  • error(message):将错误消息记录到控制台
  • info(message):将信息性消息记录到控制台
  • log(message):将一般消息记录到控制台
  • warn(message):将警告消息记录到控制台

在IE8、Firebug、Chrome和Safari中,用来记录消息的方法不同,控制台中显示的错误消息也不一样。错误消息带有红色图标,而警告消息带有黄色图标。以下函数展示了使用控制台输出消息的一个实例:

function sum(num1, num2) {
    console.log("Entering sum(), arguments are " + num1 + "," + num2);
    console.log("Before calculation");
    var result = num1 + num2;
    console.log("After calculation");
    console.log("Exiting sum()");
    return result;
}
var result = sum(10, 23);

在调用这个sum()函数时,控制台中会出现一些消息,可以用来辅助调试。

将消息记录到当前页面

另一种输出调试消息的方式,就是在页面中开辟一小块区域,用以显示消息。这个区域通常是一个元素,而该元素可以总是出现在页面中,但仅用于调试的目的;也可以是一个根据需要动态创建的元素。例如,可以将log()函数修改为如下所示:

function log(message) {
    var console = document.getElementById("debuginfo");
    if (console === null){
        console = document.createElement("div");
        console.id = "debuginfo";
        console.style.background = "#dedede";
        console.style.border = "1px solid silver";
        console.style.padding = "5px";
        console.style.width = "400px";
        console.style.position = "absolute";
        console.style.right = "0px";
        console.style.top = "0px";
        document.body.appendChild(console);
    }
    console.innerHTML += "<p>" + message + "</p>";
}
function sum(num1, num2){
    log("Entering sum(), arguments are " + num1 + "," + num2);

    log("Before calculation");
    var result = num1 + num2;
    log("After calculation");

    log("Exiting sum()");
    return result;
}

var result = sum(10, 23);

这个修改后的log()函数首先检测是否已经存在调试元素,如果没有则会新创建一个<div>元素,并为元素应用一些样式,以便与页面中的其它元素区别开。然后,有使用innerHTML将消息写入到这个<div>元素中。结果就是页面中会有一小块区域显示错误消息。这种技术在不支持JavaScript控制台的IE7及更早版本或其它浏览器中十分有用。

与把错误消息记录到控制台相似,把错误消息输出到页面的代码也要在发布前删除。

此文章发表在 JavaScript. 将 固定链接 加入收藏.