logging - $log.log 呼び出し行番号への参照が必要です

Question

angular $log サービスを使用すると、コンソールのすべての行が、$log.log 関数を呼び出した行ではなく、angular.js:5687 への参照とともに表示されます。

$log を呼び出した行への参照を取得するにはどうすればよいですか? また、$log をラップする独自のサービスがあります。$log の代わりにサービスへの呼び出しを参照するにはどうすればよいですか?

たとえば、Logger.js では次のようになります。

 1) angular.module('MyApp').factory('Logger', function($log){
 2)    return { log : function(msg) { $log.log(msg); };
 3) });

そしてSomeCtrl.jsで

 1) angular.module('MyApp').controller('SomeCtrl', function($scope, $log, Logger) {
 ...
10) $log.log('Hi from $log');     // reference to SomeCtrl.js:10
 ...
25) Logger.log('Hi from Logger'); // reference to SomeCtrl.js:25

score 1 · Accepted Answer

私を正しい方向に向けてくれた@Langdonの功績。

[注]このソリューションはChromeでのみ機能します。詳細については、次を参照してください。

私が実装した回避策は次のとおりです。

Object.defineProperty(window, '__stack', {
  get : function() {
     var orig = Error.prepareStackTrace;
     Error.prepareStackTrace = function(_, stack) {
        return stack;
     };
     var err = new Error;
     Error.captureStackTrace(err, arguments.callee);
     var stack = err.stack;
     Error.prepareStackTrace = orig;
     return stack;
  }
});

Logger.log = function(msg) {
  var stack = __stack;
  var link = stack[1].getFileName() + ':' + stack[1].getLineNumber();
  console.groupCollapsed("%c" + msg, "font-weight: normal;");
  $log.log(link); // or console.log(link) if you're not using angular.
  console.groupEnd();
};

[注] chrome dev tools コンソールで、右側にあるリンクを上書きする方法がわかりません。それに関するドキュメントを探しましたが、何も見つかりませんでした。これがもっときれいに見えるので、わかったら教えてください。

logging - $log.log 呼び出し行番号への参照が必要です

2 に答える 2

Related

Reference