勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法

  JavaScript

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を指定すること。

 - JavaScript

  関連記事

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法

以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...