JavaScript beginner, help me fix things using Firebug - javascript

I am trying to become better with JavaScript and I have done a great job at breaking a page really badly :)))))
I am trying to use Firebug to debug, but it is a little confusing at first. Which of its tabs is used to debug JavaScript? I see DOM and Script - which should it be?
My general problem is this page:
http://www.comehike.com/outdoors/trees/add_spotted_trees.php?hike_id=108
I made a login for people:
login: test#comehike.com
password: password
What I was trying to do on that page is to get the "clear all" and "clear last" links to work correctly, but I just created a hit mess :)
What happens now is that markers are placed, but after "clear all" the markers aren't recognized and not put into the "rout_markers" id element.
Any clues on how I can get this resolved or at least heading in the right direction?
Much appreciated!

You need to be watching the Console tab for errors and warnings. For instance, you have two I've seen:
On page load:
YUI is not defined
http://www.comehike.com/outdoors/trees/add_spotted_trees.php?hike_id=108
Line 256
After logging in and clicking Remove All Markers:
markers[array_length - 1] is undefined
http://www.comehike.com/outdoors/trees/add_spotted_trees.php?hike_id=108
Line 322
Also, instead of using alert() to test, you can use console.log(), which will print to the console. Just remember to remove these before going live.
In addition, you may want to check out some videos:
http://www.virtuosimedia.com/dev/javascript/15-essential-javascript-video-tutorials
And go through some tutorials:
http://www.softwareishard.com/blog/category/firebug-tutorial/
EDIT
Following my comment, here is what I have done to combat the console.log() conundrum:
try{console.log();}catch(e){var console=new Object;console={log:function(){ininklklaskjdflk=0;}};};

Just to add to what Jared says, using console.log() is a much more efficient way of debugging that alerting everything. However, if you leave this in and visit the page in a browser that doesn't have a console, it will crash. You can just remove the console.log() calls, or if you are worried about forgetting those, you can just use this little piece of code:
if(window.console && console.log) console.log("Log Something");
All that does is check a console exists before sending something to it. If the console doesn't exist, that if statement will evaluate to false, meaning console.log("Log Something") is never run. If you liked you could also write this like so:
if(window.console && console.log) {
console.log("Log Something");
}
Both mean exactly the same thing.

