I have added a very simple javascript/jQuery code in Qualtrics. It is working fine. But, for my own understanding and since I might be integrating more complex jQuery codes with Qualtrics in the future, I wanted to examine the flow in Firefox. I tried both Firebug as well as the browser's inbuilt Web Developer tools, but I am unable to see any navigation into the javascript code. In fact, Firebug is saying there are no javascript codes.
Following are my firefox and firebug versions:
Firefox 53.0.3
Firebug 2.0.19
Any help will be appreciated.
PS: My Qualtrics code:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
var txtItem =jQuery("#hiddentext");
if (txtItem.length ) {
//alert("jquery retrieval worked - DOM element found");
txtItem.fadeIn(5000);
txtItem.css({"background-color": "yellow", "font-size": "200%", "display": "inline"});
} else {
alert("jquery retrieval did not work - DOM element NOT found");
}
});
Firebug doesn't work anymore. You'll have to use the built-in developer tools. If you are running under JFE in Qualtrics, add the following command to your script where you want to start stepping through.
debugger;
Place a breakpoint within your script or add a debugger; statement where you want the script execution to stop.
If it doesn't stop at the expected line, this may have two reasons:
An exception thrown before the execution reaches your line. In that case you should check the console for JavaScript errors. Stopping the script execution on exceptions can be disabled via Debugger settings (little gear icon at the right side of the panel) > Pause on exceptions.
It is a bug in the Firefox DevTools. In that case you should first check whether this issue can be reproduced in Firefox Nightly (which has a new debugger UI). If it can be reproduced there, you should file a bug report for it.
I want to set a breakpoint to line 111 in the script 'bootstrap-tokenfield.js' for debugging purpose as seen in the attached picture.
You can see the javascript is present in the resources.
Why chrome does not let me ?
You can put break point by viewing source from "Sources" tab of Developer tools in the chrome.
Just click on line number to add breakpoint
The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.
Syntax
debugger;
The following example shows code where a debugger statement has been inserted, to invoke a debugger (if one exists) when the function is called.
function potentiallyBuggyCode() {
debugger;
// do potentially buggy stuff to examine, step through, etc.
}
When the debugger is invoked, execution is paused at the debugger statement. It is like a breakpoint in the script source.
Reference
https://developer.mozilla
keep the debugger on the function where you want to debug
Now open the Chrome and Open "Source" tab
Now try to reload the page and page will be appear in the Debug Mode
at that point.
I often use this to debug JavaScript in IE (fiddle):
if (confirm("Debug from here?"))
debugger;
If I choose "yes", I see the prompt to start Visual Studio just-in-time debugger, which I proceed with to debug the script in Visual Studio.
Now I want to use IE built-in debugger instead of Visual Studio. I use this workaround:
if (confirm("Debug from here?"))
throw "debug";
It works, but I have to check "Continue after exception" in IE built-in debugger every time I hit throw. Also, throw is different from debugger (which just continues execution if debugging is disabled in IE options).
Is there a way to make debugger keyword to break into into IE built-in debugger (F12) rather than Visual Studio debugger?
Setting breakpoints in IE F12 tools, then refreshing the page with F5 is not an option, because the page is a postback.
EDITED. Chrome browser actually gives me the desired behavior. To see what I mean, open Chrome, hit F12 to open Dev tools, then navigate to http://jsfiddle.net/jTwsh. Click [OK] upon confirm and you should get into debugger right on the debugger line.
Suggest to disable the Just-In-Time debugger for Script; if you do not want to use it for.
See the below reference on how to enable/disable JIT Debugger:
Enable/Disable Just-In-Time Debugging
I am using IE8, there i need to start the script debugging by pressing 'Start Debugging' button or F5 under 'Script' tab in Developer Tools.
See the attached screenshot:
Don't run the website in debug. It is possible to run website in 'normal' runtime:
Right-Click on any page => View in browser
or ctrl+f5
When stepping through JavaScript code in Google Chrome debugger, how do I terminate script execution if I do not want to continue? The only way I found is closing the browser window.
Pressing "Reload this page" runs the rest of the code and even submits forms as if pressing F8 "Continue".
UPDATE:
When pressing F5 (Refresh) while a script is paused:
Google Chrome (v22) runs the script. If the script submits HTTP request, the HTTP response for that request is displayed. The original page is not refreshed.
IE 9 just freezes. However IE has an option "Stop Debugging" which, when pressed (provided you did not press F5 earlier), continues to run the script outside debugger.
Firebug behaves identically to Chrome.
Closing and then opening again the browser window is not always the next easiest way
because it will kill browser session state and that may be important. All your breakpoints are also lost.
UPDATE (Jan 2014):
Refresh while debugging:
Chrome v31: lets scripts to run and stops on further breakpoints (but does not submit ajax requests), then refreshes.
IE 11: refresh does nothing, but you can press F5 to continue.
Firefox v26: lets scripts to run but does not stop on further breakpoints, submits ajax requests, then refreshes.
Kind of progress!
Navigate to the same page while debugging:
Chrome v31: same as Refresh.
IE 11: scripts are terminated, new browser session is started (same as closing and opening again).
Firefox v26: nothing happens.
Also juacala suggested an effective workaround. For example, if you are using jQuery, running delete $ from console will stop execution once any jQuery method is encountered. I have tested it in all above browsers and can confirm it is working.
UPDATE (Mar 2015):
Finally, after over 2 years and almost 10K views, the right answer was given by Alexander K. Google Chrome has its own Task Manager which can kill a tab process without closing the tab itself, keeping all the breakpoints and other stuff intact.
I even went as far as BrowserStack.com to test it in Chrome v22 and found that this was working this way even at that time.
Juacala's workaround is still useful when debugging in IE or Firefox.
UPDATE (Jan 2019):
Chrome Dev Tools at last added a proper way to stop script execution which is nice (although a bit hidden). Refer to James Gentes's answer for details.
In Chrome, there is "Task Manager", accessible via Shift+ESC or through
Menu → More Tools → Task Manager
You can select your page task and end it by pressing "End Process" button.
As of April 2018, you can stop infinite loops in Chrome:
Open the Sources panel in Developer Tools (Ctrl+Shift+I**).
Click the Pause button to Pause script execution.
Also note the shortcut keys: F8 and Ctrl+\
2020 April update
As of Chrome 80, none of the current answers work. There is no visible "Pause" button - you need to long-click the "Play" button to access the Stop icon:
One way you can do it is pause the script, look at what code follows where you are currently stopped, e.g.:
var something = somethingElse.blah;
In the console, do the following:
delete somethingElse;
Then play the script: it will cause a fatal error when it tries to access somethingElse, and the script will die. Voila, you've terminated the script.
EDIT: Originally, I deleted a variable. That's not good enough. You have to delete a function or an object of which JavaScript attempts to access a property.
[2022 edit: this was reported as https://bugs.chromium.org/p/chromium/issues/detail?id=774852 and https://bugs.chromium.org/p/chromium/issues/detail?id=1112863 in 2017, and was just recently marked as fixed 5 years later, so if you are still experiencing this, you should update Chrome (and in general keep it updated). If you are experiencing this issue in 2023 or forward, it may be a different issue, a bug regression, etc.]
If you are encountering this while using the debugger statement,
debugger;
... then I think the page will continue running forever until the js runtime yields, or the next break. Assuming you're in break-on-error mode (the pause-icon toggle), you can ensure a break happens by instead doing something like:
debugger;throw 1;
or maybe call a non-existent function:
debugger;z();
(Of course this doesn't help if you are trying to step through functions, though perhaps you could dynamically add in a throw 1 or z() or somesuch in the Sources panel, ctrl-S to save, and then ctrl-R to refresh... this may however skip one breakpoint, but may work if you're in a loop.)
If you are doing a loop and expect to trigger the debugger statement again, you could just type throw 1 instead.
throw 1;
Then when you hit ctrl-R, the next throw will be hit, and the page will refresh.
(tested with Chrome v38, circa Apr 2017)
Refering to the answer given by #scottndecker to the following question, chrome now provides a 'disable JavaScript' option under Developer Tools:
Vertical ... in upper right (in Developer Tools menu, not in Chrome main menu)
Settings (in newer Chrome versions it is visible separately as a cogwheel besides the ... button, not under it)
And under 'Preferences' go to the 'Debugger' section at the very bottom and select 'Disable JavaScript'
Good thing is you can stop and rerun again just by checking/unchecking it.
Good question here. I think you cannot terminate the script execution. Although I have never looked for it, I have been using the chrome debugger for quite a long time at work. I usually set breakpoints in my javascript code and then I debug the portion of code I'm interested in. When I finish debugging that code, I usually just run the rest of the program or refresh the browser.
If you want to prevent the rest of the script from being executed (e.g. due to AJAX calls that are going to be made) the only thing you can do is to remove that code in the console on-the-fly, thus preventing those calls from being executed, then you could execute the remaining code without problems.
I hope this helps!
P.S: I tried to find out an option for terminating the execution in some tutorials / guides like the following ones, but couldn't find it. As I said before, probably there is no such option.
http://www.codeproject.com/Articles/273129/Beginner-Guide-to-Page-and-Script-Debugging-with-C
http://www.nsbasic.com/app/tutorials/TT10.htm
You can pause on any XHR pattern which I find very useful during debugging these kind of scenarios.
For example I have given breakpoint on an URL pattern containing "/"
If you have a rogue loop, pause the code in Google Chrome debugger (the small "||" button while in Sources tab).
Switch back to Chrome itself, open "Task Manager" (Shift+ESC), select your tab, click the "End Process" button.
You will get the Aww Snap message and then you can reload (F5).
As others have noted, reloading the page at the point of pausing is the same as restarting the rogue loop and can cause nasty lockups if the debugger also then locks (in some cases leading to restarting chrome or even the PC). The debugger needs a "Stop" button. Nb: The accepted answer is out of date in that some aspects of it are now apparently wrong. If you vote me down, pls explain :).
Go to the Sources tab and select Filesystem subTab
Select a folder, containing the file you execute
Accept folder access recuest
Select the file you execute
Put a breakpoint inside the file you execute
Click the "Pause script execution option"
Select the copy link address option in the RMB context menu
Paste the copied address into the browser address bar to open the file
File execution will be stopped at the breakpoint
Open the source tab in 'Developer Tools', click on a line number in a script that is running, this will create a breakpoint and the debugger will break there.
There are many appropiate solution to this problem as mentioned above in this post, but i have found a small hack that can be inserrted in the script or pasted in the Chromes console (debugger) to achieve it:
jQuery(window).keydown(function(e) { if (e.keyCode == 123) debugger; });
This will cause execution to be paused when you hit F12.
I'm trying to debug an error message in a large and complicated frames based web/ASP.Net app using IE8 and Visual Studio 2010. Specifically, I am getting a "Member not found" message box which appears to be a straightforward JavaScript alert(). Unfortunately I don't know where in the code the problem is happening, and fiddler2 wasn't much help in this case.
My question is, can I get IE to break at the alert() call so that I can debug it?
String search for "Member not found"
Add 1 / 0; before the line.
Turn on break on all errors.
(I assumed you knew the developer tool existed. Hit F12 and navigate to the script tab)
Edit:
Thanks to #DmitriyNaumov
var aalert = window.alert;
window.alert = function() {
aalert.apply(this, arguments);
1 / 0;
}
You can try using the IE Developer Toolbar from Microsoft. I don't know if it allows you to Set JS breakpoints, but it is a great tool to have on hand anyway!
You can use the IE debugger , press F12 and then under the script tab you can add breakpoints
Using IE 8 you can use Developer Tools which is a little like Firebug for Mozilla Firefox.
http://www.microsoft.com/download/en/details.aspx?id=18359
(for more information)
this way you can create breakpoints and debug the script execution on the page step by step
Just press F12
Change alert into a new function that throws a proper error.
window.alert = function(msg) {
throw "Alert: " + msg;
};
Older versions of IE don't allow overwriting window properties like alert in this way in JavaScript ... but you can still do it with VBScript.
Sub alert(msg)
Err.Raise 8, "Alert", msg
End Sub
If you go the VBScript route, make sure it precedes any JavaScript that references the alert function, or you'll have missed your opportunity.
If it's a window.alert, you can do this:
Enable external debuggers in IE.
Attach visual studio as a script debugger.
Reproduce the problem.
While the alert box is shown, break in the debugger.
When you dismiss the alert, the debugger will be paused on the next line of code.
Use the current call stack to set a breakpoint where ever before the call will be most useful for the next time.
Unfortunately this trick only applies to alert and confirm, since they are modal dialogs.