One of the first things I do any time I start programming in a new language or framework is create a bunch of tools to make my life easier. I am a firm believer in Larry Wall‘s statement that the three great virtues of a programmer are “laziness, impatience, and hubris“.

Laziness
The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful, and document what you wrote so you don’t have to answer so many questions about it. Hence, the first great virtue of a programmer. (Source)

So, the first lazy tool of a programmer – print_r. One of my favorite functions from PHP is the print_r() function. While working with CakePHP, I came across their very nice abbreviation – pr() – which not only does the print_r part, but also surrounds it in HTML <pre> tags.

But how to do this in Javascript and ExtJS in particular, when all the content is dynamically generated? Initially I thought to open a new Window and then use document.write(), but opening a window is incredible slow (3 – 5 seconds). So, next solution was to take advantage of the ExtJS Ext.window.Window class, as it is not a actually a window, but a pleasantly styled <div>.

Usage

  1. Download the pr.js file from GitHub project page.
  2. Include it in your ExtJS web app using a script tag.
  3. In your code call the pr() function passing in the parameter you want to inspect.

 

<script type="text/javascript">
var myObj = { 
    key: "value",
    key2: [{wow: "fancy"}, 113, "Sweet"],
    key3: function () {   
        return {fancy:"value"};
    } 
};
pr(myObj);
</script>

 

Remember to include the ExtJS before calling pr(). Also, it is not very useful to call pr() on a massive object like Ext, instead, call it on a specific component to see what is inside.

Example

See it in action on the demo page.

Leave a Reply

Your email address will not be published. Required fields are marked *

*