echo.js

var b = 20;
function foo () {
  var a = 10;

  console.log('hello $a+$b=30'.replace(/\$\w+/g, function (el) {
    return eval(el.substr(1))
  }))
}

foo()

function echo (input) {
  return `console.log(${JSON.stringify(input)}.replace(/\\$\\w+/g, function (el) {
    return eval(el.substr(1))
  }))`
}

var b = 20;
function foo () {
  var a = 10;

  eval(echo('hello $a+$b=30'))
}

foo()

@blainesch
I thought on this quite a bit last night and decided to attempt a different approach..

echo  = function() { /* noop */ }
debug = {}

Object.defineProperty(debug, 'fn', {
  get: function() {
    const toLog = (full, matchedTemplateStr, offset) => {
      const wrapWithConsoleLog  = (line)      => ("console.log('" + line + "')")
      const wrapAsVariableInStr = (variable)  => ("'+" + variable + "+'")
      const normalizeDollarVar  = (dollarVar) => (Array.from(dollarVar).splice(1).toString())
      const replaceDollarVar = (full, matchedDollarVar, offset) => (
        wrapAsVariableInStr( normalizeDollarVar(matchedDollarVar) )
      )
      line = matchedTemplateStr.replace(/(\$[^\W]+)/g, replaceDollarVar)
      line = wrapWithConsoleLog(line)
      return line
    }
    let fn = arguments.callee.caller.toString()
    fn = fn.replace(/return debug\.fn/g, '')
    fn = fn.replace(/echo`(.*)`/g, toLog)
    eval('var ___fn = '+fn)
    return ___fn()
  }
})

var b = 20

function foo () {
  return debug.fn

  var a = 10

  echo`hello $a+$b=30`

  return 5
}

// Show that we can get a result back from the function still
var result = foo()

// Log the return value from the function call
console.log(result)

Use return debug.fn at the beginning of any function you would like to debug inside.
Wherever you use echo to inspect inside that function should work now because we replace it.

This works by using arguments.callee.caller to get all the code of the function, that the current function was called inside of.
This program alters the original functions code and runs the altered version of the function respecting return values.

Some problems I can see are:

• Make the regex better to include $this.something for matching.
• Make it work to carry this over to the newly executing function.
• Regex replacements should take into account possible ; at end of code lines.
• In strict mode arguments.callee.caller is not available so I have written an alternative...

echo  = function() { /* noop */ }

debug = {
  fn: function(prevFn) {
      const toLog = (full, matchedTemplateStr, offset) => {
      const wrapWithConsoleLog  = (line)      => ("console.log('" + line + "')")
      const wrapAsVariableInStr = (variable)  => ("'+" + variable + "+'")
      const normalizeDollarVar  = (dollarVar) => (Array.from(dollarVar).splice(1).toString())
      const replaceDollarVar = (full, matchedDollarVar, offset) => (
        wrapAsVariableInStr( normalizeDollarVar(matchedDollarVar) )
      )
      line = matchedTemplateStr.replace(/(\$[^\W]+)/g, replaceDollarVar)
      line = wrapWithConsoleLog(line)
      return line
    }
    let fn = prevFn.toString()
    fn = fn.replace(/return debug\.fn\.bind\(this, foo\)\(\)/g, '')
    fn = fn.replace(/echo`(.*)`/g, toLog)
    eval(`var ___fn = ${fn}.bind(this)`)
    return ___fn()
  }
}

var b = 20

function foo () {
  return debug.fn.bind(this, foo)()
  var a = 10

  echo`hello $a+$b=30`
  return 5
}

var result = foo()

console.log(result)