需要引用$ log.log調用行號

Question

當我使用角度$ log服務時，控制檯中的所有行顯示引用angular.js：5687而不是我稱爲$ 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 

Answer 1

因爲我假設你只記錄在發展，像大多數開發商，您正在Chrome中開發，您可以將屬性添加到全局範圍，如下所示：

vi一個Accessing line number in V8 JavaScript (Chrome & Node.js)

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; 
    } 
}); 

Object.defineProperty(window, '__line', { 
    get: function(){ 
    return __stack[1].getLineNumber(); 
    } 
}); 

console.log(__line); 

現在你可以在你的代碼中使用__line任何地方。

編輯：它看起來不像你可以從調用堆棧中獲得文件名。如果你正在編寫的JavaScript乾淨，每個文件應該有自己的範圍，你可以定義var filename = 'test.js';，所以你可能看起來像：

定義全球某處：

Object.defineProperty(window, '__prevLine', { 
    get: function() { 
     console.log('__line', __stack); 
     return __stack[2].getLineNumber(); 
    } 
}); 

function log(s) { 
    console.log(s, __prevLine) 
} 

以及實現：

(function() { 
    var _scriptName = 'test.js'; 

    // ... lots of code 

    log('something happened', _scriptName); 
}()); 

以下是一個演示的想法小提琴：

http://jsfiddle.net/langdonx/zJJ8r/

Answer 2

感謝@Langdon指引我朝着正確的方向前進。

[注]該解決方案將只在鉻工作。欲瞭解更多信息看：

• https://code.google.com/p/v8/wiki/JavaScriptStackTraceApi
• https://developers.google.com/chrome-developer-tools/docs/console
• https://developers.google.com/chrome-developer-tools/docs/console-api

下面是我實現的解決辦法：

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瀏覽器開發工具控制檯I不知道如何覆蓋右側給出的鏈接。我查找了關於這方面的文檔，但是我沒有找到任何東西。請讓我知道，如果你知道，因爲這看起來更整潔。