我可以获取$ 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。

原答案

我不太确定这是否是我想要解决的问题，但@BenjaminGruenbaum 建议只使用装饰器并改变$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中。