Languages - Javascript
Debug

This is more application debug than just javascript.


I had a serious problem that was hard to track down. Once I had a fix, I was not able to recreate the problem.

Suggestion - always make a backup before tackling a serious problem - ie, Once you have spent half an hour on something, back it up so you can document the fix later.


In Firebird, View source and View selected source do not display the same thing. These 2 examples show the difference - same web page, different results.

View source displays what was typed in the html file (or written there by php or whatever)

View selected source shows all the missing close tags not in the original file. This is extremely useful when checking the scope of div and span tags in a table. When debugging style problems, style="display: inline;" is good to know about. The window title says DOM Source of Selection. Using View selected source, it is not clear how it decides what to display. Some small selections include the entire file and others don't.

In Chrome, and many of the newer browsers, use inspect to open the debug window and see the current styles.


Using the *console* tab

In most modern browsers, to open a debug window, just right click the current page and select something similar to inspect. In IE8, use the menu to select Tools / Developer Tools.

When the debugger is open, you can select the console tab and write debug info there.

You can also create errors (which also display in the console) like this


document.write

These commands should not be used for debug because they replace the contents of the page. In most browsers, the old (original) text will still be available while the new text is being written and useful output will be generated. However, in IE8, the old text is lost as soon as the first document.write executes which results in the program losing access to the other components and a general inability to actually debug anything. I typically get a javascript error on the next line to reference any DOM component!


innerHTML

If you need to display debug information, and the browser does not provide a debug console, the best option is to

I say this is the "best" option - but what I mean is that I first completely debug the app in Chrome (because it has a great debugger) and ONLY THEN use this technique in weaker browsers (like IE8) to trouble shoot various compatibility problems.


Author: Robert Clemenzi
URL: http:// mc-computing.com / Languages / Javascript / Debug.html