JavaScriptのalertの代わりになる簡易デバッグツール | JavaScript | Web関連

2018/05/11

Category :

JavaScript

Tags :

自作

JavaScriptで独自クラスを作成し簡易的にデバッグをする方法のまとめ。

「Chrome Developer Tools」など世の中には高機能なすばらしいものがありますがスマホなどの実機でUSBケーブルなどがなくてもすぐにデバッグできるalertの代わりになるような（alertではポンポン出てきて煩わしいので）あくまで簡易的なものになります。
レスポンシブサイト作成時などにスマホやタブレットも含めて下記のような値や挙動が正しく行われているかチェックするのに便利。

スクロール位置取得
コンテンツの高さ取得

デバッグモード ON

デバッグモード OFF

まずはメインクラスのKepDebugClass。
（DebugClassでも問題ないと思いますが念のため名前が被らないように接頭語としてKepを付加。）

function KepDebugClass() {

    var t = this;

    $('body').append('<div id = "jsKepDebug"></div>');
    t.jsDebug = $('#jsKepDebug');
    t.debugStr = '';
    t.debugSolidStr = '';

    //cssで見た目・位置調節
    t.jsDebug.({
        position: 'fixed',
        fontSize: 12,
        top: 10,
        left: 10,
        width: 200,
        height: 200,
        background: '#111',
        color: '#fff',
        opacity: 0.6,
        padding: '10px',
        lineHeight: 1.4,
        pointerEvents: 'none',
        zIndex: 10000000
    });

    t.debugExcute = function(s) {
        t.debugStr += '<br>' + s;
        t.jsDebug.html(t.debugSolidStr + t.debugStr);
    }

    t.debugReset = function() {
        t.debugStr = ''
        t.jsDebug.html(t.debugSolidStr + t.debugStr);
    }

    t.debugSolidStrExcute = function(s) {
        t.debugSolidStr += s + '<br>';
        t.jsDebug.html(t.debugSolidStr + t.debugStr);
    }

    t.debugAllReset = function() {
        t.debugStr = ''
        t.debugSolidStr = ''
        t.jsDebug.html(t.debugSolidStr + t.debugStr);
    }

}

ポイント

1行目：

new KepDebugClass();と呼び出すだけで準備OK。
var kd = new KepDebugClass();
10行目：

別ファイルでCSSを用意するのも面倒臭いのでJavaScript内で見た目や位置の調節。
デバッグの下のコンテンツ部分にあるボタンもクリック出来るように忘れずにpointer-events: none;(jQueryでのCSS記述はハイフンが使えないのでpointerEvents: ‘none’になる。)
27行目：

debugExcute(‘出力したい文字や変数’)でalertの代わりに画面上に出力。

下記がKepDebugClassの関数。

debugExcute();: 引数に渡された値を出力。

debugSolidStrExcute(): 引数に渡された値を固定値（上書きされない）として出力。

debugReset(): 出力文字をリセット。

debugAllReset(): 固定値も含めた出力文字をリセット。

下記のような感じで記述。

var kd = new KepDebugClass();
//固定値
kd.debugSolidStrExcute('viewMode : ' + t.viewMode);//t.viewModeは変数でSPかPCか
kd.debugSolidStrExcute('conH : ' + t.conH);//t.conHは変数でコンテンツの高さ

kd.debugReset();//リセット
kd.debugExcute(t.scrollY);
//t.scrollYは変数で現在のスクロール位置（スクロールイベント中などで呼び出す時は一度リセット）

前回の記事（JavaScriptでGET形式のURLパラメーターを取得する方法）を利用してGET形式のパラメータでdebug=trueの時のみデバッグさせるのがベストかと思います。

https://〇〇〇〇.com?debug=true

デバッグが不必要な場合は下記のような感じで記述。

var kpa = new KepParamAnalysisClass();
var debugFlag = false;
if (kpa.getParamVal('debug') == "true") debugFlag = true;
if (debugFlag) kd = new KepDebugClass();
if (debugFlag) kd.debugExcute('出力したい値');

※ソースの流用、改変は自由ですが自己責任とさせていただきます。

トラックバック URL

https://keprate.com/web/javascript/js-debug/trackback/