Microsoft Edge Console error on pasting a variable while debugging - javascript

This may be a basic problem but its getting on my nerves now. I was exploring Microsoft Edge. While debugging, I am pasting a variable in console tab to explore its value and below is the error ('SecurityError') that I see.
I could see the value in watch and all that's not I am looking for. I want to go to console tab to run some functions on the object tp explore more on that part.
Its just annoying. I am unable to get through it. Could anyone help here?
Thanks.

browser.tabs can only be accessed in extension context, such as background page. However, you're calling it in content scripts (I know it from another question), which obviously will get nothing.

Related

How to load Component and its Classes in my website

I am trying to over ride one the notification popups of browser using the following code:
var branch = Components.classes["#mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
But in Mozilla Firefox, I get the error Component.classes is undefined.
And in Chrome Browser, I get the error Component is undefined.
Well I have realised I need to include something in my website. But I am unable to find exactly what is required.
Please anybody help. I googled about it a lot, but I have never used this thing before(the Classes) and I am unable to search what will help me out. i dont even have any idea that what will be the tags for this thing. I have never used Component or its classes
My website is in ZF2.
Components Object is non-standard feature. See https://developer.mozilla.org/en/docs/Components_object.
It also says
Warning: This object is only intended for code running with chrome
privileges. Exposing the object to regular web code was a mistake.

What are the rights ways of debugging javascript?

I made a function called test() in javascript file.Placed a simple alert into it.
In html file, called the method on click of a button. But,it was not being invoked.
Problem was in the 11th function, nowhere related to mine !!!! But, how can a person making his first javascript function suppose to find that out ???
I am looking for best ways to debug javascript.
You can debug javascript using many modern browsers. See this question for details on how to debug in Google Chrome:
How do you launch the JavaScript debugger in Google Chrome?
Furthermore, you shouldn't use alert() for debugging as this can give different results to a production version due to alert() causing a pause in the script.
It is best practice to use console.log() and view the output in the browsers Console.
You can also put debugger in your javascript code to force a breakpoint. However I prefer not to use this as forgetting to remove this before deployment will cause your script to pause, which can be quite embarrassing!
You should use the debug console provided by the browser.
Chrome has it inbuilt, press CTRL + SHIFT + j. In Firefox, install Firebug plugin.
In your code, add alert() to show flow and get values of variables.
Also, use console.log() which will only output to the debug console.
Depending on your browser choice there are debugging options - I tend to use Firefox, so Firebug in my case. There is a question that list options for other browsers - What is console.log and how do I use it?
Unless the project you're working on has already adopted a mechanism for debugging, console.log() tends to be a simple and useful option when tracking down a problem.
Whilst debugging you could take the approach to log out a line when entering a function, like so:
var myFunc = function(el) {
console.log('Inside myFunc');
// Existing code
};
This will enable you to see which functions have been called and give you a rough idea of the order of execution.
You can also use console.log() to show the contents of variables - console.log(el);
Be mindful to remove/disable console.log() calls once you're done as it will likely cause some issues in production.
To answer your question within question,
how can a person making his first javascript function suppose to find that out ???
Well, when something is wrong in JavaScript, for example, you made a syntax error - the script will stop working from there. However, this won't stop HTML from rendering on, so it might look as if everything is correct (especially if your JS is not changing the look of the page) but all the functionality of JS will be dead.
That's why we use the debug tools (listed in the other answers here) to see what's wrong, and in cases like this, it's very easy to notice which function has errors and is causing the whole script to break. This would probably have save a few minutes to your seniors as well.
The best approach would be to test frequently so that whenever you run into errors, you can fix them right away.

Getting data from the browser's console using javascript

I don't know if this has been asked before, but what i'd like to be able to do is get data from the error console within the browser itself(if it supports it) this would be for when a user sends off a bug report it'd pull up any errors related to pages at my website for things such as typos in code and other things that somehow managed to slip by. Also, in that regard is there a way to pass the errors from the console to a useable format? If this isn't possible, then i could just tell them to copy and paste what came up from the site itself.
I thought of this right now as i was thinking about how to make the bug reporting system run better since the entire thing is basically ran within the browser and for the backend I can easily just look at error logs but for the frontend ie javascript bits of things it's not goign to be as easy.
So to finish wrap all of this up in one little statement, is there an easy way to get the data from the error console and be able to send it along via javascript ie to a form, or something similar.
You can use the onerror event in JS to get the details of the error. Hoptoad do this for example and log the errors to their console, Their code re-uses lots of nice JS scripts including a printStackTrace function that is great.....
You can see how they do it here:
http://hoptoadapp.com/javascripts/notifier.js

Output the rendered contents of a page on a JavaScript error

I'm having problems with getting decent JavaScript error invormation in a Production environment.
When I'm developing I can just attach a debugger and (usually) fix the problem.
When I get the same error in a production environment however at best I see is an error report that looks like this:
Error: Object doesn't support this property or method
Url: SomePage
Line: 42
Char: 13
Which doesn't help me very much - I can't see the rendered page and so I have no idea what line 42 looks like.
Is there any way for me to log the entire rendered page contents whenever an error like this occurs? (So line 42 of the output is the line where the error occured)
While I'm at it, are there any other techniques that I can use to help with getting useful error information from JavaScript (without need to break into the debugger) - failing that is there any way that I can structure my JavaScript slightly differently to help getting decent debug information?
I'm predominantly interested in IE - this is the browser that tends to cause me most problems.
I don't think you'll be able to get the exact original HTML source of the page back in all pages and all browsers.
Regarding debugging, you could use a logging library such as log4javascript (disclaimer: I wrote it) and intersperse logging calls in your code. log4javascript enables you to send logging messages back to the server via Ajax.
Unfortunately, IE has by default the most utterly useless error reporting. The script and line number reported in the error are essentially guaranteed to be absolutely wrong. You can, however, install the IE developer tool bar (for IE7 and older, it's built into IE8) from Microsoft, which can help track down the error source.

Ajax problem using MooTools/jQuery - p.onStatusChange is not a function

I get the following error in firebug in Firefox 3 with both MooTools and jQuery:
"p.onStatusChange is not a function".
I've noticed this error frequently in firebug since one of the latest updates of FF3. However, it has started appearing with code that hasn't been changed in some time and that was not reporting errors previously. The errors happens when ajax results are returned. It shows up in different applications that use separate javascript libraries, MooTools and jQuery.
Does anyone have any idea why these errors are appearing? My intuition tells me that it is something in Firefox that changed, but I can't find any information online currently. The ajax calls still work fine, but I am wary of just going with my intuition and leaving script errors in my code.
Thanks,
Jason
I get it in tabBrowser instead:
chrome://browser/content/tabbrowser.xml
(4) errors occur:
p.onStatusChange
p.onProgressChange
p.onStateChange
p.onSecurityChange
What I found was that the add-on "PDF Download" was causing these errors. The best way for me to check was to go to a page that produced the errors, turn off all the add-ons, and turn them on one-by-one (starting with Firebug). Instead of going one-by-one, I actually turned them on in lots of 3 to help identify the problem sooner.
Here is the reference for the function NsIDownloadProgressListener. It looks like it has been deprecated.

Categories