Pop Tags


For debugging and development.

Extensions are excuted in a serverside environment. So that you can debug, there needs to be a way to log statements to your browser console, similar to how console.log() works on the client side.

The global object log is a function that will write a message to the serverside log for this request. This log can be piped over to the client side by putting <pop:log/> in your template.

A good pattern is to use <pop:log/> together with <pop:development> (or <pop:production>).

Anything inside a <pop:development> tag will only show up when you’re using a preview url (a url under the domain with both a project subdomain and a version subdomain. Ie.:

Anything inside a <pop:production> tag (on the other hand) will only show up when you’re viewing the live domain of the project (useful for adding a Google analytics code only for the live site).

The best way to use the <pop:log> tag is to put the following code at the end of your page, right before the closing </body> tag:


Then anything you .log() from your extensions (ie.: log(“This is a message from an extensions”); ) will be visible in the Javascript console of your browser when you are developing on a preview url.

Inspecting Objects

When you log javascript object, the Pop Tags engine prints them out as [object Object]. Not too helpful.

You can use JSON.stringify(obj) to print it them out and see what's going on. Here's a simple utils.js extensions wich exports a <pop:scope_logger/> tag which prints out the current scope for a tag.

exports.scope_logger = function(options, enclosed, scope) {
  log( JSON.stringify( scope ) );

In your template you could then use it to do things like print out a JSON String to your browser console for each entry in a collection of entries:


Continue to Extension Module Basics »