試験管のなかのコード

JavaScript 用デバッグコンソール

JavaScript 用のデバッグコンソールを作成してみた。 alert() を使用すると、誤って無限ループに陥った際に Web ブラウザを強制終了せざる得なくなることがある。 それを防ぐため & もう少し使いやすいインタフェースを用意するために DebugConsole クラスを作成した。

DebugConsole

HTML 内で適当に読み込んで呼び出すと、Web ブラウザのウィンドウ右上にデバッグコンソールが開く。 後は debug メソッドで適当に確認したいメッセージをデバッグコンソールに書き出すだけ。

/*******************************************************************************
 *
 *  DebugConsole
 *    copyright(c) 2006 in-vitro.jp, all rights reserved.
 *
 *
 *  REQUIRED
 *    +MS Windows XP
 *    +Internet Explorer 6
 *
 *  USAGE(1) - SIMPLE
 *    var debugConsole = new DebugConsole();
 *    debugConsole.open();
 *    debugConsole.debug("this is a debug message");
 *    debugConsole.close();
 *
 *  USAGE(2) - with initializer
 *    function myInitializer(debugConsole) {
 *      debugConsole.style.backgroundColor = "#ffffff";
 *      debugConsole.style.border = "1ps solid #000000";
 *      return "this is a header";
 *    }
 *    var debugConsole = new DebugConsole(myInitializer);
 *    debugConsole.open();
 *    debugConsole.debug("this is a debug message");
 *    debugConsole.close();
 *
 *  LICENSE
 *    Creative Commons Attribution-ShareAlike 2.1
 *    @see http://creativecommons.org/licenses/by-sa/2.1/jp/
 *
 *******************************************************************************/

/**
 * Construct DebugConsole
 *
 * @param initializer ［optional］ function which initialize DebugConsole.
 */
function DebugConsole(initializer) {
  document.getElementsByTagName('body')[0].innerHTML += "<div id=\"debugConsole\"></div>";
  this.debugConsole = document.getElementById('debugConsole');

  if(initializer == undefined || initializer == null) {
    this.header = DebugConsole_initializer(this.debugConsole);
  } else {
    this.header = initializer(this.debugConsole);
  }

  this.debugConsole.style.position = "absolute";
  this.debugConsole.style.display = 'none';
  this.debugConsole.style.top = "0px";
  this.debugConsole.style.right = "0px";
}

/* register member functions to DebugConsole */
DebugConsole.prototype.open = DebugConsole_open;
DebugConsole.prototype.close = DebugConsole_close;
DebugConsole.prototype.debug = DebugConsole_debug;
DebugConsole.prototype.clear = DebugConsole_clear;
DebugConsole.prototype.move = DebugConsole_move;
DebugConsole.prototype.moveInternal = DebugConsole_moveInternal;

/**
 * Default DebugConsole Initializer
 */
function DebugConsole_initializer(debugConsole) {
  debugConsole.style.backgroundColor = "#eeeeee";
  debugConsole.style.border = "3px solid #cccccc";
  debugConsole.style.width = "250px";
  debugConsole.style.height = "300px";
  debugConsole.style.padding = "0.5em";
  return "【DEBUG CONSOLE】";
}

/**
 * Open DebugConsole
 */
function DebugConsole_open() {
  // move DebugConsole periodically.
  this.timerId = setInterval(this.move, 1000);
  // show DebugConsole
  this.debugConsole.style.display = 'block';
  this.clear();
}

/**
 * Close DebugConsole
 */
function DebugConsole_close() {
  this.debugConsole.style.display = 'none';
  clearInterval(this.timerId);
}

/**
 * Append message to DebugConsole
 */
function DebugConsole_debug(message) {
  this.debugConsole.innerHTML += message + "<br>";
}

/**
 * Clear DebugConsole
 */
function DebugConsole_clear() {
  if(this.header == undefined || this.header == null) {
    this.debugConsole.innerHTML = "";
  } else {
    this.debugConsole.innerHTML = this.header + "<br>";
  }
}

/**
 * Move DebugConsole to NORTH-EAST corner (INTERNAL USE ONLY)
 */
function DebugConsole_move() {
  this.debugConsole.moveInternal()
}

/**
 * Move DebugConsole to NORTH-EAST corner (INTERNAL USE ONLY)
 */
function DebugConsole_moveInternal() {
  this.debugConsole.style.top = document.body.scrollTop + "px";
  this.debugConsole.style.right = "0px";
}

ダウンロード

余りニーズがあるとも思えないけれど、とりあえず。
debugconsole.js

Posted in Misc | WriteBacks (0) | | | Bookmark this on Delicious