调试手艺

调试代码的平常要领就是让浏览器输出调试信息。罕见的体式格局是把调试信息记录到掌握台,然则这涉及到浏览器的差异性。最症结的是,在终究宣布网页之前,这些调试代码必需都删除。
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
    原文地址: https://segmentfault.com/a/1190000007338305
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