[解決済み] console.logの適切なラッパーで、正しい行番号のもの?
2022-04-24 21:55:14
質問
現在、アプリケーションを開発中であり、グローバルな
isDebug
スイッチ ラッピングを希望する
console.log
を搭載し、より使いやすくなりました。
//isDebug controls the entire site.
var isDebug = true;
//debug.js
function debug(msg, level){
var Global = this;
if(!(Global.isDebug && Global.console && Global.console.log)){
return;
}
level = level||'info';
Global.console.log(level + ': '+ msg);
}
//main.js
debug('Here is a msg.');
すると、Firefoxのコンソールにこのような結果が表示されます。
info: Here is a msg. debug.js (line 8)
という行番号でログを取りたい場合はどうすればいいのでしょうか?
debug()
が呼ばれるようになります。
info: Here is a msg. main.js (line 2)
?
どのように解決するのですか?
私は、認められた答え(console.log/error/etcへのバインド)と、実際にログに記録されるものをフィルタリングする外部ロジックを組み合わせた簡単な解決策を発見しました。
// or window.log = {...}
var log = {
ASSERT: 1, ERROR: 2, WARN: 3, INFO: 4, DEBUG: 5, VERBOSE: 6,
set level(level) {
if (level >= this.ASSERT) this.a = console.assert.bind(window.console);
else this.a = function() {};
if (level >= this.ERROR) this.e = console.error.bind(window.console);
else this.e = function() {};
if (level >= this.WARN) this.w = console.warn.bind(window.console);
else this.w = function() {};
if (level >= this.INFO) this.i = console.info.bind(window.console);
else this.i = function() {};
if (level >= this.DEBUG) this.d = console.debug.bind(window.console);
else this.d = function() {};
if (level >= this.VERBOSE) this.v = console.log.bind(window.console);
else this.v = function() {};
this.loggingLevel = level;
},
get level() { return this.loggingLevel; }
};
log.level = log.DEBUG;
使用方法
log.e('Error doing the thing!', e); // console.error
log.w('Bonus feature failed to load.'); // console.warn
log.i('Signed in.'); // console.info
log.d('Is this working as expected?'); // console.debug
log.v('Old debug messages, output dominating messages'); // console.log; ignored because `log.level` is set to `DEBUG`
log.a(someVar == 2) // console.assert
-
なお
console.assert
は条件付きロギングを使用しています。 - ブラウザの開発ツールで、すべてのメッセージレベルが表示されることを確認してください
関連
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptでカンマを桁区切りにして数値を表示する方法
-
[解決済み] 特定の行のeslintルールをオフにする
-
[解決済み] JavaScriptで浮動小数点数の精度を扱うには?
-
[解決済み] How do I replace all line breaks in a string with <br /> elements?
-
[解決済み] Angularプロジェクトごとに生成される膨大な数のファイル
-
[解決済み] JavaScriptで小数点以下が2つだけの数値を書式設定する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
Vueの「データを聴く」原則を解説
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
JavaScriptのStringに関する共通メソッド
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方