When loading a JavaScript block via Ajax, the response is returned ok, but when viewing it in the code in Firebug (1.9.1) in the Script tab, it appears without any newlines. It's extremely difficult or impossible to set breakpoints anywhere.
Is there a way to get Firebug to preserve the newlines?
I don't think so, but Chrome's developer tools unobfuscator may do what you want (http://www.sagarganatra.com/2011/06/de-obfuscating-javascript-code-in.html).
However, if you load in your script blocks by adding a script tag to the page and changing its source to point to the relevant script file the eval function isn't used and firebug should display the script with line breaks included.
Found a fix for Chrome.
Simply add the following snippet to where you want to debug:
try{ throw Error() } catch(e) {}
and click the "Pause on all Exceptions" button in the Chrome Scripts console tab. Then simply hit F8 until you reach your try block.
Works like a charm. :)
Related
I am trying to debug my javascript & jQuery and step through it using firebug.
I am running my code on an Apache server (2.4) on a windows machine.
I used the firefox browser version 18.
When i go to run my code, I can't see my javascript (external file) in the scripts panel.
I see the linked jQuery library on the panel but I dont see my javascript code.
On the Firebug, the scripts are clearly linked in the HTML panel. But on the script panel, only the jQuery.js is visible. i would post a screen shot but i dont have enough reputation right now.
I dont know what is going on and what i have to do in order to be able to step through my javascript code.
UPDATE
I placed the "debugger" on my javascript code but it still not showing on the 'script panel'.
debugger;
$(document).ready(function () {
var email_default = "Enter your email address...";
$(':input[type="email"]').val(email_default).on('focus', function () {
if ($(this).val() == email_default) {
$(this).val(' ');
}
});
I also tried to do a browser refresh, disable and re-enable all the firebug panels- but it still won't show my external javascript. I had also double checked my file location & directories to make sure i am linking it correctly.
If Firebug (or other browser developer tools) doesn't show a JavaScript in the list of available scripts, this means it has a syntax error.
In that case you need to switch to the Console panel and check there for the error.
Notes:
As mentioned in a related answer, there can also be other reasons why there are no scripts shown in the list:
Since Firefox 49.0 and Firebug 2.0.18 the Script panel is completely broken. This is due to some internal Firefox API changes. And because Firebug is officially discontinued, this unfortunately won't get fixed anymore.
There was also a bug in Firebug 2.0.11 (and below) in combination with Firefox 39.0 causing this problem. This bug got filed as issue 7918 and fixed for version 2.0.12.
It happens when the Script panel is enabled and you close Firebug and then reopen it.
I'm not that familiar with IE-10 and I'm trying to troubleshoot some code using the F12 tools. I can't find a way to debug ( i.e. set break points, etc. ) in a script that is Ajaxed in, and then append to the DOM.
I can download it more conventionally using <script> but not changing things would be a bit easier. Is there a way to do this?
The simplest way I can think of would be the temporarily add a debugger; command at the top of the dynamically added script file. That will cause it to drop into the debugger as soon as that script starts to execute. Once it drops into the debugger, you can set breakpoints in the now-loaded script that hasn't yet executed.
I have been given a project - the one HTML page includes about 45 different javascript files. I am getting alert boxes when I click on some of the elements - which javascript file is making the alert? How do I determine this, preferably which line in the javascript file but I can start with which file...
If this can be done within the web browser (I dont care which web browser) please let me know how... I have looked at the resources tab in chrome but it did not help me.
Thank you.
Use a text editor to replace all
alert
by
console.log
And then use Chrome inspector to see where the logs are.
Include your own javascript file on top of the page and predefine alert with:
alert = function(msg) {
alert(msg); // put breakpoint here
}
Then use the debugger (Firebug in Firefox, or Developer Tools in Chrome) to put breakpoint as described above. The stack trace view in the debugger will show you which script line / file is creating the alert
Use the profiler in Firebug
Console -> Profile -> Click to enable. It will show which all functions are calling, search that function names, and add break points to debug.
I have a very simple script that lazy-loads javascripts at runtime. There are unknown dependencies on each page, so they are not all loaded until needed.
Like most frameworks, this works by adding a script tag to the document head.
Everything executes fine, but the Safari debugger neither sees the new script tags in the "Elements" inspector, nor shows them in the "Scripts" tab. Errors are reported as occurring on the root document, rather than the proper script.
An obvious workaround is to author and debug everything normally, and then add the dependency loading as a last step. But I would love to know if there is there a better way to lazy-load scripts that makes the debugger happier?
Safari has a setting in the Script tab to pause on exceptions, giving you an interactive debugger at the point in code whenever an exception is thrown, or alternately, only on unhandled exceptions.
It looks like a little octagon with two vertical bars. It's a tri-state button, and the tooltips summarize each state's functionality.
I know that if you lazy load scripts with eval then the firebug debugger has a hack to get at the script.
Normally lazy loaded script can not be accessed from the debugger. You should hard link it and add the lazy loading for production.
I'm new to Firebug and having a lot of trouble.
JavaScript files usually show up empty, or load partially (some of the time)
Lines are not available to set breakpoints on frequently (line numbers are greyed out)
When I do set breakpoints, script execution often does not stop on them
I'm using Firebug 1.3.3 and Firefox 3.0.11. I have disabled all other Add-ons. I'm loading Javascript from localhost. Sometimes closing the window and re-opening the page I was on clears things up, but that never lasts for more than a couple page loads.
I'm working on learning jQuery, which obviously has a huge library, but I imagine many other people use Firebug for the same, so that shouldn't be a problem. Also, most of the time (but not always), Firefox loads and executes the JavaScript no problem; just Firebug can't see it.
Due diligence:
These discussions seem to cover the same problem, but have no answers:
"Firebug not showing Javscript errors" - http ://groups.google.com/group/firebug/browse_thread/thread/443848cd11be48e1?pli=1
"firebug does not always load javascript" - http ://code.google.com/p/fbug/issues/detail?id=1644&q=empty%20javascript&colspec=ID%20Type%20Status%20Owner%20Test%20Summary
(Sorry I'm new, and not allowed to hyperlink those)
A couple suggestions. Make sure that you have the console, net, and script panels of Firebug all turned on.
You should see in the net panel what js files have downloaded. In the console panel, you should be able to type console.log(jQuery) and get back function().
This should confirm that jQuery is actually loaded and running.
Then go to your script panel, and you should see four options across the top. Inspect, Edit, Static, and then a drop down list of your scripts. That's the one you want. Select the script that you want to debug.
Based on your question, you probably know some of this already, but confirm that all of that is working first.
When you don't see jQuery in the scripts list, can you do console.log(jQuery)?
PS. It's not a matter of size. I routinely load js files that are 10x the size of jQuery.
Edit: A few more suggestions:
1) Reduce to simplest case and add back. Remove all your scripts other than jQuery and then add your other scripts incrementally. Is there one that consistently breaks it.
2) Put try / catch statements around suspicious code blocks. I've often found that FB stops reporting errors after an uncaught exception has been thrown.
try {
// your code here
} catch (e) {
console.log(e)
}
3) Setup another FF profile to test if you get the same problem.