Develop Reference

Lightning script error in Chrome and Firefox but not in IE

I'm so used to having things work in Chrome and Firefox and then having to be fixed in IE that this has me well and truly stumped.
I'm trying to get DataTables to work within a Lightning component and keep getting this error: Uncaught TypeError: Failed to construct 'Option': Please use the 'new' operator, this DOM object constructor cannot be called as a function. As you can see here:
A mate at work suggested I try it in IE and it all works fine:
So I guess my question has multiple parts, not only do I need to understand why it fails in Chrome (and Firefox, because it errors there as well) and how I might correct it, but I'd also really like to understand what's going on within Lightning for this to happen as it seems as though the culprit is aura_prod.js but I've checked the script in both environments and it's the same in each...
Any help greatly appreciated.
EDIT
Quite rightly it has been pointed out that I haven't included any code, I guess the reason I didn't is because it's trivial:
$("#example").DataTable();
which is called after the table has been generated as a static table.

"Object doesn't support property or method 'getAttribute'"

I'm working with Dynamics CRM 2011 Online and trying to refactor some code that works on the Quote > Add Product page to also work on Order > Add Product. The problem is that when the page loads I get the error "Unable to get property 'getValue' of undefined or null reference."
I went into the IE console (tried both IE 9 and 10) and typed in what I believed to be the offending line:
Xrm.Page.getAttribute('ati_clin').getValue()
It complains with "Object doesn't support property or method 'getAttribute'". I also tried
document.getElementById('ati_clin')
but that too fails.
This doesn't make sense to me because I can use the HTML view of the developer console to find the object on the page and it's clearly there (no typo too). It also doesn't make sense that this statement fails in the console on both pages even though one of the pages runs properly at runtime and the other doesn't. Shouldn't it at least work on the page that does work at runtime?
After doing some research I think the following posting is the most relevant but I'm afraid it doesn't lead me to an answer seeing as how new I am to this: Xrm.Page.data is null
My question is why does the console return this error if the element clearly exists?

A handy trick when debugging a problem like this:
The Xrm.Page object lives in the context of a frame. If you want to use console in IE Developer tools without having to break in debug mode, you first have to point to the frame on the page.
Example:
frames[0].Xrm.Page.getAttribute('ati_clin').getValue()

Verbose Error reporting in iPhone Safari?

So we have a large JS web-app running on our server, whose majority audience are running it off mobile browsers - mostly Safari on Iphones. JS errors are caught using Airbrake Error Catcher. However, investigating live bugs that appear via Airbrake is frustrating due to Safari truncating its error messages. What outputs as this on desktop browsers:
TypeError: 'undefined' is not an object (evaluating 'blah.currency_symbol')
appears as below on Safari iPhone:
'undefined' is not an object
So unless I know how or where to reproduce the error, I've no way of knowing what's going wrong & where.
Long story short - is there anyway of capturing more verbose error information from Safari iPhone? I tested using try/catch but the object still only returned the truncated message.
(apologies if this has been asked before, no searches seemed to yield answers)

Hmmm, no responses but I think from my own further tests the answer might be an insurmountable 'no' - I did the simplest test I could think of, binding to the error object and capturing the error response in the callback. It seems that the truncated error (e.message) is the main form of the response iOS Safari uses, and even other standard values in the object - such as filename or linenumber - aren't being set at all. Seems like before the object is even passed back to the console Safari truncates it 'helpfully' :(

Javascript + Firebug console.log(), how to not get exceptions?

I'm writing a javascript / HTML5 canvas library to provide basic GUI elements for web audio applications.
There's a little demo script that creates widgets with the library and assemble them in a GUI. You can find it # http://bitterspring.net/webshifter/
The problem is, it seems to work correctly on Chrome and on Firefox 3.6 - 4.0 but, in the last cases, only with firebug. Without firebug, the script seems to visualize nothing on screen, while with firebug it does.
The only firebug-related pieces of code are some console.log statement I use to track the behaviour of the library. But these statements should have no effect on a non-firebug enabled browser, as I learnt from Firebug forums. What can prevent the example script to work, in these cases?
The library + example code is freshly committed on http://github.com/janesconference/KievII , by the way.
EDIT: Seems that, when console is not defined, console.log() throws an exception. Is there a way to keep the logging lines of code and not getting the exception? (yeah, one could check if console != undefined, but is there a better way?)
EDIT: This does the trick, it seems (Font)
if (typeof console=="undefined"){console={log:function(A){var B=false;if(B){alert(A)}}}}

Right, the console object is not available in all browsers by default.
This code:
if (typeof console=="undefined"){console={log:function(A){var B=false;if(B){alert(A)}}}}
- currently disables console support in Firefox 4's Web Console, since it tries to inject the console object when opened and won't do that if the page already defined a console object.
An interesting wrapper for console that deals with this problem is: http://benalman.com/projects/javascript-debug-console-log/ , although I haven't tried it myself.

Finding Parse Errors in Javascript

Is there an easy way to find parse errors in javascript code?
Last week I was debugging a javascript problem where the first javascript function that was called gave an 'object expected' error. I later determined that this was because the browser wasn't able to parse my javascript code. I eventually solved the problem but it was a painful process that involved pouring over my code line by line, trying to find my mistake.
There must be an easier way.

Use a tool like Jslint or an alternative browser.
Until recently, IE was the only browser that did not have built in development assistance. Other browsers will a) not come to a grinding halt on the first error they encounter, and b) tell you what and where the problem in your code is.
My favorite "quick ad easy" way to test IE syntax problems is to load the page up in Opera. It parses code like IE but will give you meaningful error messages.
I'll clarify with an example:
var foo = {
prop1 : 'value',
prop2 : 'value',
prop2 : 'value', // <-- the problem
};
If I remember correctly: In IE6 and IE7 the code will break because IE demands leaving the last comma out. The parser throws a fit and the browser simply stops. It may alert some errors but the line numbers (or even filenames) will not be reliable. Firefox and Safari, however, simply ignore the comma. Opera runs the code, but will print an error on the console indicating line number (and more).
Easiest way to write JavaScript is with Firefox + Firebug. Test with IE and have Opera tell you what is breaking when it does.

What browser are you using? IE8 has great build-in feature to debug javascript, for Firefox, Firebug is great.

Checking that the values passed into functions are correct and throwing your own errors if they aren't will help you track down problems faster.
Safari 4 (which runs on both Mac OS X and Windows) comes with some development tools (including a debugger) that are very useful. If you prefer using Firefox, Firebug provides similar functionality.
JSLint can help you track down simple errors.
Steve