How to debug Dialogflow Python webhook using ngrok
Website Name Change
I have changed the name of this website from Mining Business Data to BotFlo. I am offering a 70% off discount on my Dialogflow CX course (till April 15th 2021) for people who can help me spread the word about my new website.
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.
You must log in to post a comment.