When I first load a page in the Firefox debugger, no source files are shown, so it is not possible to set breakpoints until an error occurs (I don't want to have to insert "debugger;"). Is there a fast way to start running, stopping at the first executable JavaScript line? I tried Stepping In, which I thought should do this, but it does not do anything, probably because it only works when paused at a breakpoint.
I searched the Web and could not find any solution, even though this seems to me a common problem. Am I missing something obvious?
Related
I was profiling my app for performance, when I started to notice something strange. A 'mousemove' event was firing and calling code I hadn't added myself. Heck, I don't have a mousemove listener on my page. I thought it might be an extension, maybe AdBlock, so I disabled all of my extensions. It didn't go away.
Also, upon opening a <select> list, I noticed it calling some class 'ListPicker'... Seriously, no clue where this is coming from. Some screenshots:
Also notice the "Compile Script"... I'm not eval-ing any script on my page by default. What gives? Looking for the source, DevTools simply says this:
Can I somehow still make DevTools redirect me to the exact lines of code it was executing? It is frustrating to see strange, alien code executed on one's page and not even being able to look at the source code.
More on the mousemove events it was firing:
Upon inspecting the sources tab, I found nothing but my own files.
In addition, I noticed that always somewhere towards the end of my profiling session, this "unattributed" source would appear to be completely blocking my JavaScript:
HOWEVER, this is not even what happens. My site stays completely responsive - it wouldn't do that with 100% scripting CPU usage. However DevTools says otherwise. The last thing that really gave me nightmares was this:
NEGATIVE SCRIPTING TIME? You can even see Chrome's rendering giving up towards the left of that pie chart.
So, in all my confusion, what exactly could this be? How do I find the source of this, or does it even have one, maybe this is just a bug within the newest version of Chrome? Really appreciate if anyone could drop their thoughts.
Last night, I was trying to debug a particular bit of vanilla JavaScript on a private page.
After a half an hour or so, the browser crashed while in the middle of stepping through a troublesome section.
When FireFox restarted, FireBug insisted that there was no JavaScript on the page - does anyone have any ideas what is causing this? Clearly the JS was (nearly) valid before the crash, and wasn't changed before I restarted. The only thing I can see, is that FireBug probably installed an update at that point?
I've tried cutting out all of my code, but nothing seems to make a difference. Other pages, even on the same intranet site, still work, but this one doesn't list any files under the "Script" drop down.
I've compared with the built-in Dev tools, and they also show no JavaScript loaded. The JS is a form submission handler, and clearly it is no longer running when the form is submitted.
I struggled with this for much of today. Eventually resolved it by creating a new profile.
I would be very interested in learning of the root cause if anyone figures it out.
Seems truly bizarre, and I can't seem to find any cause.
I'm running a little simulation with box2d.js, just a few boxes with joints to make a 'rope'.
Using firefox (version 3.6.13) it runs quite sluggishly, until I open up firebug(version 1.6.0), and then there is a vast speed increace (at a guess I'd say at least 2x).
If I completely disable the firebug addon and restart the browser it remains slow.
What could be causing this, and how can I get it to run that fast normally?
EDIT
As proof, here is a zip file: https://docs.google.com/leaf?id=0B5twGxOv6WCsOTU5NzVjZTEtNGY0ZS00ZjFiLTkwNDUtYTE3YjlmNmU2Zjhh&sort=name&layout=list&num=50
Got a friend with an older version of firebug and he couldn't reproduce.
EDIT 2
If I change my implementation to using raphael instead of canvas it no longer occurs, so I think this must be to do with canvas.
That is bizarre! Do you have any console.log calls in your code? Without Firebug those will fail, perhaps causing the slow-down.
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.