I'm looking for a way to debug a dynamically loaded jQuery document.ready function.
Obviously I can't just bring up the script panel and add a breakpoint with the mouse since the function does not exist there.
I've also tried adding "debugger;" to the function (without the quotes), but that did not do anything. I have ensured that the function is actually executed while I tried this.
Thanks for your help,
Adrian
Edit: I just noticed that Firebug actually breaks on debug. However, when it does so on a dynamically loaded script, it does not bring up the source code of that script as usual. Plus, the call stack ends right below my own code. I can bring up the implementation for document.ready via the call stack, but that does not really help. Is this a Firebug bug or have I missed something?
I just worked on this similar question. The solution involves adding the word debugger twice; once at the top of the external file and one more time at the top of the function that needs to be debugged.
I noticed that if the debugger word was used only once, it did not work. Example:
//myExternal.js
debugger;
function myExternalFunction(){
debugger;
/* do something here */
}
You might try placing a break point where the event is called, and then instead of click "Play", choose "Step Into" (F11). I don't have a test case in front of me, but I think this may work.
I don't know if you ever got this figured out, but in case someone else needs it...
I got around this by moving the code I wanted to debug to an external file that was linked from the main page.
In my case, I had default.aspx loading services.aspx into a content div using jQuery AJAX. Services.aspx in turn, was loading jQuery UI tab elements using AJAX from a webservice that was providing it data. The webservice code was in a file called data.js which was linked from default.aspx. I needed to debug the code that was in the header of services.aspx (that loaded the tabs with data), but couldn't ever see it in any of the available inspectors. I just moved the code I needed to a new function in data.js and called it from the header in services.aspx.
I hope that makes sense to someone who needs it!
Just encountered same behavior (Firebug ignoring debugger; statement in dynamically loaded code) in Firefox 5.0/Firebug 1.7.3.
Worked around by detaching Firebug window ("Open Firebug in New Window").
There's also a 'debugger' keyword that's supported by the IE JScript debugger, and Safari's Web Inspector, so i would be surprised ifit wasn't supported in firebug.
Basically:
// mydynamicallyloadedfile.js
... // do stuff
debugger; // triggers debugger
... // more stuff
And i would expect firebug to break at the debugger keyword
Related
Short background: I'm pretty new to Javascript and currently interested in customizing third-party websites to my needs — i.e. write scripts for Greasemonkey and the like. Often those sites are bloated with libraries like Jquery, Bootstrap, etc. which makes it even harder to figure out how exactly they work.
When I analyze a new website and want to know what code gets executed, I can use Firebug to create breakpoints or watchpoints and then single-step through the code. However, this does not work for code that already runs while/when the website first loads. How can I single-step through this part? Basically I'm looking for a way to set a breakpoint to the point before even the first Javascript code is executed.
If there are better tools for this than Firebug I'm all open for suggestions. Please keep in mind that I do not control the website, so changing the site's code is out of the question.
If it's enough for you to stop at the load event of the page (normally some code gets executed before that event), you can do the following:
Switch to the HTML panel and there to the Events side panel.
Scroll down to the section saying Other listeners for Window
Right-click the function under the 'load' event (might be one with an arrow besides it) and choose Set Breakpoint from the context menu.
Note: There might be a 'DOMContentLoaded' event handler, which is called before the 'load' event. So, if that exists, set the breakpoint at that function.
Reload the page.
Here's a screenshot of that menu:
As mentioned above, normally some code is already executed before the 'load' event is fired, like libraries getting loaded or some global variables being initialized. Though as far as I know, there is no option in Firebug (or other browser developer tools) to stop the script execution at the very first executed JavaScript statement.
But it's normally still quite easy to set a breakpoint at that line. It just requires some manual searching:
Inside the Script panel select the first script called Inline from the Script Location Menu (the third toolbar button from the left).
Search for the first JavaScript line, or, if there is no inline JavaScript, select the script within the first <script> element from the Script Location Menu.
Set a breakpoint at the first line of the script.
Reload the page.
I have a custom JS script which I load into SharePoint and have problems to get my init method executed after SP is finished with its own initializing.
_spBodyOnLoadFunctionNames
I tried the "official" way first and added my function name to the list of executed functions after body load with _spBodyOnLoadFunctionNames.push("myInitMethod"); but that does not fire on every page load, I can't rely on that.
ExecuteOrDelayUntilScriptLoaded
Then I tried to use ExecuteOrDelayUntilScriptLoaded(myInitMethod, "sp.js"); function but it does not fire on every page load either.
Both ways work - but not every time. I assume that my script is loaded sometimes before the SP is initialized. This happens mostly on Chrome but on IE as well.
How can I make sure that my script is executed when SP is ready?
Note: There is an interesting behaviour when the page is loaded and the SP object is not fully initialized (the registered functions in ExecuteOrDelayUntilScriptLoaded has not been called): As soon as I click on the "Navigate Up" anchor in the page (where you can see the hiarchy of the subsites) the following files gets loaded and my init function (registered in ExecuteOrDelayUntilScriptLoaded) gets called!
core.debug.js
sp.core.debug.js
ScriptResx.ashx
sp.ui.dialog.debug.js
sp.runtime.debug.js
sp.debug.js
So everything is fine after that click - but why not on pageload as it should be?
It seems that this behaviour is related to some issues between SP 2010 and Google Chrome - I don't have this issues on other browsers.
This is a timing issue that somehow occurs only on non-IE browsers.
See http://withinsharepoint.com/archives/256 for an explanation and very easy fix.
Hey I came across your question when I was looking for a way to delay my JavaScript from loading until sp.js has.
The reason your code you provided works some of the time is because (some of the time) SharePoint doesn't initialize all of it's codebase. This is a big problem in Google Chrome, but can happen in other browsers (non-IE) as well. To work around that particular issue you can do something like this:
if (typeof(_spBodyOnLoadWrapper)!='undefined'){_spBodyOnLoadWrapper();}
I put mine inside of $(document).ready().
And thanks for answering my question :)
I am trying to debug a very complex IE Intranet application. I am getting an alert with a custom message stating that an exception has occurred. I would like to find out more information about this exception as the message is not very helpful.
There is a master page which contains a lot of iFrames (and .htc files if that makes a difference) so I don't think that I can try and hijack window.alert. My last resort will be to try my luck with a file search.
Using IE 8, is there anyway I can detect where this alert is coming from? The ideal solution would be to somehow create a "breakOnAlert" function which inserts a debbuger statement at the correct alert location.
To clarify: The master page contains many iframes and I believe that the error+alert is coming from one of these. Each iframe is an aspx page (sometimes with dynamic html/javascript from the user) and contains inline and external JavaScript. Before posting I did try overriding alert in my page (a child page inside an iframe) but it didn't work. I am assuming that It doesn't work as each iframe has their own window object so they each have their own version of alert. For this to work I would need to find all iframes and override it for each one, something which I think would be very complicated to do. In the IE developer tools I can see a huge amount of script files (inline and external), so it would be very difficult to manually look for the alerts in there.
Since it's a real chore to do it in all iframes, I'd probably use Fiddler and programatically replace alert( with something like:
(function(n){alert(n);debugger;})(
IE should support the debugger statement, so you'd have a call-stack
This page explains how to do a text-replace in Fiddler
Example Fiddler custom rule to add to OnBeforeResponse:
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html"))
{
oSession.utilDecodeResponse();
var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
oBody = oBody.replace(/alert\(/gi, "(function(n){alert(n);debugger;})(");
oSession.utilSetResponseBody(oBody);
}
Ovveride alert function and set a breakpoint inside, then you can watch Stack Trace :)
function alert(message) {
var x = 'whatever';
}
$(function () {
alert('test');
});
I have a simple script that should cause one of three divs to be visible while the other two are not. The function that does the work is called like so:
onchange="switch(this);"
Firebug indicates that there is an error with this text:
Javascript Error: missing { before switch body
The erroneous code it indicates is line one of my .php file where the doctype is defined like so:
<!doctype html>
The funny thing here is that I have another page with the same doctype and a script that is virtually identical which works 100%. The only differences between the two pages are that in the one that does work, I call the script from
One more thing about the Firebug output: On the page that works, the firebug script window shows the javascript like so:
function onclick(event) {
switch(this);
}
Now, on the page where the script doesn't work, Firebug shows no output that has anything to do with onchange, onclick, or anything else. It just shows the code from my javascript file and tells me I am missing the opening bracket to the function when it is clear as day that it's there. Perhaps, even with the script in the head of my main php file, something odd is happening with scope, making the defined function invisible to the callers. Any ideas?
1: why would Firebug tell me the error is on line 1 where the doctype is defined when the function that fails isn't even in the same file?
2: Does the doctype effect the way that javascript runs, and how do I debug it if it does?
I would prefer to continue using only HTML5 for this project and use a javascript file for backwards compatibility. Any help is very welcome!
P.S. I am running Ubuntu 11.10 with Apache2, PostgreSQL, and PHP5. Everything works perfectly outside of this one javascript issue.
EDIT: Totally stupid question, but I guess these things happen sometimes. As stated in the answers, switch is a keyword in Javascript and changing the name of my function fixed the problem. I really should have noticed that since my editor highlights keywords in brown...
I am not deleting this post (unless someone else suggests I do) in case someone else out there runs into the same problem. I am giving the answer to the guy who answered it first because his answer also explained the reason why I was getting the error messages I was getting, which is probably more helpful in the long run than a simple awareness of switch statements.
This error has nothing to do with your doctype or HTML5. It occurs because switch is a reserved word used for switch statements; you cannot name a function switch.
So when you do switch(this) the JavaScript engine is expecting you to follow that up with the rest of the switch statement, including the opening {, the switch body, and then the closing }. When you don't do that, it throws the given error.
The error is on "line 1" because you used an inline event handler, which in Firebug's mind is a JavaScript file with one line---that line simply being switch(this);. Firebug does not deal in line numbers of HTML files, only those of JavaScript files---whether they be real JavaScript files, or "virtual" ones generated by inline event handlers.
switch is a keyword in javascript, rename your function to something else like myswitch.
switch is a keyword in Javascript
I have a webpage which loads properly formatted html forms using AJAX calls. This HTML also loads javascript code along with it and it is not working. As I am using jQuery I tried to add live() but it didn't help me. Now I need to debug this. How can I set breakpoints or watch on this code using firebug? I am using jQuery1.3 and can not deviate from it.
TIA
I'm uncertain from reading your question as to whether or not you have access to and can modify the dynamically loaded script, but if you do, add this statement:
debugger;
where you want your breakpoint.
Also note that although Firebug is perfectly capable of displaying dynamically loaded scripts, I think it hides them by default.
Also, if you have the option of using Chrome or Safari, you can just throw an exception from the point where you want to break, then set the Chrome or Safari debugger option to break on any exception. For example:
try {
throw new Error("");
}
catch () {}