Debugging UI In PyCharm

Once you set your PyCharm to launch Twedit++ or Player (see instructions in Running Player and Twedit++ from PyCharm) it is a good time to ask a question why go through all this trouble? The answer is - debuggin capabilities. Sure you can use pdb but it is not terribly efficient. PyCharm offers great debugging capabilities and in this section we will explore how to do do debugging in PyCharm. We will work with Twedit++ code but the same principles apply to Player , or for that matter to any other Python project.

You may want to look at the PyCharm documentation that teaches you about capabilities of the PyCharm debugger. https://www.jetbrains.com/help/pycharm/debugging-your-first-python-application.html#where-is-the-problem

This section complements this tutorial and shows you how the debugging session may look like when working with Player or Twedit++.

Let us begin but instead of choosing Run option after right-clicking on __main__.py click Debug

now you are running the code in the debug mode. Not terribly interesting. So let’s put a breakpoint inside EditorWindow.py (click on the margin where the code lines are displayed). Let’s go inside the function open(self)

hit Debug from the toolbar

Nothing will happen but when you try opening a document (File->Open) The cursor code execution will stop at the line at which you put a breakpoint. You may need to manually switch window focus so that PyCharm is on top.

Click three dots and open Evaluate Expression.. (or hit Alt-F8)

end in the top line of the popup window type self, hit Enter and scroll down to see what members class EditorWindow has:

Take a look at the fileDict member of EditorWindow class. It is empty now. so lets complete opening a document - to do that you need to move past the breakpoint. There are two ways: you can either click Resume button (or click F9)

or you can keep clicking F8 and step through the code line by line. The second option might be useful when you want to see what really the code is doing. Let’s keep clicking F8 until we get to the line that starts with file_names, _ = QtWidgets.QFileDialog.getOpenFileNames

After we get through the line that we are parked now the File Open dialog will display and we can select a Python file

If we and if we click Open on the File Open dialog we will be brought back to the code

We are past the line that opened a dialog, and where we completed file selection. Interestingly, no text appeared in the editor yet.

This is not a coincidence. We are in the middle of the process (method) that opens a file in the editor. So far we have completed file selection process but we have not yet “displayed” the content of the file in Twedit++. Let’s see where we are in the code:

We are just past the File Open dialog line and we already selected the file. Notice that the bottom panel displays variable file_names that contains the list of files selected in a File Open dialog (it was just one file)

We can either exlpore the values in the bottom panel or we can use Evaluate Expression window - the results will be the same and it is a matter of preference which method of “code exploration” you choose:

So far we have learned how to step-through “live” code and inspect application state (values of variables).

Let’s continue clicking F8 until we hit the line with self.loadFiles

If we hit F8 again (do not do it yet) the actual files we selected will be loaded and their content will be displayed. Instead let’s hit F7. F7 will step-into the function loadFiles and we will be able to inspect what is going on there:

For example if we look at the bottom panel we see that the file_names were passed from function open to function loadFiles and it is now referred to as fileNames

Before we step through loadFiles function let’s explore the call stack management panel (the left panel):

Note that the line that is highlighted - it says loadFiles, EditorWindow.py which means that we are inside function loadFiles that is part of the EditorWindow.py module. A line belo says open,EditorWindow.py which means that we got to function loadFiles from function open .

Let’s click the line that says open,EditorWindow.py.

and notice that brings us back to the place from where we clicked F7. In general you can leverage Call Stack panel and move up and down the call stack, and at each step you can use Evaluate Expression (Alt-F8) window to inspect the state of your app.

At this point if you are tired of clicking F8 to step through the code let’s click Program Resume and this will execute the rest of loadFiles function as well as the rest of open function that we were initially in.

After you click Resume Programs you can switch to Twedit++ window and you will see that the file you selected is actually open now:

Finally, let’s do another round of opening. But let’s place another breakpoint after lines

Select File->Open, click Resume Program button to get past first breakpoint and we will get stopped at the second one . Open Evaluate Expression (Alt-F8) window and type self.fileDict in the entry line and hit Enter:

As you remember this variable was empty before we opened previous file. Now it is populated, the content is displayed above and we can conclude that it must have been populated during previous file open round. As an exercise you may want to find the place in the code where Twedit++ code inserts value into self.fileDict

This brief tutorial is an intro to debugging teaches you how to start exploring CompuCell3D UI in the debugger. Those skills are very helpful when developing UI code and once you learn how to use debugger effectively you will be using it quite a lot when you develop new UI modules. There are few skills that are useful during debugging: Setting up breakpoints, Evaluating expressions (Alt-F8), stepping over the code lines F8, stepping into the function F7 and navigating the Call Stack. Once you learn those skills code development and learning what a given piece of code does will become a lot easier.