title: Show jQuery (JS) objects' contents in Chrome Console
body: <p>Im getting my objects returned in the console as <code>[object Object]</code>, however which way I try to have it log all of the contents of the objects I get nothing or errors. I've read a whole lot of questions on SO about this (e.g.: <a href="https://stackoverflow.com/questions/8143386/display-object-contents-js-jquery">this</a>, <a href="https://stackoverflow.com/questions/13974740/how-do-i-console-log-a-jquery-dom-element-in-chrome">this</a>, <a href="https://stackoverflow.com/questions/14136989/chrome-can-no-longer-log-inspectable-jquery-objects-from-scripts">this</a>, <a href="https://stackoverflow.com/questions/11832397/console-not-behaving-as-expected-when-logged-objects-change">this</a> and <a href="https://stackoverflow.com/questions/13974740/how-do-i-console-log-a-jquery-dom-element-in-chrome">this</a>) but still can't figure it out. </p>
  
  <p>I've created some objects by looping through JSON array's using: </p>
  
  <pre><code>var tables = {};
  
  $.each(campaigns, function(key, value){
      tables[value] = '';
      var entries = [];
      $.each(data, function(k, v){
          if(v.campaign == value){
              entries.push(v);
          }
      });
      $.extend(tables[value], entries);
  });
  
  console.log('tables: ' + tables);
  </code></pre>
  
  <p>The amount of objects is correct based on the number of objects returned with different conditions and parameters. However, I would like to see <em>what's actually inside them</em>! I don't want to include all sorts of external scripts, do weird and unnecessary loopy-loops, just some simple command I'm overlooking would be awesome!</p>
  
  <p>How to go about logging objects with something like <code>console.log(someObj);</code>? </p>