brettz9/console-log.html

## console-log.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="console-log.js"></script>
</head>
<body>
  <script>
  function a () {
    console.log('xyz'); // xyz   (console-log.html:10)
  }
  console.info('abc'); // abc   (console-log.html:12)
  console.log('%cdef', "color:red;"); // (IN RED:) // def   (console-log.html:13)
  a();
  console.warn('uuu'); // uuu   (console-log.html:15)
  console.error('yyy'); // yyy   (console-log.html:16)
  </script>
</body>
</html>

## console-log.js
// See http://stackoverflow.com/questions/13815640/a-proper-wrapper-for-console-log-with-correct-line-number/42860910#42860910
(function () {
  'use strict';
  // Untested in Edge/IE11
  var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
  var isChrome = !!window.chrome && !!window.chrome.webstore;
  var isIE = /*@cc_on!@*/false || !!document.documentMode;
  var isEdge = !isIE && !!window.StyleMedia;
  // var isWebkit = (/WebKit/).test(navigator.userAgent);
  var isPhantom = (/PhantomJS/).test(navigator.userAgent);
  var stackPos = isOpera || isChrome ? 2 : 1;
  var needsThrowing = isIE || isEdge || isPhantom;

  Object.defineProperties(console, ['log', 'info', 'warn', 'error'].reduce(function (props, method) {
    var _consoleMethod = console[method].bind(console);
    props[method] = {
      value: function MyError () {
        var err = new Error();
        if (needsThrowing) { // Older WebKit used by PhantomJS apparently required thrown
          try { // Stack not yet defined until thrown per https://docs.microsoft.com/en-us/scripting/javascript/reference/stack-property-error-javascript
            throw err;
          } catch (e) {
            err = e;
          }
          stackPos = isPhantom ? 1 : 2;
        }

        var args = arguments;
        if (err.stack) {
          var st = err.stack.split('\n')[stackPos]; // We could utilize the whole stack after the 0th index
          var argEnd = args.length - 1;
          [].slice.call(args).reverse().some(function(arg, i) {
            var pos = argEnd - i;
            if (typeof args[pos] !== 'string') {
              return false;
            }
            if (typeof args[0] === 'string' && args[0].indexOf('%') > -1) { pos = 0; } // If formatting
            args[pos] += ' \u00a0 (' + st.slice(0, st.lastIndexOf(':')) // Strip out character count
              .slice(st.lastIndexOf('/') + 1) + ')'; // Leave only path and line (which also avoids ":" changing Safari console formatting)
            return true;
          });
        }
        return _consoleMethod.apply(null, args);
      }
    };
    return props;
  }, {}));
}());
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<script src="console-log.js"></script>
	</head>
	<body>
	<script>
	function a () {
	console.log('xyz'); // xyz (console-log.html:10)
	}
	console.info('abc'); // abc (console-log.html:12)
	console.log('%cdef', "color:red;"); // (IN RED:) // def (console-log.html:13)
	a();
	console.warn('uuu'); // uuu (console-log.html:15)
	console.error('yyy'); // yyy (console-log.html:16)
	</script>
	</body>
	</html>
	// See http://stackoverflow.com/questions/13815640/a-proper-wrapper-for-console-log-with-correct-line-number/42860910#42860910
	(function () {
	'use strict';
	// Untested in Edge/IE11
	var isOpera = !!window.opera \|\| navigator.userAgent.indexOf(' OPR/') >= 0;
	var isChrome = !!window.chrome && !!window.chrome.webstore;
	var isIE = /@cc_on!@/false \|\| !!document.documentMode;
	var isEdge = !isIE && !!window.StyleMedia;
	// var isWebkit = (/WebKit/).test(navigator.userAgent);
	var isPhantom = (/PhantomJS/).test(navigator.userAgent);
	var stackPos = isOpera \|\| isChrome ? 2 : 1;
	var needsThrowing = isIE \|\| isEdge \|\| isPhantom;

	Object.defineProperties(console, ['log', 'info', 'warn', 'error'].reduce(function (props, method) {
	var _consoleMethod = console[method].bind(console);
	props[method] = {
	value: function MyError () {
	var err = new Error();
	if (needsThrowing) { // Older WebKit used by PhantomJS apparently required thrown
	try { // Stack not yet defined until thrown per https://docs.microsoft.com/en-us/scripting/javascript/reference/stack-property-error-javascript
	throw err;
	} catch (e) {
	err = e;
	}
	stackPos = isPhantom ? 1 : 2;
	}

	var args = arguments;
	if (err.stack) {
	var st = err.stack.split('\n')[stackPos]; // We could utilize the whole stack after the 0th index
	var argEnd = args.length - 1;
	[].slice.call(args).reverse().some(function(arg, i) {
	var pos = argEnd - i;
	if (typeof args[pos] !== 'string') {
	return false;
	}
	if (typeof args[0] === 'string' && args[0].indexOf('%') > -1) { pos = 0; } // If formatting
	args[pos] += ' \u00a0 (' + st.slice(0, st.lastIndexOf(':')) // Strip out character count
	.slice(st.lastIndexOf('/') + 1) + ')'; // Leave only path and line (which also avoids ":" changing Safari console formatting)
	return true;
	});
	}
	return _consoleMethod.apply(null, args);
	}
	};
	return props;
	}, {}));
	}());