这是使用$log产生的典型代码:
如果我只使用console.log,我会在控制台中看到我的调用的源代码位置.当使用$log时,我看到他们的日志调用的位置,这对我来说是无用的.
有没有办法获得更有用的结果?
我们完全放弃使用$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.