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
Asked
Active
Viewed 690 times
0
-
Check [what are good techniques...]( http://stackoverflow.com/questions/5927249/what-are-some-good-techniques-at-debugging-javascript?rq=1) and some others Qs about debugging. – Anto Jurković Nov 15 '13 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 Nov 15 '13 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 Nov 15 '13 at 21:26
1 Answers
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.
Lee Kowalkowski
- 11,591
- 3
- 40
- 46