Firebug not showing Javascript errors for Rails applications - javascript

I have a Rails application, and when I have Javascript errors they are not showing in the Firebug console. I have 'Show javascript errors' and 'Show javascript warnings' selected.
When I insert javascript errors in a basic html file, the errors show as expected.
In the javascript of the Rails app, it only shows errors in rare cases.
For example i can insert nonsense like:
dfghaefb;
and no error is shown in Firebug. But if i insert a space in there Firebug does show the error:
dfgh aefb;
Any ideas? This is driving me nuts.
UPDATE:
Pumbaa80 was right, it's syntax vs runtime.
So I set up onerror:
onerror=errorHandler;
var error="";
function errorHandler(errMessage,url,line){
error="There is an error at this page.\n";
error+="Error: " + errMessage+ "\n";
error+="URL: " + url + "\n";
error+="Line: " + line + "\n\n";
error+="Click OK to continue viewing this page,\n";
alert(error);
return true;
}
And I have a method with an error:
function initForm() {
asdfs;
}
And it works when I call it outside of a method:
initForm();
but not in this case:
document.observe('dom:loaded', function() {
initForm();
});
Why is that?

dfghaefb;
produces a run-time error. Those errors may be suppressed by putting an onerror handler on the window or by trapping them in a try/catch in some way. In that case, Firebug won't show anything.
In contrast,
dfgh aefb;
is a syntax error, which is shown in the error console, regardless of try/catch and onerror.

Did you let the page load completely? I have a rails app running in front of me right now with firebug on and i entered dfghaefb; and yes it does throw an error!
ReferenceError: dfghaefb is not defined { message="dfghaefb is not defined", more...}
Running Firefox 3.6.3, Firebug 1.5.3 and MacOSX 10.5.6 :)

This may appear to be obvious, but be sure you wrap your inline JS using
<script type="text/javascript"> code </script>
Otherwise FireBug won't look at it at all.

I had the same, it wasn't showing anything and it was driving me crazy for ages, even if i had "Show javascript errors" in the console tab selected, it seems that it started working after I did "Enable all panels".

These kinds of problems cannot be answered without a test case.

Related

JavaScript code runs perfectly in FireFox console and not in Eclipse

I run test scripts using Selenium JUnit in Eclipse. Now when I add the following JS code into my Java file, test case stops with error "selenium.JavascriptException: TypeError: document.querySelector(...) is null"
Script works fine in FireFox console.
I'm new in JavaScript and I would be grateful if anyone can help me with this issue.
if (driver instanceof JavascriptExecutor) {
((JavascriptExecutor)driver).executeScript(""
+ "some other code that works fine"
+ "var rtxt= document.querySelector('#CSS__RichHtmlField_displayContent');"
+ "rtxt.textContent= '​JavaScript testScript to testCase';");
} else {
throw new IllegalStateException("This driver does not support JavaScript!");
}
It could be that Firefox waits for the page and information to load before running the script and checking a value. In a Java implementation I think you need to wait before checking values, otherwise you get errors for that things don't exist / haven't loaded yet.
http://www.seleniumhq.org/docs/04_webdriver_advanced.jsp

How to catch all javascript warnings and errors to an output div?

i'm using try, catch, for debugging, but warnings is not create exceptions. How to get all javascript warnings and errors to output div?
UPDATED:
If browser supports Afaik logging, how to get that log to string or output div?
UPDATED:
I found the way how to do that:
i can reload console.log function to my custom function an call native console.log function.
First of all, get rid of the try catch. Don't use try catch when you are debugging.
Second, you don't want to out errors to a div, use firebug or inspector for that - console.log();
Third, if you really want to do it: you could use try catch and in the catch, use something like
$('body').append($('div').html('variable for error message goes here'));
if you are using jquery
OR
document.getElementByTagName("body").appendChild( document.createTextNode("variable for error message goes here") );
if you have plain javascript
EDIT: try looking up ie debug bar , ie webDeveloper
I understand myself why someone may want something to actually happen when an error occours in the document. The answers above just say that you would use developer tools, but I needed things to actually happen, and after some searching, here's what I found...
If you wish to catch all errors that come through, you can put the following code into your file, best at the top:
window.onerror = function(errorMsg, url, lineNumber){
// any action you want goes here
// errorMsg is the error message itself.
// url should be the file presenting the error, though i have
// found that it only presents to me the address of the site.
// lineNumber is the line number the error occoured on.
// here is an example of what you could do with it:
alert("Error in " + url + " at " + lineNumber + ":\n" + errorMsg);
}
I, myself, like to output the errors to a div that contains them all, though you can do literally anything to this information that you could do with any other string passed to a function.
Here is an example of what may happen if you throw an error with a button using the code above:
Error in your.site.here at 1:
Uncaught ReferenceError: foo is not defined
For IE javascript debugging you can follow this guide:
http://msdn.microsoft.com/en-au/library/ie/gg699336(v=vs.85).aspx
Keep in mind that the developer tools window must be open prior to loading the page for the warnings and errors to appear in the console.
For webkit, (chrome, safari) developer console - here is a guide:
https://developers.google.com/chrome-developer-tools/docs/console
...Firefox also has a console

