KEPRATE(ケプレイト)|大阪府枚方市・交野市・寝屋川市を中心に活動しているフリーランスWeb制作事務所 WordPress・レスポンシブ対応ならおまかせ!

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

2018/05/11
Category :
  1. JavaScript
Tags :
  1. 自作

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

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

まずはメインクラスの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. 1行目:
    new KepDebugClass();と呼び出すだけで準備OK。
    var kd = new KepDebugClass();
  2. 10行目:
    別ファイルでCSSを用意するのも面倒臭いのでJavaScript内で見た目や位置の調節。
    デバッグの下のコンテンツ部分にあるボタンもクリック出来るように忘れずにpointer-events: none;(jQueryでのCSS記述はハイフンが使えないのでpointerEvents: ‘none’になる。)
  3. 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('出力したい値');
  1. ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/javascript/js-debug/trackback/
奇跡的に興味を持たれた方は
是非お問い合わせください。
  • 電話番号の掛け間違いにお気をつけください。
  • 女性は業務に一切関係ございません。
PAGE TOP