How to debug Dialogflow Python webhook using ngrok

In this tutorial I will explain how you can debug your Python Flask webhook for your Dialogflow bot using ngrok.

I use the PyCharm professional IDE (you can also download the free PyCharm community edition) in this tutorial.

1 Create a new Pure Python project

You can just start with a regular old Python project. No need to do anything more fancy.

2 Install flask inside the virtual environment

Open the Terminal inside your PyCharm IDE.

Use pip install Flask to install the Flask web framework inside your virtual environment.

3 Add a new Python file and call it app.py

Create a new Python file called app.py. Your project structure should look like below.

Add the following code into your app.py file

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello world!'

4 In the Flask run command in the terminal

Issue the flask run command in the terminal as seen below.

You should see some messages in the Terminal indicating that your Flask app is running on localhost on port 5000.

5 Verify that your app works

Now click the http://127.0.0.1:5000/ link in your browser and make sure your app is actually running.

6 Set up the debug configuration

This step is very important and must be done carefully. If you make a mistake in this step, you will not be able to get your end to end debugging working.

Right click anywhere on the app.py file, and choose Run app. You will not see any output, but you will see that the Debug configurations now has your app.

Click on the app inside the Edit Configurations… menu and open configurations for your app in PyCharm.

In the Edit configurations popup dialog, use the following (thanks to this article for the basic explanation)

Notice the following:

• the script path should be path to your venv folder, followed by /bin/flask
• in the Parameters textbox, use the parameter “run” as in the image
• in the Environment variables, usually the PYTHONUNBUFFERED=1 is already set. Prepend the following: FLASK_APP=app.py, which tells the debugger that the app.py is the main script to execute (the entry point), and FLASK_DEBUG=True, which allows you to go into Debug mode

7 Add the webhook method in your Flask app

Replace the code in your app.py with the code below.

I have added a second method which handles the webhook call. Notice that the webhook doesn’t have any business logic. It simply returns a “Hello from the webhook” message.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello world!'

@app.route('/webhook', methods=['POST'])
def hello_webhook():
    return {
        'fulfillmentText': 'Hello from the webhook!'
    }

8 Issue the ngrok command

If you haven’t already done so, first download ngrok.

Navigate to the folder where the ngrok executable file is saved.

Issue the following command

./ngrok http 5000

9 Copy the ngrok generated URL

You will see something like the following:

Here is what this says:

ngrok has created a “tunnel” which forwards all requests going to the URL https://a344ae6f5f7b.ngrok.io to your localhost at port 5000

(and that you can inspect all incoming requests by going to the web interface URL at http://127.0.0.1:4040)

Copy the https version of the URL.

10 Paste the ngrok URL into your Dialogflow fulfillment

If you haven’t already done so, first create a Dialogflow agent. 🙂

In the Fulfillment section, enable the Webhook option and paste the URL generated in ngrok, and append /webhook at the end.

Don’t forget to “Save” this information.

11 Enable Webhook call in your Default Welcome Intent

Open the Default Welcome Intent in your Dialogflow agent and enable the webhook call.

12 Start the PyCharm debugger

Make sure you have entered the Debug mode in your PyCharm IDE. You will do this by clicking on the green bug-like icon inside your PyCharm IDE.

You can verify that you are in debug mode by going to the first URL from step 5 (http://127.0.0.1:5000). It should hit the breakpoint in the hello_world method.

13 Trigger the Default Welcome Intent in the Dialogflow simulator

Type the word “Greetings” into the Dialogflow simulator. This should trigger the Default Welcome Intent.

14 The breakpoint inside your webhook method should be hit

When you type Greetings in the simulator, it will fire the Dialogflow Welcome Intent, which in turn will call the webhook URL.

At this point, you should see the breakpoint in your IDE being hit inside the webhook method.

Did it work?

Success! You have now enabled debugging of your webhook method.