Debugging voice apps locally With Webstorm and Bespoken

This tutorial shows you how to get set up using Webstorm to debug your voice app code locally.

Using this, you can run your HTTP Webhook, Alexa Skill or Google Action directly on your machine, and step through the actual code to debug it with real requests and responses.

Getting started

Prerequisites

If you haven't already, follow these steps:

• Install Bespoken Tools (bst) with npm install -g @bespoken-sdk/cli
• Install Webstorm from this link (opens new window).

This tutorial is based on a simple sample project. If you want to use the same, just clone the repository here (opens new window) and install the dependencies by running npm install from its root folder. Of course, feel free to use your own existing project.

Configuring WebStorm

First thing is to create a run configuration. The easiest way to do it is to right-click on the main JS file of your voice app project, and then select Create <MainFile.js>

Fill in the configuration:

Start by finding where bespoken-tools are installed on your machine. To do this, follow these steps:

• Open a command-line prompt.
• Enter npm list -g bespoken-tools. This is the path to your NODE_DIRECTORY - we will use this in the next step.

• The path for the "JavaScript file" should be: NODE_DIRECTORY/node_modules/bespoken-tools/bin/bst-proxy.js

If you want to debug an Alexa skill, set the application parameters with lambda followed by the filename of the Lambda entry-point, in this example, lambda index.js --verbose

In case you are debugging a Google Action, use function index.js function-name --verbose

The --verbose parameter prints out helpful information to the console.

Select 'OK' to save the configuration.

Seeing It In Action

Let's see how this works, for that, we are going to locally run the sample project mentioned at the beginning of this tutorial.

Set a breakpoint in the code by clicking on the blank space next to the line 97, just below the declaration of the GetOnePlayer function, which will be triggered when we say to the skill that we are going to play with one player only.

Now, let's start debugging by clicking in this icon, located at the top right menu:

When the debugger starts, it executes the Bespoken proxy with the parameters we defined when creating the run configuration, that means the skill is running locally. Now, let's interact with the skill from the command line, for that we are going to use the launch (opens new window) and utter (opens new window) commands.

First, we open a Terminal on Webstorm by clicking here:

Then we execute the command bst launch in the terminal we just opened, it will start the skill, and ask how many players are playing today.

Let's reply back one by executing the command bst utter one. When this command is executed the breakpoint is activated and Webstorms show the debugging windows below.

That is awesome, isn't it? We can inspect the variables we want and finding the problematic areas in our code easily. This simple saves you tons of time!.

WebStorm offers a host of capabilities via their debugger - you can learn more here (opens new window).

We hope this helps accelerate how you develop and debug your code. Please do not hesitate to contact us if you need assistance, we are happy to help!