Question

当我使用angular $ log服务时，控制台中的所有行都显示为对angular.js的引用：5687而不是我调用$ log.log函数的行。

如何获得对我称为$ 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

Answer 1

由于我假设您仅在开发中进行日志记录，并且与大多数开发人员一样，您正在使用Chrome进行开发，因此可以将属性添加到全局范围，如下所示：

通过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指出我正确的方向。

[注意] 此解决方案仅适用于 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工具控制台中，我不知道如何覆盖右侧给出的链接。我找了关于那个的文档，但我没有找到任何东西。如果你知道，如果你发现它会更加整洁，请告诉我。

需要引用$ log.log调用行号

2 个答案: