Skip to content

Instantly share code, notes, and snippets.

@bayleedev
Created Jun 10, 2017
Embed
What would you like to do?
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()
@bayleedev

This comment has been minimized.

Copy link
Owner Author

@bayleedev bayleedev commented Jun 10, 2017

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()
@afaur

This comment has been minimized.

Copy link

@afaur afaur commented Jun 10, 2017

@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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment