I am using firefox+firebug for javascript development.
While setting breakpoints in the scripts,for certain files, it allows and for some files,
but for certain files it doesn't [which are loaded, and throws alert messages, if I put alert() there].
If I try to set break point at that line, the red-dot is marked at the last line of the script file, instead of the place where I needed.
I am attaching a screenshot of the issue.
Line 56 is where I wanted the breakpoint, but the breakpoint automatically moves/set at line-66, which is at the end of script file
This is a known bug in previous versions of Firebug 2.0, which should be fixed in the current version (currently 2.0.17).
Note that Firebug is going away once multi-process Firefox is released, so it´s recommended to use the browser internal DevTools instead, which don´t have this issue.
You can also add debugger in your JavaScript code.Try this
debugger;
this.getEntryCollection();
Related
I use the minor tag of StealJS to load my JS files and everything seems to work, but today I recognized that I'm simply unable to debug my code in IE 11 and Firefox 36. Until now I only used the new Opera based on Chrome/Blink, currently version 27, which works pretty well regarding debugging. But:
Firefox's built in dev tools don't show my JS files at all. They only show steal.js and directly afterwards a greyed out line called "evals" with two additionals lines of two JS libs I use and export in stealconfig.js.
Firefox's Firebug shows my files and I can set breakpoints, but there seems to be some errors, because if I set/unset the breakpoint there's a little animation shown which never finishes. If I reload the page the usual breakpoint icon, a red circle, is shown, so it looks like the breakpoint has been set successfully, but the code simply doesn't stop on the breakpoint. But it is run, because the functionality implemented at the break point is usable.
In IE 11 my JS files are shown in the "dynamic scripts" tree and I can set breakpoints as well, but everytime I reload the current page the icon for the breakpoint changes and gets some defect triangle with a warning sign, just like the breakpoint won't work anymore or such. And of course IE doesn't stop the code as well after I reload the page and if I open my JS file the breakpoint is not shown anymore, which at least works in Firefox's Firebug.
None of those problems happen in Opera/Chrome, I always see all my files, can set breakpoints and the code stops as expected. Additionally all browsers show individual requests for my JS file, nothing is bundled into one big one or such, it's all independent files during development.
So is StealJS and how it loads files simply incompatible with the other browsers? Do they need to add support for how Steal handles file loading? I used a former version of Steal with JavaScriptMVC and none of these problems occured with that version.
Looks like those are browser issues, so go and write bug reports.
https://github.com/stealjs/steal/issues/419#issuecomment-99059303
This answer https://stackoverflow.com/a/10929430/749227
to this question Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool? is spot on for debugging dynamic scripts.
The issue I am facing is that I have a page that has a script on it, and after it loads an ajax request fires which returns with some HTML and a script that get put into the page. With the //# sourceURL=myDynamicDocumentFragment.html bit added, I can debug the dynamic script just fine.
But once it's loaded, then the other script that is part of the outer page that initially loaded goes off the rails. I can set breakpoints on blank lines and can't set them on legitimate lines. The debugger will stop on them but it won't be at the place in the code where I'd expect.
What it appears to be is that the dev tools window is showing the original script, and the debugger itself is running on something else - some updated version of code that includes both the outer page's script and the dynamic script that was added later. Or maybe it just hiccups with respect to line numbers it's displaying and what those map to in the code it's actually running.
I wish I had a good simple code snippet to demonstrate the issue, but I don't. Has anyone seen this, and does anyone know of a way to have Chrome 'refresh' the dev tools scripts/debugger without refreshing the page? (it has to be w/o refreshing the page since things work fine when the page loads - it's only after the dynamic script is dropped in that the wheels come off)
Note: I've tagged with Chrome since that's what I'm using (v 38). I don't know how other browsers fare.
You can find scripts injected into head or evaluated, here is a break point added on youtube evaluated (another js file).
You can find this in chrome as well, adding console.log (click on message shown), and voila you have source code you can add break points.
Here mozila print debugging/breakpoint over evaluated script on utube page:
Update
Sorry, I understand chrome was out of the scope, my engrish :)
How I did debugging on chrome over injected scripts, but there are cases when you cannot attach to execution if script is active (page load plus few milliseconds), you need to search for workarounds.
Added this at the begin of the script injected:
//# sourceURL=jseinjectedsource.js
console.log("evaluated");
and voila console:
Better check this way better than my explanation chrome developer
Check to see if your script is using a source map (if you're using TypeScript this is typically on by default for VS projects).
I've found Chrome to be really bad with source maps, often refusing to update them, or stop displaying them after the source map line is removed from the code.
I am trying to use the new feature of chrome devtools "blackboxing a script".
This Chrome Devtools article lists script blackboxing functionality
What happens when you blackbox a script?
Exceptions thrown from library code will not pause (if Pause on
exceptions is enabled)
Stepping into/out/over bypasses the library code
Event listener breakpoints don't break in library code
The debugger will not pause on any breakpoints set in library code.
The end result is you are debugging your application code instead of third party resources.
I have tried to blackbox the file directly by right clicking the file from source tab and everything goes right the yellow notification shows at the top of file "This script is blackboxed in debugger". Strangely none of the above listed points work, debugger goes through blackboxed script also event listeners reference the blackboxed script. I have also enabled Developer Tools experiments at chrome://flags/
With these options set i thought i would have been ok, i also have the latest chrome at this time 39.0 beta,i have no idea what i'm missing. Did anybody go through this?
Thnx!
I had the same issue. One quick and easy way is to look at your Call Stack. As a for instance, Right-Click on one of the 'jquery' functions and select 'black box' from the menu. Nothing else needed. In this example jquery.js will be step-over from that point on.
In your screenshot, I can see a breakpoint.
If you put a breakpoint, it will always break (except if you deactivate it, of course), even with blackboxing being active.
Had the same issue and used good old
have you tried turning it off and on again?
Go to developer tools settings -> Blackboxing -> Remove all entries one by one + disable Blackbox content scripts
Blackboxed again and after that this works fine.
I've been using Google Chrome to debug my javascript, but then all of a sudden I can no longer place breakpoints. I click on the line number, where I previously clicked to add a breakpoint, but no breakpoint will be added. Sometimes if I click very fast, like a madman, I can see it trying to add breakpoints, but it won't stick.
The only thing I changed was adding JSONView. I uninstalled that, but still can't add breakpoints.
Does anyone have any idea?
An edit:
I can place breakpoints on other pages, like StackOverflow, just not the one I'm developing running on localhost.
No it's not fixed. The Chrome debugger has done this for as long as I can remember. Just close and reopen the debugger and it usually comes right again. Sometimes you may need to try several times for it to work.
This bug was fixed yesterday (February 3) with the introduction of a new api for managing JavaScript breakpoints: http://code.google.com/p/chromium/issues/detail?id=69988
I downloaded the most recent Chromium nightly from http://build.chromium.org/f/chromium/snapshots/ and was able to successfully set breakpoints in JavaScript, which I had been unable to do using the current stable/beta/dev builds of Chrome.
Hopefully this fix will be incorporated into the next releases of Chrome. Until then, adding debugger; statements to your code is a decent workaround for setting breakpoints.
This will also happen when trying to set a breakpoint on unreachable code. If starting up a debugger in a new chrome process continues to cause problems, make sure there's no errant breaks or returns etc. prior to the breakpoint.
eg:
var foo = 'bar';
return foo;
foo = 'baz';
debugger
^^^ statements after return in above example will not be reached, chrome will rightly refuse to honor debugger commands or set breakpoints
Check your JS code! Got the error too on Chrome (and Firefox) and the error was a method named exactly like another.
I want to debug a javascript file that is embedded in the HEAD element.
I navigate to the site, see the code, and make a breakpoint:
(source: deviantsart.com)
But when I click on Reload, the script disappears and it doesn't stop at the breakpoint:
(source: deviantsart.com)
Debugging was working earlier so I know it works in general. What do I have to do so that Firebug always debugs my script?
I've noticed this behaviour before as well. It seems that it can happen if you refresh the page while the debugger is running (i.e. after you've hit your breakpoint and are stepping through code). This is far from conclusive, just something I've casually observed over time.
Also, I try to avoid having multiple tabs open with firebug active, as it seems to get confused.
Edit: just thought I'd add that I've seen this manifest itself in a few different ways:
the external script file does not appear at all in the scripts panel.
the external script file appears but firebug doesn't "see" it. You know this has happened because the line numbers beside the code where a breakpoint can be set won't be highlighted (used to be green but now appear to be just a darker shade than other lines). I've seen this happen with inline javascript on a HTML page (horrors!) as well.
the external script file is there, but you can only see a single screen full of code. Where "screen full" is the firebug panel viewport.
shut down firefox and then restart. sometimes firebug gets confused. also make sure you have the latest version.
You need activate the script tab
I'm not sure that having a <script> inside <head> (as opposed to, inside <body>) is actually legal HTML. If it's not, as I suspect, you can't fault Firebug for not supporting it well...!-)
The bugs in script processing that I know about are 1) jquery dynamic loading of scripts fails, 2) new Function() cannot be seen, 3) some kinds of document.write() cannot be seen.
Firebug processes script files in series with Firefox. This means that Firebug must be active when the page loads and it means that any exception in the path will cause the files to be mis-processed. If you opened firebug before loading and you still see problems, then the most likely fix is to install Firebug in a new Firefox profile. This causes you to get a completely fresh set of default options and you run Firebug without other extensions. As you re-add other extensions, look for problems in seeing scripts: then maybe you will discover what extension is interfering with the code path for processing scripts. I know this is a pain in the neck, but so is JS debugging without source ;-). We are working on testing with more Firebug and Firefox extensions installed to try to reduce these problems.
In our case it was the bundling of JS files.
It is not only FireFox, it is same for Chrome.
We moved the file out of the bundle and put it on the page where it needed to be referenced and it started working like charm.