Adding depth parameter to console.log for recursion

I'm trying to debug a recursive function, and it would be nice if I could keep track of the depth. I attempted to write a version of console.log that took a depth parameter and prepended a corresponding number of spaces to the log, but it doesn't quite work right. The biggest problem is that jquery objects are displayed differently when run through the Chrome debugger. Ideally the dlog function would be identical to console.log except for prepending n spaces, where n = depth * 2.

<!-- nested divs -->
<style>
  .node {margin-left:20px}
</style>

<div class = 'container'>
  <div class='node'><span class='text'>1</span>
    <div class='node'><span class='text'>2</span>
      <div class='node'><span class='text'>3</span>
      </div>
    </div>
  </div>
</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>

// Log with depth
function dlog() {
  var depth = arguments[arguments.length - 1]
  var real_args = 开发者_C百科[]
  for(var i = 0; i < arguments.length - 1; i++)
    real_args.push(arguments[i])
  var ds = ''
  for(var i = 0; i < depth; i++) ds += '  '
  console.log(ds, real_args)
}

// Just walk through the node tree, logging as we go.
function walk_node(node, depth) {
  dlog('walking node: ', node, depth)
  console.log('walking node: ', node)
  var child = node.children('.node').first()
  if(child.length > 0)  walk_node(child, depth + 1)
}

walk_node($('.container'), 0)
</script>

I've implemented very similar functionality in Java and C by passing around a prefix string to the logging function and appending whitespace to the prefix string at each level of recursion. It's probably a bit more efficient than looping to construct the prefix string every time you want to print something.

So you might have better luck with something like:

// Log with depth
function dlog() {
  var depth = arguments[arguments.length - 1];
  var real_args = [];
  real_args.push(prefix);
  for(var i = 0; i < arguments.length - 1; i++)
    real_args.push(arguments[i]);
  console.log.apply(console, real_args);
}

// Just walk through the node tree, logging as we go.
function walk_node(node, prefix) {
  if (! prefix) {
    prefix = '';
  }
  dlog('walking node: ', node, prefix);
  console.log('walking node: ', node);
  var child = node.children('.node').first();
  if(child.length > 0)  walk_node(child, prefix + ' ');
}

I think the problem is your for loop that breaks the node into multiple pieces. If you can live without the flexibility of being able to send a variable number of arguments to dlog(), then changing dlog() to this should solve your problem:

// Log with depth
function dlog() {
  var depth = arguments[2]
  var label = arguments[0];
  var real_args = arguments[1]
  var ds = ''
  for(var i = 0; i < depth; i++) ds += '  '
  console.log(label+ds, real_args)
}

Obviously, there is room for improvement in that code (such as the aforementioned ability to send a variable number of arguments, or at least some error checking to make sure that the right number of arguments have been sent and that they are of the correct type). But if you're just trying to do some quick and dirty debugging and want the output to be the same as in the other console.log() call, that should do it...