I'm trying to figure out how to develop extensions in chrome and started out with the obvious: adblock plus.
But I noticed something very unsettling: the break points get skipped.
As you can see, I set a break point on the line console.log("Was here 00 " + timeStamp()); but the message was still printed to the screen.
I expect the Javascript interpreter to break on the break points. Obviously it's not happening.
I don't understand this. Can someone please shed some light on this mystery?
Thanks in advance for your kind help.
I'm not totally sure why the breakpoint is not always getting hit, but I suspect it could be some timing issue with the JS engine. It would be interesting to find out for sure. I found a workaround that should help anyway:
Add a debugger statement where you had the logging call. This always gets hit. It's in the code, so there's no issue with timing.
On the line below where you will have the logging call, add a Conditional Breakpoint by right clicking on the line number and selecting "Add conditional breakpoint...". Instead of using an actual condition, just inject the console statement.
For example, console.log("The time is " + new Date());
Now when you load a page, the debugger will break at the debugger statement, and then once you continue execution, the console log will occur.
Related
take a look at this:
this is a screen I took from firebug. I don't know why but the browser just refuse to run the code within the lines with gray line number.The breakpoint above is never reached. There is no syntax error, no warning whatsoever. What have I ran into?
edit: I tried with latest chrome and firefox.
I simply avoid do while at that place and it works! Never really sure why.
When using Chrome debugger to step through the code in my JS apps , I often find myself wading through backbone/underscore/jQuery code which I'm not interested in following. Is there anyway to step through my code, but have the debugger skip code which is part of these libraries?
I just spent three days living inside chrome's debugger doing exactly this.
The trick is to set a breakpoint on and the next line after the Backbone/jQuery/Underscore code and F8 when you get there.
Like
for(_(obj).each(function(v,k,l){
console.log( k,v,l);
});
Set your breakpoints on the for line and the console line. F11 down to the for line, then F8 and then continue your stepping.
It's a little bit of a pain to set up but since toggling breakpoints off is easier than setting them initially when you have it set up its easy to maintain.
In most debuggers, you have a "Step out" (of current function), so you can use that whenever you step into the top-most levels of the libraries you want to skip.
EDIT: Btw, step out goes from current location to the return in the current function. I haven't used debuggers too much, so I can't tell what would happen if you step out of a function with asynchronous calls in it. I can only imagine it would exit the function and the async call would go on about its business while you step into something else.
I'm having a problem where all my javascript errors appear to be coming from dojo.xd.js or a sub-module. I'm using chrome debugger and many dijit features such as dijit.declaration and dojo.parser.
This is a bit annoying as it makes it hard to locate simple errors or slip ups. I'm hoping I can add an option that allows my debugger to show where in my non-dojo code a option would occur.
I'm new to dojo so I might be making a simple mistake.
Example error from what should be a nullpointexception in non-dojo code:
typeError
dojo.Deferred.reject.errback dojo.xd.js:14
Errors that occur inside deferred and async chains are handled by Dojo and that can confuse the error messages a bit.
If you are using the chrome debugger you can tell it to immediately halt the program execution whenever an exception occurs by clicking on the "stop sign" in the "Script" tab until it turns blue.
I think missingno's suggestion is a good one (worth a try - I haven't used the method).
Also, another way I've used to get at the erroring code is:
Set a breakpoint in the dojo code where the error is showing
Use the stack breadcrumb navigator and move backwards into the
code that threw the error
In Firebug, the stack navigator is just above the script listing that shows the breakpoint.
I've been using Firebug to debug some javascript I have on one of my pages. Recently it has started hitting non-existent "break points" at seemingly random spots in my javascript. It seems like most of these points are in third party libraries like jQuery, but it also stops on custom javascript.
I'm not seeing any errors at these lines and I definitely don't have break points there. Can anyone think of why Firebug would be stopping here? It's getting to the point where I have to hit the "Continue" button about 20 times to get the page to finish Javascript execution...
I had this problem and fixed it like so:
Uninstall firebug in the firefox add-ons manager
Close firefox
rm -rf profile_folder/firebug
Delete all firebug-related lines from profile_folder/prefs.js
Reinstall firebug
Hope this helps!
There is nothing wrong with firefox, this is happening because you might have enabled auto breakpoints. Check here http://getfirebug.com/wiki/index.php/Script_Panel for more details about what i am talking about. Disable them on console and script panel and everything will be solved.
This question is old, but it is also the top result for searches: like firebug random breakpoints.
In my experience, assuming this is not due to break on exception or other settings, every time this happens to me there is some collision with jQuery, or another library. Sometimes even name spacing does not keep you safe, and this is very hard to debug.
Most recently I had a function named: name_space1.nestedns.focusCursor(). Something was messing with my focusCursor function.. didn’t figure out what, just changed the name.
Farther in the past I had a function or var named ns.companyabreviationToolTip... and there was collision and breaking on this as well. Changed ToolTip to something obscure, and everything was happy. Maybe firebug has a secret break on collision setting. If this is a bug, I hope it does not get fixed… it seems useful.
Can any one give me a scripts (HTML/CSS/Javascript) that can reproduce this error on IE 7.0? I am trying to fix this bug in my page where I get this warning but could not exactly found the problem. Line number does not match with the source either.
I thought the better approach would be to create a bug and then work on it incrementally rather than making some wild guess!
As Shog said, that error will occur when you try to call a method on an object which doesn't have that method.
This is most often caused by an object being null when you expect it to, well, not be null.
var myEl = document.getElementById('myElement');
myEl.appendChild(...)
The above example will cause that error if the "#myElement" element doesn't exist.
If it's only happening on IE and not Firefox, chances are it's because you're using a method which IE doesn't support.
The solution? You can try the Script Debugger, but I've never found that to be useful myself. The most reliable, yet painfully slow method is alert() debugging. At strategic points through your code, put in an alert with a unique message. At some point IE will throw an error, so you'll know that the error is somewhere between the last alert which you saw, and the next one which didn't.
function myFunc() {
alert('a');
var myEl = document.getElementById('myElement');
myEl.appendChild(something);
alert('b');
// more code
}
if you ran that and you saw 'a' but not 'b' you know it's in between there somewhere. This is just the sad state of javascript in IE, I'm afraid.
If you make your code follow the jslint.com rules, it will go away.
It will also point you at exactly where the issue is in your code.
I thought the better approach would be
to create a bug and then work on it
incrementally rather than making some
wild guess!
You would be wrong. There are countless scenarios that could produce the error you are seeing. All it means is that you're trying to call an undefined method. For instance:
var blah = {};
blah.methodWhichDoesntExist(); // <-- error
This could be the result of a typo, an undetected failure in some other component, or gamma rays consistently flipping bits in your HTML right after you save. Hard to be any more specific without knowing more about what you're doing.
For IE, download the Microsoft Script Debugger
I just fixed a similar bug by using IE8 and switching it into IE7 mode. You then get a more specific error message telling you which line of which file is failing.
After that set a breakpoint so that the code stops just before the offending line (F12 to get to debugger tools, then choose the JS file you want from the 'scripts' dropdown and click to the left of the line number. Click 'start debugging' to make it use the breakpoints).
As others have pointed out, this error could have many causes, but in my case, I had two IDs on the same page with one capitalised and one not. getElementById() was getting the wrong one. Only IE7 complained.