Weekend Reading - Learn How To Debug JavaScript with Chrome DevTools

Learn How To Debug JavaScript with Chrome DevTools
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.

1 Like

Thanks for this nice post!

Instead of debugging the Javascript code we write, I am very much interested in how to debug or to be more precise, how to step into some source code of Javascript libraries like p5.js, ml5.js in order to understand how some functions behave in those libraries. How could I achieve this?

In order to step from my own Javascript codes into some functions in P5.js library for example, should the P5.js library avoid to be minified files? (do open source Javascript library sometimes refuse to provide non-minified source codes?) Do you have any post related on these? Thank you very much!

1 Like

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!

This approach you recommended is to take a piece of source code out of the library, into a simple example of Javascript that we write, and then the debugging skills your post introduced can be applied. That’s a clever workaround! Thanks!

This is super encouraging! Does it mean minified code is exactly the same code only put into a single line? I am a beginner to Javascript (intermediate in Python), do I need any specialized tool to read minified file and find the pieces of source codes I need?

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?


update

I just tried to try to debug a simpler Javascript file hosted in p5.js web editor. The sketch.js file is here is the file I want to debug, However, I can’t find such file inside developer debugging tools page. see below

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.

1 Like

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!

1 Like

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.

1 Like