Jovo Debugger

Learn more about the Jovo debugging environment.

Introduction

The Jovo Debugger allows you to test and debug your Jovo app by displaying the most important information about each interaction in one place. It is connected to the Jovo Webhook, which makes it possible to test your local code without deploying it to any server.

The Debugger contains both an interaction and a lifecycle view. The interaction view shows all input and output in a chat-like interface. The lifecycle allows you to see how data changes throughout a request lifecycle.

The Debugger can be used in two ways:

  • Send requests to the local development server right from the Jovo Debugger by typing or clicking buttons.
  • Watch requests from platforms that go through the Jovo Webhook server, even if you're testing on a different device (for example an Echo Dot for Alexa).

You can access the Jovo Debugger by executing the run command and then going to your Jovo Webhook URL in the browser (you can do that by typing . after run).

After the installation section, we're going to take a look at configuration. There are two different types of configurations that you can make when using the Jovo Debugger:

Installation

To connect your Jovo app to the Debugger, you need to install the Jovo Debugger plugin. Most Jovo projects already have the plugin added to the development stage at app.dev.ts. Learn more about staging here.

If it is not already added to the project, you can install the Debugger plugin like this:

$ npm install @jovotech/plugin-debugger

The Debugger can only be used for local development, so we recommend adding it to the app.dev.ts app configuration:

import { JovoDebugger } from '@jovotech/plugin-debugger';
// ...

app.configure({
  plugins: [
    new JovoDebugger(),
    // ...
  ],
});

Learn more about its configuration options in the Debugger plugin configuration section.

Debugger Plugin Configuration

You can configure the Jovo Debugger plugin in the app configuration. It includes everything that is needed from the app side for the Debugger to work properly (for Debugger frontend customization, take a look here).

import { JovoDebugger, DEFAULT_INCLUDED_PROPERTIES } from '@jovotech/plugin-debugger';
// ...

app.configure({
  plugins: [
    new JovoDebugger({
      nlu: new NlpjsNlu(),
      plugins: [],
      webhookUrl: 'https://webhook.jovo.cloud',
      debuggerConfigPath: './jovo.debugger.js',
      modelsPath: './models',
      includedProperties: DEFAULT_INCLUDED_PROPERTIES,
      ignoredProperties: ['$app', '$handleRequest', '$platform'], // We recommend using includedProperties instead
    }),
    // ...
  ],
});

It includes the following properties:

nlu

Important: Text input in the Debugger does not support built-in entity types like AMAZON.City if you are using the default configuration, which uses NLP.js as NLU.

The nlu property defines which NLU integration should be used in case the Debugger sends raw text. This usually happens if you type text into the Debugger input field. This raw text is then sent to your Jovo app where it is then turned into structured meaning by using an NLU integration. Depending on which NLU integration you use, there are certain limitations to what types of input can be managed by the Debugger text field.

By default, the Debugger uses NLP.js as NLU integration with the following default config:

nlu: new NlpjsNlu({
  languageMap: {
    de: LangDe,
    en: LangEn,
    es: LangEs,
    fr: LangFr,
    it: LangIt,
  },
});

By default, the languages de, en, es, fr, and it are supported. If you want to support a different language, you need to install the NLP.js language package as explained in the NLP.js Jovo integration docs, and then add it like this:

import { JovoDebugger } from '@jovotech/plugin-debugger';
import { NlpjsNlu } from '@jovotech/nlu-nlpjs';
import { LangHi } from '@nlpjs/lang-hi';
// ...

app.configure({
  plugins: [
    new JovoDebugger({
      nlu: new NlpjsNlu({
        languageMap: {
          hi: LangHi,
        },
      }),
      // ...
    }),
    // ...
  ],
});

This overrides the existing languageMap from the default configuration. You can add it back like this:

import { JovoDebugger, getDefaultLanguageMap } from '@jovotech/plugin-debugger';
import { NlpjsNlu } from '@jovotech/nlu-nlpjs';
import { LangHi } from '@nlpjs/lang-hi';
// ...

app.configure({
  plugins: [
    new JovoDebugger({
      nlu: new NlpjsNlu({
        languageMap: {
          ...getDefaultLanguageMap(),
          hi: LangHi,
        },
      }),
      // ...
    }),
    // ...
  ],
});

You can also add a different NLU integration like Snips NLU:

import { JovoDebugger } from '@jovotech/plugin-debugger';
import { SnipsNlu } from '@jovotech/nlu-snips';
// ...

app.configure({
  plugins: [
    new JovoDebugger({
      nlu: new SnipsNlu(),
      // ...
    }),
    // ...
  ],
});

includedProperties

The Debugger lifecycle view displays updates to Jovo properties that happen during a request-response lifecycle. This is helpful to track more detailed changes to your app's data.

If you have an additional property that you want to track using the Debugger, you can add it using the includedProperties array. We recommend the following approach:

import { DEFAULT_INCLUDED_PROPERTIES, JovoDebugger } from '@jovotech/plugin-debugger';
// ...

app.configure({
  plugins: [
    new JovoDebugger({
      includedProperties: [...DEFAULT_INCLUDED_PROPERTIES, '$yourProperty'],
      // ...
    }),
    // ...
  ],
});

Note: Properties that contain a reference to the Jovo object can cause Maximum call stack size exceeded exceptions.

Debugger Customization

You can customize the Debugger frontend using the jovo.debugger.js file in the root of your Jovo project. Learn more about the Debugger configuration here.

const { DebuggerConfig } = require('@jovotech/plugin-debugger');
// ...

const debugger = new DebuggerConfig({
  locales: [ 'en' ],
  buttons: [
		{
			label: 'LAUNCH',
			input: {
				type: 'LAUNCH'
			}
		},
		{
			label: 'yes',
			input: {
				intent: 'YesIntent'
			}
		},
    // ...
  ]
});