调试代码的一般方法就是让浏览器输出调试信息。常见的方式是把调试信息记录到控制台,但是这涉及到浏览器的差异性。最关键的是,在最终发布网页之前,这些调试代码必须都删除。
1)对 IE8、 Firefox、 Chrome 和 Safari 来说,则可以通过 console 对象向 JavaScript 控制台中写入消息,这个对象具有下列方法。这些方法适用于绝大多数调试。
 error(message):将错误消息记录到控制台
 info(message):将信息性消息记录到控制台
 log(message):将一般消息记录到控制台
 warn(message):将警告消息记录到控制台
2)Opera 10.5 之前的版本中, JavaScript 控制台可以通过 opera.postError()方法来访问。这个方法接受一个参数,即要写入到控制台中的参数,其用法如下。

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

3)Firefox、 Safari 和 Opera都支持 LiveConnect,因此可以操作 Java 控制台。例如,通过下列代码就可以在 JavaScript 中把消息写入到 Java 控制台。Java 控制台需要手动打开。
java.lang.System.out.println("Your message");

不存在一种跨浏览器向 JavaScript 控制台写入消息的机制,但下面的函数倒可以作为统一的接口。

function log(message) {
  if (typeof console == 'object') {
    console.log(message);
  } else if (typeof opera == 'object') {
    opera.postError(message);
  } else if (typeof java == 'object' && typeof java.lang == 'object') {
    java.lang.System.out.println(message);
  }
}

4)不支持 JavaScript 控制台的 IE7 及更早版本或其他浏览器中,可以使用另一种输出调试消息的方式,就是在页面中开辟一小块区域,用以显示消息。这个区域通常是一个元素,而该元素可以总是出现在页面中,但仅用于调试目的;也可以是一个根据需要动态创建的元素。
例如,可以将 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>';
}

这个修改后的 log()函数首先检测是否已经存在调试元素,如果没有则会新创建一个<div>元素,并为该元素应用一些样式,以便与页面中的其他元素区别开。然后,又使用 innerHTML 将消息写入到这个<div>元素中。结果就是页面中会有一小块区域显示错误消息。


zhangding
358 声望23 粉丝

JavaScript+React+Redux