Background

Node.js is an open-source, server-side execution environment for JavaScript. It is built on Chrome's JavaScript runtime for easily building fast, scalable network applications. With JavaScript already the standard scripting language for web clients, it is very compelling to also use JavaScript for web application servers. In short, Node.js represents a “JavaScript everywhere” paradigm.

Node.js has the largest repository of open-source utilities in the world, collectively known as npm, the Node Package Manager. npm makes it easier for programmers to publish and share source code for useful pieces of Node.js functionality.

express-debug-panel

Finite Wisdom has contributed our first package to npm. It is called express-debug-panel and implements a panel containing useful debugging information, for use in Express.js applications. Let’s take a closer look at the functionality it provides.

The Debug Panel is initially displayed in collapsed form:

When you click on it, it opens in its default format:

In this default format, it shows information for the following Express.js and Node.js objects:

You can also provide a custom format for the Debug Panel. In the following screenshot, we have suppressed the process object and replaced it with env, config, and versions objects.

Demonstration

See a live demonstration of the Debug Panel at demo.finitewisdom.com.

Installation

To install the Debug Panel, use the following command:

Use

The Debug Panel works with all Express.js template engines. Here are the instructions for the three most popular engines:

Use with EJS

To add a Debug Panel to the /test route of your Express.js application that utilizes EJS templates, use the following code:

In your test.ejs view, include the following code:

Use with Pug

To add a Debug Panel to the /test route of your Express.js application that utilizes Pug templates, use the following code:

In your test.pug view, include the following code:

Use with Mustache

To add a Debug Panel to the /test route of your Express.js application that utilizes Mustache templates, use the following code:

In your test.mst view, include the following code:

Configuration

You can configure what is displayed in the Debug Panel by passing an options object as the 2nd argument to debugPanel.render. The options object takes the following form: