Debugging

Debugging can be hard. Especially if your app runs partly in Python and partly in JavaScript. Here are some tips that may help.

Be clear about where the offending code is running

This may sound obvious, but it’s important to do this before moving on. Sometimes the bug presents itself due to the interaction between Python and JavaScript. The same rules apply, but you’d have to dig into both ends.

Digging in the Python side

All the normal Python debugging tips apply here. GUI applications run in an event loop, which makes debugging harder. E.g. using breakpoints is not always possible. A strategically placed print() can sometimes help a lot.

It can be worthwhile to run the app in an IDE that can integrate the event loop, so that you can use a Python REPL to inspect an application while it is running. E.g. with Pyzo with asyncio GUI integration.

Digging in the JavaScript side

People unfamiliar with web technology might be hesitant to try and debug using the browser, but you’ll be amazed by how awesome the debugging tools of Firefox and Chrome are!

Firstly, hit the F12 key to pop up the developer console. From here, there are a few things that you can do:

You can run JavaScript commands to inspect and control your app. There is a global flexx object, and you can get access to all components using flexx.s1.instances.xxx. Use autocompletion to select the component you need. You can inspect the component’s properties and invoke its actions.

If the problem is related to appearance, you can activate the element selector and then click on the element on the page to select it. This will allow you to inspect the HTML DOM structure and inspect the CSS of all elements.

End

This concluses the Flexx guide. Have fun!