Live Debugging

Debugging an e-commerce app online!

This article shows how to debug Python code in the production environment of a real-world scenario with the help of Sidekick
Hasan Şerefal
5 mins read

In software development, the most time-consuming task isn’t building new product features—it’s debugging issues that occur after the features are built. Specifically, debugging errors that only happen in the production environment, but seem impossible to reproduce in the local environment, can take software developers days, or even weeks, to fix. 

Are your customers patient enough to wait for you to correct production issues? If not, you will risk losing them for sure. Sidekick was created with this challenge in mind. With Sidekick, you can debug production issues from your favorite IDE, without going anywhere. 

In this article, we’ll show you how to debug Python code in the production environment of a real-world scenario, with the help of Sidekick.

What Is a Debugger in Python?

In order to troubleshoot issues quickly when working with Python, there are a few important points you should consider. First, in programming, developers face difficulties related not only to feature implementation or how to design the application but also how to troubleshoot the application when a tricky bug arises. The debugger in Python helps developers troubleshoot more quickly. It’s an interactive source-code tool that allows developers to understand how the process in the application works and how data is manipulated during each step in the application code. 

How to Step Through Python Code to Debug Issues

To step through Python code, you need to set breakpoints for the line of code you want the program to stop at. When the application is restarted, the program will be paused right at the breakpoint you have set. This way, you will be able to see the current context of your application. For example, for the local development environment in your local machine, you can use PyCharm, a Python IDE, when working with Python code. 

The Python debugger screen in Pycharm looks like this:

Figure 1: Example of Python debugger in PyCharm

The red circle on line 84 is called the breakpoint. This is where the application is paused. You can see the value for each variable of the program when the application runs at that step. For example, here, you know that access_token_expires equals 30 minutes, which means that the token will expire after 30 minutes. After that time, the user won’t be able to perform authorized actions.

Online Python Debugger

When you don’t have code editors in the local machine, use an online Python debugger. This can be helpful when your machines don’t have enough RAM to run them or you want to test code directly from the browser for convenience. AWS Cloud9, Google Developers Codelabs, and Microsoft Azure Notebooks are all popular online Python debuggers.

Debugging a Real-World Application

Let’s say you have an e-commerce web application that allows users to buy products with payment support from Stripe or Paypal. In order to make a purchase, users need to sign in. They are required to provide a username and password in order to sign up for a new account. An e-mail address is optional.

Figure 2: Sign-up form in the e-commerce web application

Users can see all available products on the home page. 

Figure 3: Home page that shows all the products available

They can then add desired products to their cart and purchase them using Stripe.

Figure 4: Cart page that shows all the products that have been added
Figure 5: Payment options for Stripe and Paypal are supported

Here Comes the Issue

Let’s say that in the production environment, your customer service team got a call from a frustrated customer saying he wanted to buy a football uniform for his kid, but was unable to add the product to his cart, even though the site shows there’s one item left. Since this is the production environment related to shopping flow, you need to act on this as soon as possible.

First, you’ll  need to reproduce the issue in the production environment. Go to the product page and try to purchase the item that the customer wants.

Figure 6: Product page of the product that the customer has an issue with

Here, you can see that there’s still one item in stock. Hit the “ADD TO CART” button to try to add it to the cart.

Figure 7: Cart after clicking “ADD TO CART.” 

As you see in the above image, after you add the product to the cart, the cart is still empty.

Let’s try to add other products to the cart; for example, a scarf.

Figure 8: Product page for the scarf 

The app shows that there are five scarves in stock. Click the “ADD TO CART” button.

Figure 9: Scarf is added to cart successfully

As you see, the scarf was added to the cart successfully.

This means that you cannot reproduce the customer’s uniform issue in a production environment. Let’s try to reproduce it in the local environment with the same product at the local address as 127.0.0.1.

Figure 10: The Uniform product in the local environment

In the local environment, the uniform is in stock. Let’s add one to the cart.

Figure 11: Item is added successfully

The item was added to the cart successfully. Let’s try another product in the local environment.

Figure 12: The “socks” product in the local environment

Here, we’re testing the “socks” product by adding seven  items to the cart.

Figure 13: “Socks” are added to cart successfully

The items were added to the cart successfully.

Debug the Application with Sidekick

Okay, so you cannot reproduce the customer’s uniform issue in the local environment. So far, it only happens in the product environment. Let’s go to Sidekick in order to debug this issue.

From the Sidekick page, put some breakpoints into the code view screen. Here, we put some breakpoints at the method add_to_cart to see the actual number of items for the uniform” product when the issue happens.

Figure 14: Debugging screen in Sidekick
Figure 15: Debugging capturing in Sidekick

From the Sidekick debugging screen, you can see that the total variable is 0 (total=0). Double-check the actual number of uniforms left from the admin site.

Figure 16: Number of uniforms after product check in admin page in production environment

Here, you see that the total number of uniforms is zero. That’s why you can’t add the product to the cart. But why is the number zero shown on the product page? Let’s check the code in the product.html file.


product.html

{{ object.total|add:"1" }}

{% if object.total|add:"1" > 0 %}

Add to cart

Remove from cart

{% endif %}

Ah! In the code for the product.html page, someone added “1” to the  total. That’s why the app says there is one uniform left, even though it is out of stock.

Let’s Fix This Bug!

If you remove the extra “1,” the updated code will look like this:


product.htm

{{ object.total }}

{% if object.total > 0 %}

Add to cart

Remove from cart

{% endif %}

If you double check the issue in production after the fix, you’ll see that the product page, under “Quantity,” shows that there are zero  uniforms in stock. The “ADD TO CART” and “REMOVE FROM CART” buttons are hidden.

Figure 17: Product page now shows the real uniform quantity as 0. 

Now, the user will know that the uniform is out of stock and can look for something else on the app for his kid. This production issue is resolved.

Conclusion

No matter how many tests you have or how hard you try to make the local or development environment work like a production environment, there will always be bugs that occur only in production. When this happens, resolving the issue as quickly as possible can prevent user frustration, which directly affects the survival of your software product. 

Sidekick allows you to debug production issues directly, without having to spend precious time reproducing them in a local environment. To be better prepared for future production issues, check out Sidekick today.

Fresh insights from Sidekick experts every week.

Get the best insights, delivered straight to your inbox.