angularjs - 我可以获得 $log 来记录我的调用的源代码位置，而不是他们的吗？

Question

这是使用 $log 的典型结果:



如果我只使用 console.log ，我会在控制台中看到我的调用的源代码位置。使用 $log 时，我看到他们的日志调用的位置，这对我来说没用。

有什么方法可以获得更有用的结果吗？

Answer 1

我们刚刚放弃使用 $log完全地。它确实没有提供我们可以看到的任何好处。

相反，我们现在只是使用 console ，但有一个小转折:

/**
 * @see https://github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
 */

var method;

var methods = [
    "assert", "clear", "count", "debug", "dir", "dirxml", "error",
    "exception", "group", "groupCollapsed", "groupEnd", "info", "log",
    "markTimeline", "profile", "profileEnd", "table", "time", "timeEnd",
    "timeStamp", "trace", "warn"
];
var methodsLength  = methods.length;
var console = ( window.console || {} );

while( methodsLength-- ) {
    method = methods[ methodsLength ];

    // Only stub undefined methods.
    if( !console[ method ] ) {
        console[ method ] = Function.prototype;
    }
}

angular
    .module( "util" )
    .constant( "console", console );

我们没有覆盖 window.console就像原始的 html5 样板代码一样。相反，我们只是创建了一个新服务，并在我们想使用 console 时注入(inject)它。 .

原始答案

我不太确定这是否是我想要解决的问题，但@BenjaminGruenbaum 建议只使用 decorators并更改方式 $log作品。

这就是它的样子。 Chrome 显然甚至可以识别该模式，我可以直接点击到源代码位置。



所以这是我的概念验证代码:

var app = angular.module( "myApp", []);

app.config( function( $provide ) {
  $provide.decorator( "$log", function( $delegate ) {
    var originalLog = $delegate.log;
    $delegate.log = function() {
      var stack = new Error().stack;
      var location = analyzeStack( stack, 1 );
      [].push.call( arguments, location );
      originalLog.apply( this, arguments );
    };
    return $delegate;
  } );
} );

app.controller( "ApplicationController", function( $log ) {
  $log.log( "Hello World" );
} );

/**
 * Take a stack trace and extract a location identifier from it.
 * The location identifier represents the location from where the logger was invoked.
 * @param {String} stack The traced stack
 * @param {Number} [stackIndex=2] The element of the stack you want analyzed.
 * @returns {String} A location identifier for the location from where the logger was invoked.
 */
function analyzeStack( stack, stackIndex ) {
    stackIndex = stackIndex || 2;

    /**
     * Group 1: Function name (optional)
     * Group 2: File name
     * Group 3: Line
     * Group 4: Column
     */
    var callSitePattern = new RegExp( /at (?:(.*) )?\(?(.*):(\d+):(\d+)\)?/g );
    var sites = stack.match( callSitePattern );

    // The method that invoked the logger is located at index 2 of the stack
    if( sites && stackIndex <= sites.length ) {
        var callSiteElementPattern = new RegExp( /at (?:(.*) )?\(?(.*):(\d+):(\d+)\)?/ );
        // Pick apart
        var callSiteElements = sites[ stackIndex ].match( callSiteElementPattern );
        var functionName, fileName, line, column;
        // Assume either 4 (no function name) or 5 elements.
        if( callSiteElements.length == 5 ) {
            functionName = callSiteElements[ 1 ];
            fileName = callSiteElements[ 2 ];
            line = callSiteElements[ 3 ];
            column = callSiteElements[ 4 ];
        } else {
            functionName = "(unnamed)";
            fileName = callSiteElements[ 1 ];
            line = callSiteElements[ 2 ];
            column = callSiteElements[ 3 ];
        }

        return functionName + "@" + fileName + ":" + line + ":" + column;
    }
    return null;
};

我也把它放到了 plunkr .