To access this functionality, you can implement a decorator for the $log service:

module.config(function logConfig($provide, $logProvider) {
    $provide.decorator('$log', function ($delegate) {
        var originalFunctions = {};

        // Save the original log functions
        angular.forEach($delegate, function (originalFunction, functionName) {
            originalFunctions[functionName] = originalFunction;
        });

        var functionsToDecorate = ['debug', 'warn'];

        // Apply the decorations
        angular.forEach(functionsToDecorate, function (functionName) {
            $delegate[functionName] = logDecorator(originalFunctions[functionName]);
        });

        return $delegate;
    });

    function logDecorator(fn) {
        return function () {

            var args = [].slice.call(arguments);

            // Add a separator between the existing log message(s) and the additional content.
            args.push(' - ');

            // Use the stack trace of an Error to get the current line.
            var stack = (new Error()).stack.split('\n').slice(1);

            // Discard the first item as it is the `$log.fn()` function, 
            // while we need the code that called `$log.fn()`.
            stack.shift();

            // Retain only the top line.
            stack = stack.slice(1, 2);

            // Add it to the args stack.
            args.push(stack);

            // Call the original function with the new args.
            fn.apply(fn, args);
        };
    }
});

I have created this as a modular component, but I think it could also be integrated within the .config() of the application.

While building this (alongside some extra logic), I combined various resources from the internet; although I usually keep track of my references, I forgot to do so when creating this, hence I am unable to provide specific sources. If someone points them out, I will acknowledge them here.

NOTE 1: This code is a simplified version of what I actually use, so ensure you verify the workings of the logDecorator() and its stack manipulation carefully.

NOTE B: According to MDN, Error.prototype.stack is not a standard feature (requires IE10 and may lack support on numerous mobile browsers); thus, considering augmenting it with a library like stacktracejs might be prudent in order to obtain the stack itself.

I have gathered various solutions from this page along with others to create a simple demo in JSFiddle. The demo showcases the use of the $log service and how it can be enhanced with decorators to include line numbers (indicating where the $log call was made). Additionally, I have developed a more detailed solution in Plunker, demonstrating the $log service with added features like displaying line numbers, caller file name, and instance name. I hope this will be beneficial to others.

JSFiddle URL - https://jsfiddle.net/abhatia/6qnz0frh/

This JSFiddle demo has been tested on the following browsers:

• IE 11 - (JSFiddle Javascript's first line number is 72).
• Firefox 46.0.1 - (JSFiddle Javascript's first line number is 72).
• Chrome 50.0.2661.94 m - (JSFiddle Javscript's first line number is 71).

The results are satisfactory. However, please note that the line number may vary by 1 in Chrome compared to FF or IE due to differences in JSFiddle's JavaScript code structure as listed above.

Plunker URL - https://embed.plnkr.co/YcfJ7V/

This Plunker demo illustrates the concept effectively with detailed explanations. It also displays console outputs using Angular's official example of default $log service for comparison. The Plunk has also been cross-tested on the aforementioned browsers.

The screenshot below shows the console output from the Plunker example highlighting 3 key areas:

• A red box indicating console output using the default $log service, with $log functions invoked from the controller.
• A blue box showcasing console output using the extended $log service, revealing script names, line numbers, and controller names used during $log instantiation.
• An orange box contrasting console outputs of default and extended $log services.

https://i.sstatic.net/Ty7gS.jpg

This distinction becomes clearer when reviewing the Plunk's code.

Below is the getLineNumber function utilized in JSFiddle (a slightly improved version is employed in the Plunker example to fetch caller file names):

function getLineNumber(newErr, sliceIndex1, sliceIndex2)
{
  var lineNumber = -1;
  var lineLocation;

  var stack = newErr.stack.split('\n').slice(2);
  if (navigator.userAgent.indexOf("Chrome") > -1) {
    stack.shift();
  }
  stack = stack.slice(sliceIndex1, sliceIndex2);
  var stackInString = stack + '';
  var splitStack;
  if (navigator.userAgent.indexOf("Chrome") > -1) {
    splitStack = stackInString.split(" ");
  }
  else {
    splitStack = stackInString.split("@");
  }
  lineLocation = splitStack[splitStack.length - 1]; 
  //console.log(lineLocation);
  lineNumber = lineLocation.split(":")[2];
  return lineNumber; 
}

The line number is automatically generated by the runtime and cannot be manually set in most cases.

However, all hope is not lost. In situations where the line number is crucially important, you can utilize a different approach. Ensure that you include the $window and then:

$window.console.log("test1");

This method may result in some drawbacks such as loss of formatting and potential variation across different browsers, but it does provide accurate line numbers without the need for specific code tailored to each individual runtime.

Similar to the response from floatingLomas

module.config(function($logProvider, $provide){ 
    $provide.decorator('$log', function ($delegate) {
        $delegate.info = function () {
            var args = [].slice.call(arguments);
            if (window.console && window.console.table)
                console.trace(args[0], args[1]);
            else
                $delegate.log(null, args)
        };
        return $delegate;
    });
})

https://i.sstatic.net/SLWYE.png

Typically, the second @ line is crucial, in this scenario it is 90618

After experimenting with floatingLomas' solution and making some adjustments, I found that it doesn't work quite right on Firefox due to a slightly different stack. Additionally, PhantomJS, like Internet Explorer, does not support Error.stack and crashes when encountered. Interestingly, the log location is clickable in Chrome but not in Firefox.

app.config(function logConfig($provide, $logProvider) {
    $provide.decorator('$log', function ($delegate) {
        var originalFns = {};

        // Storing the original log functions
        angular.forEach($delegate, function (originalFunction, functionName) {
            originalFns[functionName] = originalFunction;
        });

        var functionsToDecorate = ['debug', 'warn'];

        // Applying the decorations
        angular.forEach(functionsToDecorate, function (functionName) {
            $delegate[functionName] = logDecorator(originalFns[functionName]);
        });

        return $delegate;
    });

function logDecorator(fn) {
    return function () {

        var args = [].slice.call(arguments);

        // Adding a separator between existing log messages and additional information.
        args.push(' - ');

        // Using the stack of (instance of Error) to retrieve the current line.
        var newErr = new Error();

        // Skipping phantomjs as it does not support Error.stack
        if (typeof newErr.stack !== 'undefined') {
            var stack = newErr.stack.split('\n').slice(1);

            if (navigator.userAgent.indexOf("Chrome") > -1) {
                stack.shift();
            }
            stack = stack.slice(0, 1);

            var stackInString = stack + '';
            var splitStack;
            if (navigator.userAgent.indexOf("Chrome") > -1) {
                splitStack = stackInString.split(" ");
            } else {
                splitStack = stackInString.split("@");
            }
            var lineLocation = splitStack[splitStack.length - 1];
            // Adding it to the args stack.
            args.push(lineLocation);

            // Calling the original function with the new arguments.
            fn.apply(fn, args);
        }
    };
}

My browser of choice is Chrome version 65.0.3325.181

Here's what I do:

1. Go to the menu, then settings -> blackboxing
2. Make sure to check the option for blackbox content scripts
3. Add the blockbox pattern for angular.js

https://i.sstatic.net/toqnk.png