How to debug Dialogflow Python webhook using ngrok

First Published: Oct 2020 | Last updated: May 2022

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

Start with a regular Python project. No need to do anything more fancy

2 Add a new file called requirements.txt and add the following

3 Open the Terminal window inside Pycharm

4 Install flask using pip install

5 Add a new file called main.py

Add a new file called main.py into your project and add the following code into it

from flask import Flask

app = Flask(__name__)


@app.route('/')  # this is the home page route
def hello_world():  # this is the home page function that generates the page code
    return "Hello world!"


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


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

6 Click on the Debug button

Click on the green arrow next to the if condition (line 16 in the image) and click on Debug

7 Add a breakpoint inside the hello_world method

8 Navigate to the localhost URL displayed in the Run window

You will see a URL in the Run window. Click on it.

9 The breakpoint will be hit

10 Download ngrok

Download and install ngrok (you need to first log in)

11 Authenticate the auth token

This is now a required step if you wish to use ngrok.

Open a Terminal window in the folder which has the ngrok executable

Copy paste the command in a Terminal (in the folder where you extracted the ngrok zip file)

If you don’t do this authentication step, you will see an error

./ngrok config add-authtoken <your_auth_token>

You will see a message which says

Authtoken saved to configuration file: path/to/ngrok/ngrok.yml

You are now ready to use ngrok

12 Start ngrok at the assigned port

We have used 8080 in our code. So that is what you should use for starting ngrok

./ngrok http 8080

You will see that ngrok generates a URL for you

13 Copy paste the ngrok generated 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.

14 Enable Webhook call in your Default Welcome Intent

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

15 Add a breakpoint to the /webhook method

Make sure you have entered the Debug mode in your PyCharm IDE just like you did in step 6.

This time, add a breakpoint inside the /webhook method

16 Trigger the Default Welcome Intent in the Dialogflow simulator

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

17 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.

Once you get this working, you can step through the code and debug your webhook

<— End of article —>

This website contains affiliate links. See the disclosure page for more details. 

"The magic key I needed as a non-programmer"

The custom payload generator was the magic key I needed (as a non-programmer) to build a good demo with rich responses in DialogFlow Messenger. I've only used it for 30 minutes and am thrilled. I've spent hours trying to figure out some of the intricacies of DialogFlow on my own. Over and over, I kept coming back to Aravind's tutorials available on-line. I trust the other functionalities I learn to use in the app will save me additional time and heartburn.

- Kathleen R
Cofounder, gathrHealth

"Much clearer than the official documentation to be honest"

Thanks a lot for the advice (of buying and following your videos)! They helped a lot indeed. Everything is very clear when you explain, much clearer than the official documentation to be honest 🙂

Neuraz T
Review for Learn Dialogflow CX

"I will strongly recommend this course because even I can learn how to design chatbot (no programming background)"

I think Aravind really did a great job to introduce dialogflow to people like me, without programming background. He organizes his course in very clear manner since I have been a college professor for 20 years. It is very easy for me to recognize how great Aravind’s course is! Very use-friend and very easy to follow. He doesn’t have any strong accent when he gives the lectures. It is so easy for me to understand. Really appreciate it.

Yes, I will strongly recommend this course because even I can learn how to design chatbot (no programming background) after studying Avarind’s course, you definitely can!

Ann Cai
Review for Learn Dialogflow ES