Develop Reference

How to throw a javascript error during runtime via browser (Chrome)?

My objective: Test out my error handling functionality.
Temporary solution: Have a custom route: /error, which contains code which purposefully produces fatal error.
var a = undefined;
a.b.c // Breaks.
The above works, but I can't use it to test production site as the page is not required.
I was looking for a way to test it via the browser. I tried simply adding"
throw new Error("Custom error thrown here") to the console. That doesn't actually break it during runtime.
I tried adding a break point and adding the same code: throw new Error("Custom error thrown here"). That didn't work either.
Any other easier ways to do this rather than the above?
I was looking for a way where I can do it via browser only.
Thanks.

You did not clearly mention how and where the error should be thrown. I will assume that you can use a modified copy of your JavaScript file to throw errors. The modified file will reside on your computer and only be used when you're using Chrome developer tools. This feature is called Local Overrides. The steps are as follows:
Open the webpage
Open Chrome developer tools for that webpage
In Sources panel go to Overrides tab
Click Select folder for overrides and choose a folder on your computer
A warning appears on the webpage which reads "DevTools requests full access to ..." which you must allow
In Sources panel go to Page tab
Locate the file in which you need to inject the "throw error" code
Right click and choose Save for overrides
Now you can edit the copy of the file on your computer or from within developer tools. Insert the code that produces the error at the desired location. When you reload the page with developer tools open, Chrome will load the local copy of the JavaScript file and throw the error. The error thrown that way will contain the context from where it originated e.g. call stack. If the developer tools are closed then live copy will be used.

If I got your question right, this is How you can do it from the console:
var script_tag = document.createElement('script');
script_tag.type = 'text/javascript';
script_tag.text = 'throw new Error("Custom error thrown here")';
document.body.appendChild(script_tag);
Or if you want you can trigger it on click:
var script_tag = document.createElement('script');
script_tag.type = 'text/javascript';
script_tag.text = 'window.document.onclick = function() { throw new Error("Custom error thrown here")}';
document.body.appendChild(script_tag);
And then you click anywhere on the page, to throw the error;

I would use the exec function which actually takes string and runs the code within at compile time.
exec('a.b.c')

You won't be able to throw an error inside your application from the console, since you are out of scope of the app.
Having said that, one slightly awkward way you could do this is by adding a breakpoint at the start of the javascript file.
Reload the page and your app will pause at the breakpoint - you can then modify the code as you need - like adding a throw new Error("something...") - and save your edits.
Then allow the code to run and you will see your error.
A downside is if you reload the changes will be gone, but I believe it's as close as you can get to modifying code at runtime.

Add this code to your production code
window.addEventListener('err', () => {
throw new Error('break it');
})
and when you want to create an error simply
dispatchEvent(new Event('err'))
in the console

You can use a global variable, which is accessible from your app and from debug console.
if (window.shouldThrow) {
throw new Error("Custom error thrown here");
}
This way you can turn on/off the exception throwing using the window.shouldThrow variable.

Try this way to catch error detail on run time
try
{
var a = undefined;
a.b.c // Breaks.
}
catch ( e )
{
alert("Error: " + e.description );
}

Internet Explorer - Syntax Error - AngularJS

I am working on a web site using angularJS. The project is made on Visual Studio so the server is IIS.
When using Chrome, everything is working fine. But my boss wants also this site to work fine with Internet Explorer 11, in case of some clients are only using this browser.
The problem is that i have an error at an unexpected place when is use IE, for example :
Syntax Error : Caractère Incorrect ( that's french, it means Invalid character )
at getConnectedUser (http://localhost:54579/mypath/myfile.js:121:13)*
And if i open this file at line 121
vm.connectedUser = JSON.parse($cookies.get("userLogged"))
and the 13th character is the v from vm ( since i have some tabs )
the wole function is :
function getConnectedUser() {
vm.connectedUser = JSON.parse($cookies.get("userLogged"))
}
Which is quite normal according to me...
I don't know how to solve this, since the error does not seem to come from the code but from the interpretation of my browser.
I have read that some keywords were not supported to declare variables, like const. I use "let" to declare my variables and it is supported by IE 11 according to this site
EDIT : i also use "var" ( for example : var vm = this )
It would be very helpful if you have some ideas to find a solution.
Thanks for reading,
Sonny

So
I tried to apply what you guys asked, here is what i've got :
The problem actually comes from my cookies, IE can't read it correctly, I get undefined when trying to log my cookie's type, instead of getting "string".
So i went to a different part of the projet, where this cookie is created.
I try to log the cookie just after it is created so it can't be alterated:
var myObject = { "value" : "sonny" }
var stringified = JSON.stringify(myObject) // myObject is validated by jsonlint.com
try {
$cookies.put("userLogged", stringified, {})
console.log("ok")
}
catch (error) {
console.log(error)
}
// i got "ok" in logs , the try part is successful
console.log("fresh cookie : ")
console.log(typeof $cookies.get("userLogged"))
// On Chrome Console : string
// On Ie Console : undefined
console.log(typeof JSON.parse($cookies.get("userLogged")))
// On Chrome Console : object
// On Ie Console: Not logged , i have the Syntax Error Message
So the problem seems to be that IE can't read the cookie i just set before.
Using IE developers tools , i can see the cookie line :
Value : %7B%22value%22%3A%22sonny%22%7D
each special character ( '{', '"' and '}' ) is replaced by "%7B" , "%22" and "%7D"... It is exactly the same with chrome developers tools so i don't think it should be a problem.
Can IE actually read cookies using angular and ngCookies ?

As everyone mentioned in comments.
It is difficult to solve the issue with information provided.
So the best option could be using IE developer tools and debug your application.
Here is how I can troubleshoot the issue.
function getConnectedUser() {
// forces browser to stop at below line
debugger;
var loginInfo = $cookies.get("userLogged"); //put a debug point
// check for loginInfo existence and typeof loginInfo should be string
if (loginInfo && typeof loginInfo === 'string'){
vm.connectedUser = JSON.parse(loginInfo);
}
}
Put a break point in the getConnectedUser function
Check the value of $cookies.get("userLogged"), whether it is returning data or not
yes => check the type of data. It must be a valid JSON string format.
No => do the corresponding actions

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

gDBView is not defined and xul

I'm trying to write a Thunderbird extension using XUL, a custom button that accesses the currently shown email message body and does something with it.
Apparently this would be possible using the global variable gDBView, as in the Display Mail User Agent extension:
var msgURI = null ;
if ( gDBView )
{
msgURI = gDBView.URIForFirstSelectedMessage ;
}
if ( msgURI == null )
{
return ;
}
var messenger = Components.classes["#mozilla.org/messenger;1"].createInstance (Components.interfaces.nsIMessenger ) ;
var msgService = messenger.messageServiceFromURI ( msgURI ) ;
Unfortunately if in my extension I replicate the row:
msgURI = gDBView.URIForFirstSelectedMessage ;
I get the following error from the Thunderbird console:
gDBView is not defined
Is there a reason why this happens? And is this the best (and correct) way to access a mail body?

You're probably running your script in the wrong context, as Wladimir correctly guessed. An easy way to check that gDBView exists is, in the menus, to hit Tools > Error Console, then paste top.opener.gDBView, then hit Enter. This returns (for me) [xpconnect wrapped (nsISupports, nsIMsgDBView, nsITreeView)] which means the object indeed does exist.

Firebug not showing Javascript errors for Rails applications

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.