FrontDebugger

テスト用に入れた console.log をあとで全部消すのってめんどうですよね。
本番反映後も動きを確認したかったり何かあったときの調査のために console.log はそのままの方が何かと便利...という場面もあると思います。
このライブラリを使えば、テスト環境のときにだけ表示される console.log を簡単に用意することができます。

テスト環境の判定は自分で調整できるので、開発用のURLで判定したり、特定のパラメータがある時をテストモードと判定することができます。
また、スマホでのテストやエンジニア以外が見ることも考慮してフロント側にもログを表示する機能があります。

DEMO

デフォルトではURLに mode=test があるときだけコンソールと画面にデバッグ文言が表示されます。
テスト環境の判定は好きに変更ができます。

何も表示されない

https://yuki-sakaguchi.github.io/FrontDebugger/example/

デバッグが表示される

https://yuki-sakaguchi.github.io/FrontDebugger/example/?mode=test

導入

CDN

<script src="https://unpkg.com/front-debugger@latest/lib/front-debugger.min.js"></script>

npm install

npm install front-debugger

使い方

FrontDebugger というクラスが使えるようになるので、インスタンスを生成して console.log の代わりに log() メソッドを使うだけです。 使用感は console.log と全く変わりません。
このメソッドを使うと開発中判定の時だけコンソールと画面上にログが表示されます。

インスタンス生成時にオプションを設定できるので、画面上の表示はさせないようにしたり、開発中判定処理をカスタマイズすることができます。
デフォルトではURLに mode=test というパラメータがある時だけ開発中判定になります。

import FrontDebugger from 'front-debugger';

const fd = new FrontDebugger();
fd.log('テストモードの時にだけ表示されるログ');

オプション

const fd = new FrontDebugger({
  test: () => location.search.indexOf('mode=test') >= 0,
  isFront: true,
  isBackground: true,
  prefix: '[test log]',
  displayedTime: 2000,
  parent: 'body',
  className: 'front-debugger',
});

test: () => boolean

テストモードかどうかを判定する処理
デフォルトでは location.search.indexOf('mode=test') >= 0

isFront: boolean

フロント側にログを表示するかどうかのフラグ
デフォルトは true

isBackground: boolean

デベロッパーツールのコンソールにログを表示するかのフラグ
デフォルトは true

prefix: string

デベロッパーツールのコンソールにログを表示する際に付与される接頭語
デフォルトでは [test log]
空にすれば無視されます

displayedTime: number

フロント側にログを表示する場合のログの表示時間
単位は ms　　 デフォルトでは 2000

parent: string

フロント側にログを表示する場合、表示用に生成されるDOMを配置するセレクター
デフォルトでは body

className: string

フロント側にログを表示する場合に生成されるDOMに付与するクラス名
デフォルトでは front-debugger