Test and debug bots using Bot Framework Web Chat

APPLIES TO: Composer v1.x and v2.x

Since the Bot Framework Composer v1.4 release, you can use Bot Framework Web Chat within the Composer environment to test and debug your bots. This article will show you how to use Web Chat in Composer to test a bot locally, how to save a transcript from your Web Chat test for debugging, and how to use the Web Chat Inspector to view trace activities and bot state.

Note

With the current Web Chat integration:

  • You can test a local root bot directly.
  • You can test a local skill indirectly, through the root bot.

However, you need to test remote bots and skills in the Emulator.

Prerequisites

Run and test a bot locally

  1. Select the Start bot button on the top right to start your bot's local runtime.

  2. Once your bot is running the Local bot runtime manager opens and will show your bot's status as running.

    Note

    If you see a Windows Security Alert, your firewall has blocked some features of this app. Select Allow access.

  3. Select Open Web Chat to the right of your root bot or select the Open Web Chat (drawing1) icon from the toolbar. This will open the Web Chat window where you interact with your root bot. You can test different types of message activities, including text, cards and suggested actions.

    Web Chat window

  4. Select Restart Conversation to restart a conversation. Use the drop-down menu to the right of the button to choose whether to start the conversation with the same user ID or a new user ID.

    Restart conversation - new or same user ID

Save a transcript for debugging

A bot transcript file is a specialized JSON file. It preserves the interactions between a user and your bot, including the contents of a message, interaction details such as the user ID, channel ID, channel type, channel capabilities, time of the interaction, and more. All of this information can be used to help find and resolve issues when testing and debugging your bot.

This section walks you through the process to save a transcript from your Web Chat test and use the transcript to debug your bot.

  1. Select the Save chat transcripts (drawing2) icon in the upper-right of the Web Chat window.

  2. Choose a location to save the transcript file.

  3. Select the saved transcript (drawing4) icon to open the file in the Emulator. With your transcript file loaded, you're now ready to debug the interactions that you captured between a user and your bot.

  4. Select any event or activity from the conversation window on the left. In the example shown below, the user's first interaction when they sent the message "Hi" was selected.

    debug in Emulator

    Looking at some of these values from the JSON window on the top right, you will see some detailed information such as the:

    • Plain text sent contained "Hi".
    • Interaction type was message.
    • Time the message was sent.
    • User ID and information.

    This detailed information allows you to follow the step-by-step interactions between the user's input and your bot's response, which is useful for debugging situations.

Web Chat Inspector

You can view bot state, LUIS, QnA, and other trace activities, as well as track properties in memory. All of these features are located in the diagnostics panes at the bottom of the Composer window.

Diagnostic pane

The Problems panel logs authoring errors and warnings such as incorrect syntax or a missing configuration file.

The Web Chat Inspector panel logs errors and warnings that happen between Composer and the bot. For example, if you enter an invalid app ID or password, you will see the errors in the Web Chat Inspector panel.

The Output panel shows the standard output/error stream, when the bot is running, from the .NET or JavaScript runtime. This includes start up information and runtime errors.

See the section below for information about how to use the Watch panel to track properties in memory during testing.

Watch panel

Composer users can track one or more properties in memory during Web Chat testing using the Watch panel. This makes the debugging process easier, and lets developers track variables within Composer without any additional logic.

To watch a property in memory, do the following:

  1. Start and run the bot with the property or properties you want to watch using Web Chat.

  2. Select the Watch panel on bottom of the screen.

  3. Select Add a Property to add a property to watch.

  4. Now select the grey box under Name. A box will appear with drop-down menus to add dialog, this, and turn properties. Select one of these or add your own property from memory to watch.

  5. Now test your bot in Web Chat and track the properties you've added to the Watch panel. The screenshot below shows an example of the turn property.

    trace activities