JavaScriptをデバッグする際にちょこっとログ出力したくなり、シンプルにコンソールやHTML内にタイムスタンプをつけて出力したいと思ったので作成してみました。
JavaScriptとスタイルシートの勉強もかねています。(^^ゞ
下記、二つのファイルを記載しています。
- GakuzoDebugger.js - ライブラリ本体
- GakuzoDebugger.html - ライブラリの説明、および、サンプル用HTML
GakuzoDebugger.js
/**
*
* 【 Gakuzo Debugger - JavaScriptデバッグ用ライブラリ 】
*
* このライブラリはJavaScriptをデバッグしやすくするために作成しました。
* ソースコードからデバッグ用関数部分を検索・削除しやすいように関数名の接頭辞に"gz"を
* つける命名規則にしています。
*
* 詳細は、GakuzoDebugger.htmlをご参照ください。
*
* @Author : Gakuzo
* @Release : 2016/03/13
* @Version : 1.0
*
*/
/**
* デバッグモードフラグ(グローバル変数)
*/
var gzDebugMode = true;
/**
* 引数に指定されたメッセージをコンソールと「div id=gzLogBox」要素内の両方に出力します。
*
*/
function gzLog(msg) {
if (gzDebugMode) {
gzLogCon(msg);
gzLogBox(msg);
}
}
/**
* 引数に指定されたメッセージをコンソールに出力します。
*
*/
function gzLogCon(msg) {
if (gzDebugMode) {
console.log(gzGetTimeString(msg));
}
}
/**
* 引数に指定されたメッセージを「div id=gzLogBox」要素内に出力します。
*
*/
function gzLogBox(msg) {
if (gzDebugMode != false && document.getElementById("gzLogBox") != null) {
var strBox = document.getElementById("gzLogBox").innerHTML;
strBox = strBox.substring(0, 500);
document.getElementById("gzLogBox").innerHTML = gzGetTimeString(msg)
+ "<br>" + strBox;
}
}
/**
* デバッグモードを指定します。
*
*/
function gzSetDebugMode(mode) {
if (mode == true) {
gzDebugMode = true;
gzLog("gzDebugMode=true!");
} else {
gzLog("gzDebugMode=false!");
gzDebugMode = false;
}
}
/**
* ログ出力時のタイムスタンプ文字列を作成し返します。
*
*/
function gzGetTimeString(msg) {
var date = new Date();
strTime = "[gzLog:";
strTime = strTime + ('0' + date.getHours()).slice(-2);
strTime = strTime + ":" + ('0' + date.getMinutes()).slice(-2);
strTime = strTime + ":" + ('0' + date.getSeconds()).slice(-2);
strTime = strTime + "." + ('00' + date.getMilliseconds()).slice(-3);
strTime = strTime + "] " + msg;
return strTime;
}
GakuzoDebugger.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gakuzo JavaScript Debugger</title>
<script type="text/javascript" src="./GakuzoDebugger.js"></script>
<script type="text/javascript">
function test() {
gzLog();
gzLogCon();
gzLogBox();
gzLog(null);
gzLogCon(null);
gzLogBox(null);
gzLog("");
gzLogCon("");
gzLogBox("");
}
</script>
<style type="text/css">
<!--
body {
font-family: "メイリオ";
}
span.box {
border-style: solid;
border-color: #00cc00;
padding: 8px;
}
div.logbox {
height: 350px;
font-size: small;
border-width: 1px;
border-style: dotted;
border-color: #0000cc;
padding: 8px;
}
pre.code {
width: 80%;
color: lime;
background-color: navy;
font-size: small;
border-width: 1px;
border-style: dotted;
border-color: black;
padding: 8px;
margin: 8px 8px 8px 16px;
}
div.section {
margin: 32px 0px 32px 0px;
}
li.item {
margin: 16px 0px 16px 0px;
}
table {
margin: 8px;
border-style: solid;
border-width: 1px;
}
td {
border-style: solid;
border-width: 1px;
padding: 8px;
}
-->
</style>
</head>
<body>
<h1>Gakuzo JavaScript Debugger</h1>
<h3>＜使用方法＞</h3>
<h4>1) JavaScriptの呼び出し</h4>
<div class="section">
外部JavaScriptを呼び出すタグをhead部内に配置してください。
hogehogeの文字部分をファイルが参照できるパスに置き換えてください。
<pre class="code">
<head>
<script type="text/javascript" src="hogehoge/GakuzoDebugger.js"></script>
</head></pre>
</div>
<h4>2) divタグの配置 (オプション)</h4>
<div class="section">
HTMLページ上にログを出力する場合、divタグをページ内に配置してください。id属性にgzLogBoxを指定してください。
<pre class="code">
<div id="gzLogBox"></div></pre>
</div>
<h4>3) 関数</h4>
<div class="section">
<table>
<tr>
<td>gzLog(msg)</td>
<td>msgをコンソール、および、HTMLページ内の「<div
id="gzLogBox">」要素に書き出します。</td>
</tr>
<tr>
<td>gzLogCon(msg)</td>
<td>msgをコンソールに書き出します。</td>
</tr>
<tr>
<td>gzLogBox(msg)</td>
<td>msgをHTMLページ内の「<div
id="gzLogBox">」要素に書き出します。(※最大500文字まで表示します。)</td>
</tr>
<tr>
<td>gzSetDebugMode(mode)</td>
<td>デバッグモードmodeを指定します。<br>true:ログを出力します。<br>false:ログを出力しません。
</td>
</tr>
</table>
</div>
<div class="section">
<h4>Q.ブラウザのコンソールウィンドウを表示するには？</h4>
<ol>
<li class="item">Google Chrome<br> デベロッパーモード <br>
[CTRL]+[Shift]+[I]
</li>
<li class="item">IE<br> 開発者モード <br>[F12]
</li>
</ol>
</div>
<div class="section">
<h3>＜HTMLサンプル＞</h3>
※以下、ソースコードをご確認ください。<br> <br>
<div>aとbの四角の上にマウスカーソルをポイントしてみてください。</div>
<div>デバッグモードをボタンで切り替えると、ログ出力のon/offが切り替わります。</div>
</div>
<div class="section">
<span class="box"
onMouseOver="gzLog('aの上にいます。');gzLogBox('aの上にいます。');">a</span> <span
class="box" onMouseOver="gzLog('bの上にいます。');gzLogBox('bの上にいます。');">b</span>
</div>
<div class="section">
<input type="button" onclick="gzSetDebugMode(true)"
value="Debug mode = true"> <input type="button"
onclick="gzSetDebugMode(false)" value="Debug mode = false">
</div>
<h3>＜サンプルログBOX＞</h3>
<div class="logbox" id="gzLogBox"></div>
<h3>＜関数動作確認用＞</h3>
<div class="section">
関数の動作確認用ボタンです。エラーが出なければOK!<br> <input type="button"
onclick="test()" value="動作テスト用">
</div>
</body>
</html>