So in my website, I use jquery to fetch data through ajax. AS part of the ajax response, some of the javascript code comes as well which is executed. The problem is how to debug this javascript in firebug or other tools. This is my experience so far:
putting debugger; doesn't work
For some javascript, can't set the breakpoint as that script is not yet loaded.
even if this new javascript calls some other function thats already loaded (i.e. i can see it in firebug and set a breakpoint), that breakpoint on that function is still not triggered
However, the javascript does executes normally and even things like console.log works but cant seem to debug it..
If you use Google Chrome, check out the answer of this question:
https://stackoverflow.com/a/10929430/482916
You need to add in the ajax-loaded JS scripts the following comment:
//# sourceURL=dynamicScript.js
where dynamicScript.js is the name of the script which will come up in the console.
I know Firebug and the IE developer tools will respect the debugger statement. So I would throw that onto the top of the response.
debugger;
func1();
func2();
Related
I have set of Javascript loaded in page and that will be executed onclick of some button . My browser is IE11 latest version and since my application tools doesn't support IE11 I made that change to run application and anything inside it in document emulation mode to IE9 (with "X-UA-Compatible" ) And I have added my domain in compatibility list in IE11.
I am getting a very surprising issue.
All my JS code executes fine if console (F12 developer tools) is keep opened. However it stops executing certain part of JS once console is off in IE11.
Note that, none of my JS code has anything with console.log .
And I have explicitely tried adding below in my JS and it is still not working,
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Can anyone help what could be the possible issue ?
Thanks and appreciate your help.
I am possibly hitting similar issue mentioned below :
Why does JavaScript only work after opening developer tools in IE once?
but below doesn't work for me when I add my code inside head section or body section : so not sure if IE11 this is still a problem and how to resolve this:
<script>
if ( ! window.console ) console = { log: function(){} };
if(!console) {console={}; console.log = function(){};}
</script>
I put the resolution and fix for my issue . Looks like AJAX request that I put inside my javascript was not processing because my page was having some cache problem. if your site or page has a caching problem you will not see that problem in developers/F12 mode. my cached javascript AJAX requests it may not work as expected and cause the execution to break which F12 has no problem at all.
So just added new parameter to make cache false.
$.ajax({
cache: false,
});
Looks like IE specifically needs this to be false so that the AJAX and javascript activity run well.
I'm making a Greasemonkey script which has to call some functions on a swf object. The script works fine in Chrome (with Tampermonkey), but in Firefox, using Greasemonkey, the function doesn't exist. When I try to log it, it shows up as undefined.
Is there some sort of extra security specifically in Firefox/Greasemonkey against calling functions on swfobjects? Any ways to get around it or disable it?
I'm using IE9 to debug a web app. I made some changes to the javascript after loading the page. I'm not able to get IE9 to stop on the new code. The message is "The code in the document is not loaded". I can set breakpoints when I'm not debugging, but they won't be valid when I start debugging. I'm using IE7 Browswer Mode, IE7 Document Mode.
Things I've tried:
close dev tools window, re-open
stop debugging, start debugging
Ctrl R in dev tools window (same as Clear Browser Cache button)
Ctrl R on the IE9 web page
Ctrl F5 on the Ie9 web page
Clear browser cache for this domain
Check (set) Always refresh cache from server
Next thing to try (I guess) would be closing IE completely. Is that the fix for this? If so, yuck. It takes me a couple of minutes to set the page up so doing that after every JS change really stinks. I can use FF4 to develop the JS, but the JS issue I'm seeing is specific to IE7 so I have to do it this way.
>> How can I get IE9 (running in IE7 mode) to reliably debug the most current JS from the server?
This issue wasn't related to caching etc. IE9 was hitting a script error (missing closing paren) in the new code and not allowing breakpoints anywhere in the script. IE seemed very quiet about the script error though. Anyway, fixing the script error fixed the issues with breakpoints / caching.
If you have access to the code:
In you javascript file reference add a query string, something like this:
<script src="Scripts/main.js?v=1" type="text/javascript"></script>
And every time you change in the js file change the v value to something else, like that the browser will feel that this is a new file and will get it.
Add this:
window.applicationCache.addEventListener('updateready', function (e)
{
if (window.applicationCache.status == window.applicationCache.UPDATEREADY)
{
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?'))
window.location.reload();
}
}, false);
I found this solution somwhere in the Net. Sorry, but I don't remember the author. It works for me when I debug Web App with JavaScript in Visual Studio and use IE.
I found this question based on the "the code in the document is not loaded" error message. I'm not using IE7 document mode or any of that, just IE9.
Like jcollum, my issue wasn't related to caching.
I'm using MVC.Net, and someone had set up a piece of javascript to rely on a string in the ViewBag. I changed a couple things, and that ViewBag string disappeared, so the resulting javascript looked something like this:
if(!()) {
// Some code
}
Javascript died right here, and wouldn't process the rest of the code in the block. This was confusing, as it was still trying to execute javascript in a different set of script tags, but which relied on a variable set in the other block it wouldn't load.
So, basically, a syntax error was introduced via strange means, and the debugger refused to load some of the code which came after it. Another lesson on the dangers of ViewBag.
I'm writing my first bit of jQuery, and I'm having a problem with jQuery.get(). I'm calling this;
$.get(url, updateList);
where updateList is defined like so;
function updateList(data)
{
if (data)
{
$('#contentlist').html(data);
}
else
{
$('#contentlist').html('<li>Nothing found. Try again</li>');
}
}
The function runs, and updateList is called. It works fine in Internet Explorer. However, in Firefox, the data parameter is always empty. I would expect it to be filled with the content of the webpage I passed in as the URL. Am I using it wrong?
Notes;
in Firebug, I've enabled the Net panel, and I get the request showing up. I get a 200 OK. The Headers tab looks fine, while the Response and HTML panels are both empty.
The page I'm trying to download is a straight HTML page -- there's no problem with server code.
The page with JavaScript is local to my machine; the page I'm downloading is hosted on the Internet.
I've tried checking the URL by copy-pasting it from my page into the browser -- it happily returns content.
The error occurs even in Firefox Safe Mode -- hopefully that rules out rogue addins.
You probably won't be able to do this due to cross-domain security. Internet Explorer will allow you to Ajax remote domain when running from file://, but Firefox and Chrome won't.
Try to put both files on the same server and see if it works (it should).
You'll most likely need to fix your page that you're quering with XHR because it should be returning content. Copy paste the link in the Firebug net tab and make a new tab, and edit that page with your text editor so it spits content back.
Stick alert (or breakpoint in Firebug) and see if the data returned is not an object (or if there is any data). If the former - you may need to drill into the object to get your markup
I am debugging a large, complex web page that has a lot of JavaScript, JQuery, Ajax and so on. Somewhere in that code I am getting a rouge request (I think it is an empty img) that calls the root of the server. I know it is not in the html or the css and am pretty convinced that somewhere in the JavaScript code the reqest is being made, but I can't track it down. I am used to using firebug, VS and other debugging tools but am looking for some way to find out where this is executed - so that I can find the offending line amongst about 150 .js files.
Apart from putting in a gazzillion console outputs of 'you are now here', does anyone have suggestions for a debugging tool that could highlight where in Javascript requests to external resources are made? Any other ideas?
Step by step debugging will take ages - I have to be careful what I step into (jQuery source - yuk!) and I may miss the crucial moment
What about using the step-by-step script debugger in Firebug ?
I also think that could be a very interesting enhancement to Firebug, being able to add a breakpoint on AJAX calls.
You spoke of jQuery source...
Assuming the request goes through jQuery, put a debug statement in the jQuery source get() function, that kicks in if the URL is '/'. Maybe then you can tell from the call stack.
You can see all HTTP request done through JavaScript using the Firebug console.
If you want to track all HTTP requests manually, you can use this code:
$(document).bind('beforeSend', function(event, request, ajaxOptions)
{
// Will be called before every jQuery AJAX call
});
For more information, see jQuery documentation on AJAX events.
If its a HTTPRequest sent to a web server, I would recommend using TamperData plugin on Firefox. Just install the plugin, start tamper data, and every request sent will be prompted to tamper/continue/abort first.
Visit this page at Mozilla website
Just a guess here, but are you using ThickBox? It tries to load an image right at the start of the code.
First thing I would do is check whether this rouge request is an Ajax request or image load request via the Net panel in Firebug.
If it's Ajax, then you can overload the $.ajax function with your own and do a strack trace and include the URL requested before handing off to the original $.ajax.
If it's an image, it's not ideal, but if you can respond to the image request with a server side sleep (i.e. php file that just sleeps for 20 seconds) you might be able to hang the app and get a starting guess as to where the problem might be.