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)
|
<![CDATA[ <td> th
</table>
<!p><!td colspan=33><table border=1 id="App_Speciality" >]]>
|
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.
|
<![CDATA[</td><td> th
</td></tr></tbody></table>
<!--p--><!--td colspan=33--><table style="display: inline;" id="App_Speciality" border="1">]]>
|
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.
- document.write("any text")
- document.writeln("any text")
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
- Create a "debug" component - anything with begin and end tags
- Add the debug notes to its innerHTML
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