The script pane lets you look at the source of all the javascript running on the page. And you can setup breakpoints and look at variables....
The Console Pane is probably the most useful.
You use it to see errors and console.log statements (from Jack Franklin's Post). You can also run javascript from a "command line" to test it on the page.

Related

When I typed console.log to my browser, why does Google Chrome not showing me the result?

I'm a blind learner. I want to test an expression like
console.log(1 + 2);
function myFunction() {
var a = 1 + 2;
}
console.log(myFunction());
But it is not showing me anything (not even errors).
I don't know if that is an accessibility issue.
My browser is up-to-date.
Any help will be greatly accepted.
Google Chrome does not make it easy for a visually impaired person to see the result of a console.log() statement in their Developer Tools Console.
I used NVDA in my experiments. Your experience in other screen readers may be different.
I entered console.log(1+2) and pressed Enter.
I pressed Shift+Tab.
This read "undefined", as that is the return value of console.log().
I pressed Left Arrow once.
This read "three".
I can't imagine the experience of reading anything more complex would be. Good luck.
Navigating and using developer tools is difficult at first with a screen reader, but it doesn't take long to get used to it.
First, have a read of this document from Google on devtools shortcuts you will find there are loads of shortcuts that you can use. This makes it easy to get used to navigating the console.
How to navigate in your example.
What is confusing when you are not used to it is that the text that is logged to the console is attached to the line and character declaration (so for example it may read "VM50:1 3", explained below)
So in your example above you navigate to the previous item (shift + Tab) to get undefined as that is still what console.log(1+2) will return.
Then if you press the Up arrow it will focus a link and announce "link vm50:1 3" where "link vm50:1" is line and character number and "3" is the answer.
An easier way to understand this is to log some words to the console instead, if you log "I like cheese, it is yummy" you will get something like "VM50:1 I like cheese, it is yummy"
One thing that can be confusing is when you get an error that results in a stack trace (as we are reading from the bottom to the top). For that I tend to spam the up arrow until I don't hear "at" and get a script name as that will announce the error as well.
Finally try navigating via links (Shift + K in NVDA) as that can also be a quick way to get to errors (although can be confusing if you get a stack trace as above).

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.

Is there any chance to find source of javascript alert?

I'm working in a large project that was developed for several years and had tons of code. Recently uninformative alert start to appear. It just says Undefined. I need to find the source of this alert. Is the any chance to make something like "breakpoint on alert"? I want to see the source of this alert.
One possibility is to redefine alert function. I tried to make it in firefox without any success.
I'd go with redefining window.alert right at the start of the code for this type of development purposes.
window.alert = function(e){ console.warn( "Alerted: " + e ); }
This will give You a line number for sure. ( Tested on chrome console )
This is an old question, but thought I would help out with a simpler solution. A very easy way in Chrome to find the source is by placing a debug in the console on window.alert:
debug(window.alert)
This will break on alert and take you to the source. In general, using console with debug(fname) will break whenever the function fname is called.
As a continuation to Vsevolod's method, in FireBug over Firefox for example, you could place one conditional breakpoint on each and every alert(), and see which one fires off, then go up the callstack shown by FireBug.
The condition could be "typeof whatever_variable_is_displayed == 'undefined'".

How can you debug JavaScript which hangs the browser?

I'm working on a substantially large rich web page JavaScript application. For some reason a recent change is causing it to randomly hang the browser.
How can I narrow down where the problem is? Since the browser becomes unresponsive, I don't see any errors and can't Break on next using FireBug.
Instead of commenting the hell out of your code, you should use a debug console log.
You should use the console.log() functionality provided by most modern browsers, or emulate it if you use a browser that doesn't support it.
Every time you call console.log('sometext'), a log entry in the debug console of your browser will be created with your specified text, usually followed by the actual time.
You should set a log entry before every critical part of your application flow, then more and more until you find down what log isn't being called. That means the code before that log is hanging the browser.
You can also write your own personal log function with added functionalities, for example the state of some particular variable, or an object containing a more detailed aspect of your program flow, etc.
Example
console.log('step 1');
while(1) {}
console.log('step 2');
The infinite loop will halt the program, but you will still be able to see the console log with the program flow recorded until before the program halted.
So in this example you won't see "step 2" in the console log, but you will see "step 1". This means the program halted between step 1 and step 2.
You can then add additional console log in the code between the two steps to search deeply for the problem, until you find it.
I'm surprised this hasn't been properly answered yet, and the most voted answer is basically "put console logs everywhere until you figure it out" which isn't really a solution, especially with larger applications, unless you really want to spend all your time copy-pasting "console log".
Anyways, all you need is debugger; someone already mentioned this but didn't really explain how it could be used:
In chrome (and most other browsers), debugger; will halt execution, take you to the dev console, and show you the currently executing code on the left and the stack trace on the right. At the top right of the console there are some arrow like buttons. The first one is "resume script execution". The one we want is the next one "step over next function call".
Basically, all you need to do is put a debugger anywhere in your code, at a point where you know the page hasn't frozen yet, and then run it, and repeatedly click "step over next function call" which looks like an arrow jumping over a circle. It will go line by line, call by call, through the execution of your script until it hangs/gets stuck in an infinite loop. At this point, you will be able to see exactly where your code gets stuck, as well as all the variables/values currently in scope, which should help you understand why the script is stuck.
I was just racking my brain trying to find a hanging loop in some rather complex JS I'm working on, and I managed to find it in about 30 seconds using this method.
You can add debugger; anywhere in your JS code to set a breakpoint manually. It will pause execution and allow you to resume/inspect the code (Firebug/FF).
Firebug Wiki page: http://getfirebug.com/wiki/index.php/Debugger;_keyword
Todays browsers Firefox/Seamonkey (Ctrl-Shift-I / Debugger / PAUSE-Icon), Chrome, ... usually have a builtin JS debugger with PAUSE button which works any time. Simply hit that when on a looping / CPU-intensive page, and most likely the "Call Stack" kind of pane will point you to the problem - ready for further inspection ...
To isolate the problem you could start by removing/disabling/commenting different sections of your code until you have narrowed down the code to a small part which will allow you to find the error. Another possibility is to look at your source control check-in history for the different changes that have recently been committed. Hopefully you will understand where the problem comes from.
Install Google Chrome, go to your page, press f12 and the developer console will popup. Then select the Scripts button, then select your script (ex: myScript.js) from the dropdown in the top-left of the console. Then click on the first line (or a line where you think don't hangs) and a break-point will be made. After the javascript reaches your break-point click on one of the buttons of the top-right of the console (you will see a button like Pause symbol and then other 4 button). Press on the 2º button (or the button after pause to step over) or the 3º button (step in). Mouse over the buttons and they will explain to you what they mean.
Then you will go in your code like this until it hangs and then you can debug it better.
Google Chrome debugger is far better than firebug and faster. I made the change from firebug and this is really great! ;)
I know it's primitive, but I like to sprinkle my js code with 'alert's to see how far my code is going before a problem occurs. If alert windows are too annoying, you might setup a textarea to which you can append logs:
<textarea id='txtLog' ...></textarea>
<script>
...
function log(str) {
$('#txtLog').append(str + '\n');
}
log("some message, like 'Executing Step #2'...");
...
</script>
In my experience, issues which cause the browser to become unresponsive are usually infinite loops or the suchlike.
As a start point, investigate your loops for silly things like not incrementing something you later rely on.
As an earlier poster said, other than that, comment out bits of code to isolate the issue. You 'could' use a divide and conquer methodology and near literally comment out half the pages JS, if it worked with a different error, you've probably found the right bit!.
Then split that in half, etc etc until you find the culprit.
I think you can Use Console Log like this
console.log(new Date() + " started Function Name or block of lines from # to #");
// functions or few lines of code
console.log(new Date() + " finished Function Name or block of lines from # to #")
By the end of running your webpage, you can identify the area that take so much time during executions, b
Besides using manual log output and the debugger it might sometimes be helpful to log each and every function call to track down where the loop occurs. Following snippet from Adding console.log to every function automatically might come in handy to do so ...
function augment(withFn) {
var name, fn;
for (name in window) {
fn = window[name];
if (typeof fn === 'function') {
window[name] = (function(name, fn) {
var args = arguments;
return function() {
withFn.apply(this, args);
return fn.apply(this, arguments);
}
})(name, fn);
}
}
}
augment(function(name, fn) {
console.log("calling " + name);
});
I know this question is old, but in VS2013 and you can press the pause button and get a full JS stack trace. This was driving me crazy because the loop was inside angular, so I couldn't really put in alerts, break points, etc. because I had no idea where to put them. I don't know if it works with the free express edition, but it's worth a shot.
I've also read that Chrome has a pause function, so that could be an option, but I haven't tried it myself.
I ran into same problem and that's how I resolved it.
Check Console for errors and fix them
Some time console even is hanging
Check for all the loops if the one is infinite
Check for recursive code
Check for the code which is dynamically adding elements to document
Use break points in your console
Use some console logging i.e log the suspected code blocks
Something I don't really see in these answers is that you can do e.g.:
let start;
let end;
//This would represent your application loop.
while (true) {
start = performance.now();
//Loop code.
//...
end = performance.now();
//Measured in ms.
if (end - start > 1000) {
//Application is lagging! Etc.
}
}
In this manner, you can perhaps detect when your application is starting to perform poorly etc.
https://developer.mozilla.org/en-US/docs/Web/API/Performance/now

Javascript: Unresponsive script error

I get an error message from Firefox "Unresponsive script". This error is due to some javascript I added to my page.
I was wondering if the unresponsiveness are caused exclusively by code loops (function calling each other cyclically or endless "for loops") or there might be other causes ?
Could you help me to debug these kind of errors ?
thanks
One way to avoid this is to wrap your poor performant piece of code with a timeout like this:
setTimeout(function() {
// <YOUR TIME CONSUMING OPERATION GOES HERE>
}, 0);
This is not a bullet proof solution, but it can solve the issue in some cases.
According to the Mozzila Knoledgebase:
When JavaScript code runs for longer than a predefined amount of time, Firefox will display a dialog that says Warning: Unresponsive Script. This time is given by the settings dom.max_script_run_time and dom.max_chrome_script_run_time. Increasing the values of those settings will cause the warning to appear less often, but will defeat the purpose: to inform you of a problem with an extension or web site so you can stop the runaway script.
Furthermore:
Finding the source of the problem
To determine what script is running too long, click the Stop Script button on the warning dialog, then go to Tools | Error Console. The most recent errors in the Error Console should identify the script causing the problem.
Checking the error console should make it pretty obvious what part of your javascript is causing the issue. From there, either remove the offending piece of code or change it in such a way that it won't be as resource intensive.
EDIT: As mentioned in the comments to the author of the topic, Firebug is highly recommended for debugging problems with javascript. Jonathan Snook has a useful video on using breakpoints to debug complex pieces of javascript.
We need to follow these steps to stop script in Firefox.
Step 1
Launch Mozilla Firefox.
Step 2
Click anywhere in the address bar at the top of the Firefox window, to highlight the entire field.
Step 3
Type "about:config" (omit the quotes here and throughout) and press "Enter." A "This might void your warranty!" warning message may come up; if it does, click the "I'll be careful, I promise!" button to open the page that contains all Firefox settings.
Step 4
Click once in the "Search" box at the top of the page and type "dom.max_script_run_time". The setting is located and displayed; it has a default value of 10.
Step 5
Double-click the setting to open the Enter Integer Value window.
Step 6
Type "0" and click "OK" to set the value to zero. Firefox scripts now run indefinitely, and will not throw any script errors.
Step 7
Restart Mozilla Firefox.
Excellent solution in this question: How can I give control back (briefly) to the browser during intensive JavaScript processing?, by using the Async jQuery Plugin. I had a similar problem and solved it by changing my $.each for $.eachAsync
there could be an infinite loop somewhere in the code
start by commenting out codes to identify which section is causing it
too many loops: there might be a chance that your counter variable name clashes, causing the variable to keep resetting, causing the infinite loop.
try as much as possible to create hashes for your objects so much so that read time is O(1) and in a way caching those data
avoid using js libs as some of the methods might cause overheads. eg. .htm() vs .innerHTML
setTimeout() yes and no -- depends on how you chunkify your codes

Categories