flexx
flexx copied to clipboard
flexxui
More detailed logging for "debug mode"
A debug mode for development would be very pleasant. Sometimes it's hard to see in what order things are being executed. I find myself adding window.console.ori_log(msg) as the first line in flexx.app.clientcore.FlexxJS.command to see what's happening in the browser, helping me identify bugs. There are probably more points in the code where some more transparency would help a lot to visualize what's going on in the application.
Specifically this would probably be most useful if it were focused on visualizing server/client chatter, and possibly event handling.
The Python side debugging should be pretty good (though might need more logger.debug calls). I can see how JS specific debugging can be useful. And maybe the Python-side debugger should be more integrated with debugging in JS land, e.g. setting debug level also sets the JS debug level. There is a lot of room for improvement here.
Sometimes I'm trying to figure out how things are working in Flexx and I find myself lost whenever anything happens on the browser/client/JS side.
My Python development style involves a lot of pudb. Frankly I probably rely on it too. I use it get a better feel for code, dropping into IPython when necessary to inspect some classes/variables. pudb offers me is a tool to navigate through most pure-python issues that might arise.
Does anyone have advice for debugging Flexx in general and also specifically on the JS side? Note that I'm still pretty new to JS and the DOM.
F12 opens the devtools in most browsers. The Console tab usually sports a REPL, and you can interact with all your objects there. Start typing flexx.instances..... and AutoComplete should show you every Flexx Model you've instantiated.
You can call all your methods, set and get your properties, and probably more things that I am not aware of.
The devtools should also have a Sources tab where you will find all your transpiled code. It should be pretty similar to what you have in Python, some constructs look nasty after transpilation but take a moment to look at it carefully and you'll learn to recognize the good parts pretty quickly. Here's the great thing: you can set breakpoints just like in any IDE here!
There's a lot more you can do here but I would advise you to just play around with the devtools and use Google if you want to learn more about specific options.
Thanks @Korijn. I had looked at it a little but felt a little lost, I'll take a look keeping in mind what you've said here.
After the big refactoring, one can actually use logger objects in JsComponents', i.e. in code that runs in JS. The way that this works is that flexx/app/_modules.py, the code that resolves pyscript dependencies, detects that a logging.Logger` instance is used and makes it use the standard logger from the event system.
A nice further step in this is to obtain the name of the logger and instantiate a corresponding logger in the JS module, so that logger messages are fed into the correct Python logger. That way, all Js log messages can be filtered with the Python log mechanisms.
Then we can also add more debug messages on the JS side, provided that the JS logger gets its level updated (so that we don't send tons of unused debug messages over the websocket).
edit: would also allow tests, similar to the new live tests in flexx.app, by setting the log filter and verifying the log messages.