Best practices for debugging javascript
I'm trying to debug some javascript objects --- not much support inside Max environment so I'm thinking about using a javascript IDE that supports proper debugging and simulating the inputs/outputs.
Before I go off inventing stuff, I'm wondering what others have done that might be more effective.
Where are the Javascript objects that Max makes available?
I spent hours trying to debug security stuff before I realized that the File object is a Max thing, not a general Javascript object (I'm not a Javascript expert).
Before I go writing my own file handling for debugging, I'd rather use the Max stuff if it's available.
Well, I guess I'm answering my own question in hopes it will be helpful for the next person.
I ended up using a tool called WebStorm (from jetbrains) which is a very nice JavaScript IDE/debugger. It uses firefox or chrome as the execution platform.
What I ended up doing was writing a new JS file, visible only during debugging with WebStorm that implements the File object API as defined by Max. It also has a few other misc. functions to emulate the outlet() and the post() functions used in Max.
With that combination, I was able to completely debug the Max javascript code that was causing me grief.
I will take a look at this webstorm thing - thanks for the headsup - but it is quite untrue to say that max has no javascript debugging. The javascript editing window (at the bottom) and the max window report any errors they see in the code - the max window does it on save, the js window does it in realtime. Note that some things, like type conversions, only go bad during executions, so no way the debugger can catch them.
I said "not much" support.
I'm not a JavaScript expert (and having now learned enough about it so that I can use it with Max, I wish it had never been invented, it's horrible) and the problems I was having were due to my not understanding some aspects of how JavaScript works. None of the issues were syntax related.
I needed the ability to single-step through code and examine variables. Turns out I was getting bitten mostly by duck-typing.
#^}+%*}*%*#^%
ok, how about post?
Here https://cycling74.com/forums/once-in-a-while-or-a-wish-for-the-future-console-log
joshua posted some code for a better display what is inside an object/array.
J
Hi I was wondering how far you got with this. I think it would be really useful for big projects to create a set of dummy classes that at least let you step through your code in a browser. The live LOM could also be recreated.
Generally speaking, it is common in more complex programming scenarios to need more complex debugging tools. Lucky are those who's challenges are simple enough to rely exclusively on console output.
However, as your code becomes more complex and you start to normalize it by defining re-usable structures that are called from many places, it can help significantly to be able to do things like line-step debugging or at least printing a stack trace. I currently am not aware of any ability to do this sort of runtime introspection in Max.
The title of this thread is "Best practices for debugging javascript," and I would encourage anyone who has developed better techniques or tricks than simply relying on a clever console printing to step forward and speak. I could benefit from this as well.
Hello everyone,
I am developing complex JS objects in Max/MSP and right now I am having a headache trying to find a bug and I would appreciate more thorough means of investigations than the Max window . Any news / feedback since the time you wrote this ?
I am also running into a bug where I need this level of debugging. Has anybody else had luck with Webstorm? I am also curious about the details of this...
"What I ended up doing was writing a new JS file, visible only during debugging with WebStorm that implements the File object API as defined by Max. It also has a few other misc. functions to emulate the outlet() and the post() functions used in Max."
- DHJDHJDHJ
and if it could be applied to other IDEs or if it's a Webstorm specific feature.
Just in case anyone stumbles on this thread, I found a way to print a stack trace at least:
var err = new Error();
post(err.stack + "\n");
Still don't know if it's possible to use breakpoints yet though. Hope this helps.