CODEWITHSUNDEEP
javascriptdebugging
eded
eded

Reputation: 3948

techniques of debugging large piece of javascript code

Recently, I have a chance to work on a project contains some large javascript files. I would say 4000-5000 lines per file. For example, there are 3 big files(custom plugin) build on top of each other. I got a debug task that needs to resolve(logically and it is not a js error). when I tried to debug and understand the logic under chrome dev tool such as step through or tracing where the variable came from and goes, I always get lost at some point because the files are so big. I thought maybe I need to sit down for 1 or 2 day to read through all the files and draw the logic on the paper, I guess that may be not a good solution. I wonder if there is any technique that I missed for debugging and tracing the variables or the logic. please share your experience with me. thanks

Upvotes: 0

Views: 764

Answers (1)

Lee Kowalkowski
Lee Kowalkowski

Reputation: 11751

Sometimes when I look at something like that, I start by creating a test. Try to test only the defect. Take a working copy and try to reduce it down until you have isolated the problem.

Good luck!

Specifically, for advanced step-debugging, there is:

  • using the call stack to inspect the local variables from the calling scope without having to step out of the function.

  • using conditional breakpoints.

https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

If your JavaScript is making a lot of HTTP requests, it might also be useful to use the network tab to check the requests and responses are as expected.

Upvotes: 2

Related Questions