I came across a website that runs this code:
function check(){console.clear();before = new Date().getTime();…
^^^^^^^^^^^^^^^
on load, discarding valuable console messages. How can I make Firefox
ignore console.clear() globally?
I wonder why that even exists in the first place. It should not be
possible for a website to delete potentially relevant debugging output.
You can solve this in two ways,
First, you can write a firefox extension which executes a javascript on page load and assigns empty function to console.clear. So, it doesn't throw any error if its called.
console.clear = () => {}
References for building extension to run on page load
Chrome Extension: Make it run every page load
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page
Secondly, you can load the page once and open devtools and goto sources and search for console.clear and add breakpoints every where its called and reload the page. The code execution will stop when the console.clear is called for the first time and again you can goto console and assign console.clear with empty function and override.
Reference for Using BreakPoints in Firefox
https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint
Since you're asking about Firefox, if you don't want to write your own extension, you can use the one that already exists:
Disallow Console Clear Firefox Addon
It is right to hijack the console.clear on page load.
Here just a tip/record.
For some sites, there would be no explicit word console.clear in the sources. (And sadly, currently Firefox's Preserve Log option might still not be as powerful as Chrome's)
But the hijack might still work even!
BTW it might happen that "directly reassigning console.clear in console" not works.
So just try it.
Related
I have a problem when debugging React on initial page load. As you can see from the screenshot, if I hover over this I can see the content but if I use console it says that this is undefined. This only happens when I reload the page, if I debug when clicking around this problem does not occur. I have React Developer Tools for Chrome installed and noted that when this is happening it only says Connecting to React…. Could this be the problem?
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
I'm using .tsx files (.jsx but with TypeScript) if that could matter.
Sources tab:
React tab:
Based on your updated comments, if you launch your function from the constructor and then stop it with a breakpoint, the constructor won't finish executing, which means it won't be able to correctly set the prototype chain and most important, set the correct reference to this.
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.
I am a chronic user of Firebug, and I frequently need to log various stuff so that I can see what I am doing. The console.log function is a lot to type. Even if I assign it to a single letter variable like q = console.log, I have to do it every time I fire up Firebug. Is there any way to do it such that q always refer to console.log (unless, of course, I override it in my session)?
To answer your question, the functionality doesn't currently exist, however I have found the firebug developers to be very responsive in the past. Why don't you put in a feature request on their forum, or better yet, code it up yourself, and ask them to add it?
Depending on your IDE, simply setup a code snippet (I use Flash Develop, so Tools -> Code Snippets).
I believe this to be a better way than setting up redirect scripts and what not, because it stops the Firebug namespace from being polluted, and makes it easier/more consistent to debug if your debugging breaks down.
The screenshot shows me using Flash Develop, hitting Ctrl+B, then hit enter. The pipe (|) in the snippet indicates where the cursor will be placed to start typing after inserting the snippet.
I want to force the Chrome debugger to break on a line via code, or else using some sort of comment tag such as something like console.break().
You can use debugger; within your code. If the developer console is open, execution will break. It works in firebug as well.
You can also use debug(function), to break when function is called.
Command Line API Reference: debug
Set up a button click listener and call the debugger;
Example
$("#myBtn").click(function() {
debugger;
});
Demo
http://jsfiddle.net/hBCH5/
Resources on debugging in JavaScript
http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/
http://berzniz.com/post/78260747646/5-javascript-debugging-tips-youll-start-using-today
As other have already said, debugger; is the way to go.
I wrote a small script that you can use from the command line in a browser to set and remove breakpoint right before function call:
http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/
debugger is a reserved keyword by EcmaScript and given optional semantics since ES5
As a result, it can be used not only in Chrome, but also Firefox and Node.js via node debug myscript.js.
The standard says:
Syntax
DebuggerStatement :
debugger ;
Semantics
Evaluating the DebuggerStatement production may allow an implementation to cause a breakpoint when run under a debugger. If a debugger is not present or active this statement has no observable effect.
The production DebuggerStatement : debugger ; is evaluated as follows:
If an implementation defined debugging facility is available and enabled, then
Perform an implementation defined debugging action.
Let result be an implementation defined Completion value.
Else
Let result be (normal, empty, empty).
Return result.
No changes in ES6.
On the "Scripts" tab, go to where your code is. At the left of the line number, click. This will set a breakpoint.
Screenshot:
You will then be able to track your breakpoints within the right tab (as shown in the screenshot).
There are many ways to debug JavaScript code. Following two approaches are widely used to debug JavaScript via code
Using console.log() to print out the values in the browser
console. (This will help you understand the values at certain points
of your code)
Debugger keyword. Add debugger; to the locations you want to
debug, and open the browser's developer console and navigate to the
sources tab.
For more tools and ways in which you debug JavaScript Code, are given in this link by W3School.
It is possible and there are many reasons you might want to do this. For example debugging a javascript infinite loop close to the start of the page loading, that stops the chrome developer toolset (or firebug) from loading correctly.
See section 2 of
http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/
or just add a line containing the word debugger to your code at the required test point.
Breakpoint :-
breakpoint will stop executing, and let you examine JavaScript values.
After examining values, you can resume the execution of code (typically with a play button).
Debugger :-
The debugger; stops the execution of JavaScript, and callsthe debugging function.
The debugger statement suspends execution, but it does not close any files or clear any variables.
Example:-
function checkBuggyStuff() {
debugger; // do buggy stuff to examine.
};
You can set debug(functionName) to debug functions as well.
https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function
I wouldn't recommend debugger; if you just want to kill and stop the javascript code, since debugger; will just temporally freeze your javascript code and not stop it permanently.
If you want to properly kill and stop javascript code at your command use the following:
throw new Error("This error message appears because I placed it");
This gist Git pre-commit hook to remove stray debugger statements from your merb project
maybe useful if want to remove debugger breakpoints while commit
Since upgrading to Firefox 4.0, I've noticed that I'm occasionally getting an error in the console stating:
attempt to run compile-and-go script on a cleared scope
The only information I can find about this on the net currently is on the mozilla groups forum, where it is suggested that it's something to do with session restoring. In my case, though I haven't been able to reliably reproduce the error, it happens at any time, not just after a restore.
What's the deal? How do I stop the error?
For me (Firefox 11, Firebug 1.9.1) it happens sometimes after I refresh the page (either F5 or CTRL+F5) while debugger is paused on a breakpoint.
The solution seems to be to continue the execution of the script, and refresh the page only when Firebug is not paused.
In my case, it was document.write method causing the problem on Firefox 4, 5, 6 on Windows. Linux versions are unaffected. What I had to do is to overwrite document.write method.
I aware that document.write shouldn't be used these days, but deployJava.js, a standard Java Applet deployment script written by Sun/Oracle, is using it. Google is using it in Google AdSense ads. document.write is everywhere.
<script>
var documentWriteOutput = '';
var got = document.write;
document.write = function(arg) { documentWriteOutput += arg; }
</script>
<script src="badScriptThatIsUsingDocumentWrite.js"></script>
<script>
runBadScriptThatIsUsingDocumentWrite();
document.write = got;
// Do whatever you want with the documentWriteOutput
// e.g. $('#somewhere').html(documentWriteOutput);
</script>
I hope this helps. However, I saw lots of "solutions" on the Internet that didn't work for me. It may mean that "Attempt to run compile-and-go script on a cleared scope" is a Firefox JavaScript engine problem/bug.
I've noticed that this error can happen if you write to the document with document.write after the document has completed loading (e.g. in a function called from JQuery's $(document).ready() method). When this happens, it seems that Firefox discards the old document and writes a new one. I don't know if this is new behavior or not. It seems that when you try to operate on the old document, e.g. with JQuery selectors, you get this error. For me, fixing the script in question to not call document.write after the document had loaded fixed the error.
I have noticed that if I disable the cache, I no longer get this error in the console.
The error doesn't occur if Firebug (in my case 1.8) is disabled.
Check your code for duplicated meta cache-control and remove one of them:
<meta http-equiv="cache-control" content="no-cache" />
i had this problem too but I did a clean re-installation of FireFox.
after that the error was gone.
I got this error when I tried adding events on elements appended from a same domain iframe. Added clone() and errors stopped.
It has nothing to do with firebug. The reason it "goes away" when firebug is disabled is that you are no longer seeing the exception. The cause of this is having an handler attached to an event that is now null but not properly cleaned up. You need to make sure that handler is properly disposed of, otherwise the event still fires the reference to the handler.
It is: menu Firebug -> Console -> Show Chrome Errors
switch off, end of story ;)