Debugging Javascript. Is it possible to stop at the next file? - javascript

I am working with angular.js, and when I have some very, very wierd bugs with angular, I get stuck stepping through debugger hell.
Is there a way to have the Javascript console break on the first line of the next file accessed?
For instance, say I stepped through into angular.js.
Instead of stepping through angular and trying to get to the first line referenced of a next file, say "myFile.js," I would just like to tell the Javascript console to stop once it reaches a line of code from a different file than it is on right now, say, stop once it hits "myFile.js", or stop when it hits a line on anything other than the file "angular.js."
I have not mentioned any specific browser, for the fact that I assume that you may be able to do this with one browser and not the other.
I also understand that I should know my code well enough to know what the next line in the next file referenced should be, but the project I am working with is quite dynamic and it takes a lot of brain-power to figure out which line of which file I will actually hit next (ugh...)

Related

Editing Javascript files on Chrome Developer Console not working

I followed this tutorial on how to get my Javascript changes to save, and my changes are indeed "saved", in that I can see the changes when I reload the website. Despite this, the saved changes are not actually run, and do not seem to even exist in the website's mind, since an error that had occurred on Line XYZ still does, despite the code on Line XYZ being shifted down.
I also saw something about the code not running if it was prettified. I cannot seem to unpretify it though, because the {} thing on the bottom left does not seem to change anything.
reolad the website will reload all js files, so your changes will be lost. If you insert a breakpoint in line 100, and change your code after this line, your change will be executed after you stash js file and resume executing.

How to debug or narrow down logic errors?

I am trying to debug this game I am making. Something is wrong with the for loops and I do not know what it is; essentially I am trying to get my rectangles to spawn on the canvas after the user clicks ready. What are some ways to debug logic errors? Doing this over khanacademy.
When I println the drawRects function. Console says infinite loop and points to my for loops.
When I click ready, the console increases by 1 each time so I know the levelUp function is working.
I cant post another link because not enough rep, but when I println randomRects, nothing appears on the console.
Therefore, I believe it is safe to assume something is wrong with my for loops, because the levelUp function works but the random rectangles are not appearing. What are other debugging techniques I can use to narrow down the problem?
You debug a problem by finding out exactly what the code is doing.
There are a few ways to do that:
Use your head. This is your first line of defense. Run through the code in your head, or better yet with a piece of paper and a pencil. Use some example values for your input, and walk through line by line and see what the code would do. Talk out loud, write stuff down, and do this over and over again. This is a huge part of being a programmer.
Use a console. Processing has a println() function that should go to your JavaScript console in your browser. This is your new best friend. Print out the values of any variables you want to know about, like this:
println("x: " + x);
Or a simple println("here") inside an if statement can tell you whetehr that if statement is executing. Combine this with approach one to really check all of your assumptions.
Use a debugger. If all else fails, step through your code with a debugger. This is basically using a computer to do the first two approaches.
In reality, you'll use a combination of all of the above to debug a problem. But the basic idea is this: you need to understand what your code is doing. You do that by first running through the code in your head or on a piece of paper, and you test any assumptions or anything you aren't sure by printing stuff out.

What would make HTML/JS/PHP source suddenly end/stop while loading?

I've been building a set of mostly HTML and JS functions using Jquery and ajax with PHP backend. For some reason, a page that didn't used to have problems suddenly doesn't load. When I check the document inspector, I find that the code just... stops. Before it ended on a line of HTML. Today, it's in the middle of some JS code (around line 1364).
I had a chunk of JS code commented out that I removed from the code and suddenly it worked... until I brought in some more code from another file and it suddenly stopped again.
What makes HTML code suddenly stop? It's driving me nuts! My code became very fragile.
Check these :
1.does JavaScript has syntax error? (check inspector console)
2.does your PHP has syntax or logic error?(Ex:In CentOS 7,type command#tail -f /var/log/httpd/error_log)
Trouble Shoot
Sometime js do not report error even the program stop.
So, you can add some console.log('test') in your code to find out which line cause js exec stop.
I had to remove most of my code and reinsert it one section at a time. I found a missing tag though I still don't understand why the code responded in such a weird way.

Determining why Firebug won't gray/green lines

I'm tearing my hair out here due to Firebug's seeming propensity to refuse to hit breakpoints in critical sections where it would be really, really helpful to be able to step through the code to help see what is going on. I have read elsewhere that Firebug won't hit a breakpoint if the line number isn't the right color: it used to be green, but lately I notice it seems to be the difference between light gray and dark grey, where light-gray lines are the ones the Firebug won't break on.
I am looking for any suggestions as to how to get Firebug to recognize that it should be able to break on a line. Often it will refuse to honor breakpoints on ten or twenty lines in a row, as if it suddenly got confused parsing a function and just gave up until the function was over. In some cases, simply commenting out one line (and then reloading of course) makes Firebug suddenly recognize the rest of the function, but without any rhyme or reason that I can see, even to the point that simply adding something innocuous like an extra semi-colon makes it go back to not recognizing the lines again. In some cases it seems that do/while loops confuse it, but even in a function without such a loop I am currently having trouble.
I have already tried all the other things I could find in other threads, such as resetting all, restarting the browser, using the latest version, etc.
Update: In one case I was able to get Firebug to recognize lines by changing:
do {
...
} while (condition)
to
while (1) {
...
if (!(condition)) break
}
Firefox 23 / Firebug 1.11.4
Update: It seems that whenever I find a section of code like this, I can get the problem to go away by creating a new empty javascript file (adding a reference in the HTML file) and moving the affected function to that file. Suddenly the lines get greened (it's back to green again now, no idea why...)

Pausing/Breaking execution in javascript for debugging, but only for certain javascript files

Do any browsers support pausing execution / stepping through code, but only for certain files or regions? I'm using jQuery and several other libraries, and I'm not interested in stepping through their code in 99% of cases, as it is my code that is wrong. All my code is in my script file, other libraries are included separately.
If I use the pause button, I tend to find that I am very quickly taken to some part of jquery with code I don't understand or need to understand. If I click the step into button a lot, I sometimes get taken to a point in my script, sometimes not.
I could manually click every single line of my code to add a breakpoint, but this would be extremely tedious, and I couldn't un-pause execution easily. If there is a browser that lets you select multiple lines and add breakpoints to all of them in one click, that would be a great alternative, though.
There are some new features in the Chrome developer tools that can help you get a good entry point into a new code base. Event listener breakpoints will let you pause execution at a given event handler:
Things have changed since I asked the question 5 years ago. Chrome (and possibly other browsers) have an option "Blackbox script". If you find yourself paused inside a library, e.g. jQuery, right click, choose "Blackbox script" and you will automatically skip over all lines in that file when you are stepping through the code in future.
This is what step in/over/out is for. If the program is stopped for debugging, and you're stepping through and see that you're about to descend into a jQuery function (or anything else you want to skip over) you click "step over". If you got into something which you want to get right back out of, you click "step out".
Simply set the breakpoint where you want to begin debugging, and use the step functions from there to control what you're stopping to take a look at.
Put the break points in the desired javascript files and where you want to inspect your code!
Press this will let you skip the jumping to other files and you will be able to continue in the same JS file

Categories