techniques of debugging large piece of javascript code

Question

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

Check [what are good techniques...]( stackoverflow.com/questions/5927249/…) and some others Qs about debugging. — Anto Jurković
– Anto Jurković, Commented Nov 15, 2013 at 21:05
Logging messages to the console that let you know where in the code you are and what the variables look like are always a good starting point. — Joe W
– Joe W, Commented Nov 15, 2013 at 21:10
What kind of problem is it? Can you provide some context, some approaches may be more efficient for certain problems. — Lee Kowalkowski
– Lee Kowalkowski, Commented Nov 15, 2013 at 21:26

Lee Kowalkowski · Accepted Answer · 2013-11-15 21:20:45Z

2

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.

edited Nov 15, 2013 at 21:20

answered Nov 15, 2013 at 21:14

Lee Kowalkowski

11.8k3 gold badges43 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

techniques of debugging large piece of javascript code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related