Adding a depth parameter to console.log for recursion

Question

I am trying to debug a recursive function, and it would be nice if I could track the depth. I tried to write a version of console.log that took the depth parameter and added the appropriate number of spaces to the log, but this is not entirely correct. The biggest problem is that jquery objects appear differently when passing through the Chrome debugger. Ideally, the dlog function will be identical to console.log, with the exception of adding 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 = [] 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> 

Answer 1

I implemented very similar functions in Java and C, passing the prefix line to the logging function and adding a space to the prefix line at each recursion level. This is probably a little more efficient than looping to build a prefix line every time you want to print something.

So you might be lucky 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 + ' '); } 

Answer 2

I think the problem is that your for loop, which breaks the node into several parts. If you can live without the flexibility 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 this code (for example, the aforementioned ability to send a variable number of arguments, or at least some error checking to make sure that the correct number of arguments are sent and that they are the correct type). But if you are just trying to do some quick and dirty debugging and want the result to be the same as in another console.log () call that should do this ...