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を指定すること。
関連記事
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...
-
-
JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方
あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び ...
-
-
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法
先日バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装でき ...
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...