Javascript function not defined in FireFox only - indeed_clk is not defined

I'm at a loss to figure out why a JavaScript function is not defined.
It works on all browsers, and all versions of FireFox on my dev machine. But the error occurs for some users running FireFox.
The external JavaScript include file is provided by Indeed.com.
The include file that contains the function definition (indeed_clk) is
<script type="text/javascript" src="http://www.indeed.com/ads/apiresults.js"></script>
This line appears immediately after the head elememt
Further down the page, the indeed_clk function is referenced using the following pattern
<a onmousedown = "indeed_clk(this,'7832');" href="landing page..." >Click to view</a>
The error message is "indeed_clk is not defined"
A sample page that demonstrates the rendered html and Javascript code is
http://www.contractsforgeeks.com/TechJobs/All_States/All_Cities.aspx
Any suggestions as to why the function would not be defined in FF, and not work only for certain machine configurations would be appreciated.
Try changing:
indeed_clk(this,'7832')
To:
indeed_clk(this,'7832');"
I found a solution/workaround to the problem, but still don't understand why the error occurs.
It seems that the presence of an error Handler causes an error (but only in FF for some users)
An error handler was hooked up
(document).ready ( errorHandling);
function errorHandling()
{
window.onerror = function (message, url, line) {
var msg = message + "\n" + " url:" + url + "\nline:" + line;
alert(msg);
}
Disabling the error handling enabled the missing indeed_clk function to be found.

Is there a way to try/catch an entire page dynamically?

I have a page on which mysterious JavaScript errors keep popping up. They appear to be coming from the application we use and do not own the source for. I'm working on a real solution to this issue, but we have a demo tomorrow and I was wondering if there is a way to just suppress JS errors page wide (like wrapping ALL the javascript components in a giant try catch).
You could add a handler to the window.onerror event. In this case, all the errors that occur inside the window will be redirected to the handler of this event. (I did test this in Firefox and it worked, but I was having trouble with it in Chrome - my Chrome installation is pretty messed up, so that could be the problem, but there are Chromium bugs filed that relate to this issue: bug #7771 and bug #8939)
window.onerror = function (msg, url, line) {
alert("Error on line " + line + " in " + url + ":\n" + msg);
// return true to prevent browser from displaying error
return true;
}

Problem using window.location in a function called from onsubmit

I'm currently creating a very small form on my homepage using HTML and JavaScript. I've run into a problem I'm pretty sure I could circumvent somehow (probably in a pretty ugly way though), but I got interested in why this error appears.
I have a form on my page which I specify in the following way:
<FORM name="form1" onsubmit="submitTheScript()">
The function "submitTheScript()" is placed in the header and reads:
setCookie("F_GivenSum", GivenSum);
window.location="LastScreen.html";
"setCookie()" is a function that basically just, well, creates a cookie :).
Now, the problem arises with the last line of code. I'm trying to send the user to another page, after the cookie has been set (I'm doing some controls that the input value is alright, but I've skipped that part here) but FireFox gives me the following error:
uncaught exception: [Exception... "Cannot modify properties of a WrappedNative" nsresult: "0x80570034 (NS_ERROR_XPC_CANT_MODIFY_PROP_ON_WN)" location: "JS frame :: chrome://global/content/bindings/autocomplete.xml :: onxblpopuphiding :: line 827" data: no]
I guess I can't call this function the way I do, from within a onsubmit command, however, I don't see why.
Okay, I did a quick test and found out that you need to assign the onsubmit event handler via javascript like so:
document.getElementById("myform").onsubmit = doSubmit;
function doSubmit() {
document.cookie = "F_GivenSum=200";
window.setTimeout(function() {
window.location = ('test2.html');
}, 20);
return false;
}
This did not give any errors in FF.

Categories

Resources