By Brandon Morelli
As a new developer, finding and fixing bugs can be difficult. You may be tempted to randomly use console.log() in an attempt to get your code working correctly. Not Anymore!
This article is all about debugging the correct way! You’ll learn how to use the Chrome Developer Tools to set up breakpoints and step through your code. This workflow is often a much more efficient way to find and fix bugs in your code.
Thanks for this nice post!
Reverse engineering is a complex process that is way over my head. However, as JS goes, we can usually access the source code, especially if it is distributed open source.
Find the function of interest. separate it from the script, analyze the variables and create dummy values to fill those roles, then run the function and see what comes out the other end.
It depends upon how proprietary the library is. Even minified code is readable.
Thank you very much for your replies!
I got minified ml5.js from https://unpkg.com/[email protected]/dist/ml5.min.js and then went to https://unminify.com/ to unminify the library. Is this a proper way of unminify our p5 and ml5 libraries?
How can I find the sketch.js file inside this debugging page to start debug?
Thanks again for your help!
None of this is in my purview, beyond speculation. The only refined way to unpack a minified script is to use the same program that minified it, in the first place. Sort of how split and join work hand in hand.
An unpacker would be inserting line breaks in all manner of positions, then using further logic to compute the nesting. Down the rabbit hole we go.
Open Source code generally always comes with an uncompressed source file, else how would anybody contribute? If that is not available for P5, then you have the above to venture into.
You are very right, they do have source codes ready in repo, I found it now. I guess the easy way to debug/walk through the source codes repo is to do it locally instead of doing it with the p5.js web editor, right? I think I have a better idea of what I need to learn now.
Thank you so much for your time and help!
Again, on pure speculation, the P5.js editor likely allows one to write code that is linted by the editor. Peering at the code under the hood of P5.js would mean exiting that environment and looking at it in the debug environment of the console.