Debugging components

Debugging full stack application could be challenging, because we have to manage code behavior on the server and on the client (in your browser) same time. This is provided by several tools.

Logging

  • Server-side messaging via logger context variable for server side logging (check it is enable in configuration).

  • Client-side messaging via session.log method - sends messages right in the browser’s debug console.

  • All exceptions happened in actions’ code are also sent to the browser’s debug console. It also includes last stack trace.

Breakpoints

Note

Information in this section is very specific to PyCharm IDE and not tested on other IDEs.

To set breakpoint in pantra component HTML file there are some steps needed:

  1. Enable syntax highlighting of Python code (optionally, but recommended).

  2. Override current file type to Python (right click on editor tab and select “Override File Type”).

  3. Set breakpoint on specific line. That’s it.

  4. To suppress HTML code highlighting as “unsupported” Python code, it is allowed to suppress it with multiline comment block.

highlighted as python
'''
<div ref:message>Hello there</div>
<python>
# '''
def action(node):
    refs['message'].set_text('foo')
#</python>
highlighted as HTML (pantra component)
'''
<div ref:message>Hello there</div>
<python>
# '''
def action(node):
    refs['message'].set_text('foo')
#</python>

Important

Any initial text of the component outside the node (HTML or Component tag) is ignored, not rendered to a browser. So, it could be any textual description including triple quotes mark ‘’’

Stepping exceptions

To avoid debug stepping into unwanted service classes, it is also recommended to setup some exceptions:

File -> Settings -> Build, Execution, Deployment -> Debugger -> Stepping

Set checkbox “Do not step into scripts” and add:

  • enum*

  • common.py

  • reactdict.py

Observer watchdog

It is possible to monitor changes of some files and update them on the fly:

  • HTML component source files

  • Helpers and database Python source files

There are few step to enable this:

  1. Make sure pantra not running cached

  2. Make sure PRODUCTIVE flag is False

  3. Set RUN_CACHED flag to True

  4. Put restart button to your app:

<button on:click="do_restart">Restart</button>
<python>
def do_restart(node):
    session.restart()
</python>

So that’s it. You can run your app, make changes to components and just press button “Restart” after. No need to restart whole app or browser page.