JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法
JavaScriptにて何らかの確認の際にconsole.logを使うことが多い。ただ、これを本番環境で出しっぱなしという訳にもいかないので、テスト・本番環境によってコメントアウトする必要が出てくるがこれが面倒くさい。「loglevel」ライブラリを使うことで解決できる模様。以下に利用方法をメモ。
loglevel
GitHub
https://github.com/pimterry/loglevel
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/loglevel/1.9.1/loglevel.min.js"></script>
異なるバージョンを使用したい場合は以下から探す。
https://cdnjs.com/libraries/loglevel
利用方法
ソースコード
<script src="https://cdnjs.cloudflare.com/ajax/libs/loglevel/1.9.1/loglevel.min.js"></script>
<script>
log.setLevel('debug');
const msg = 'ログメッセージ';
log.trace(msg);
log.debug(msg);
log.info(msg);
log.warn(msg);
log.error(msg);
</script>
ログレベルの指定
log.setLevel()に引数でログレベルを指定することで、指定したレベル以下のものを出力できる。
上記ソースコードの場合だと、ログレベルがdebug以下(debug / info / warn / error)のものがコンソールログに出力される。
テスト環境の場合はログレベルをdebugに、本番環境の場合はerrorに指定することで出し分けが可能。
尚、errorすらも出力したくない場合はsilentを指定すること。
関連記事
-
-
PHPでvar_dumpをツールバー形式で表示するライブラリ「Kint」の使い方
PHPでvar_dumpを見やすくするためにdBugライブラリを利用しているが、 ...
-
-
PHPにて「hashids(Sqids)」ライブラリで数値からユニークなランダム英数字のIDに変換する方法
PHPにてユーザID等を推測されないよう数値のIDからユニークなランダム英数字の ...
-
-
簡単にスケルトンローディングを実装できる「phantom-ui」ライブラリの使用方法
あるサイトでページを読み込んだ際、最初は各レイアウトの枠組み的な部分を表示、次に ...
-
-
JavaScriptで配列やオブジェクトの中身をブラウザに表示する方法
JavaScriptで配列やオブジェクトの中身を確認したい場合、console. ...
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...