Displaying Back End Data

I'm not sure what other developers use for debugging the back end of Node apps like KeystoneJS. I love the Dev Tools in Chrome for debugging front end JavaScript. Compared to that, using the Node inspector for debugging node applications is painful and slow. Be sure to drop me a line if you have a suggestion for a better back end debugging solution. 

So, I discovered a little hack that lets me retrieve back end JSON data and display it on the front end. Here's how:

Add this Handlebars helper to the end of the file templates/views/helpers, right above the line that says return _helpers;

// JSON.stringify helper.
// This is used to send JSON data to the front-end so that it can be handled
// by front-end JavaScript.
// 10/21/15 Chris Troutner
_helpers.JSON = function(obj, options) {
 debugger;
 return JSON.stringify(obj);
}

 

That will allow back end JSON data to be stringified for input into the Handlebars template. Now, whatever template page you want to display data on, you can with the little code snippet below. For instance, I added this code to the bottom of templates/views/blog.hbs:

{{#if data}}
  <script type="text/javascript">
    var blogdata = {{{JSON data}}}
  </script>
  <p>blog data loaded.</p>
{{else}}
  <h3 class="text-muted">Blog data not loaded.</h3>
{{/if}}

 

And now your back end JSON data is stored inside a front end javascript varible. You can use Chrome Dev Tools to play with the data on a JavaScript command line or simply view the souce code of the page to look at the raw data.