angularjs – 我可以获取$log来记录我的呼叫的源代码位置,而不是

相反,我们现在只是使用控制台,但有一点点扭曲：

/**
 * @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 );

我们没有像原始的html5样板代码那样覆盖window.console.相反,我们只是创建一个新服务,并在我们想要使用控制台时注入它.

原始答案

我不太确定这是否是我想要解决的问题,但是@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.