Unable to inspect/debug Qualtrics Javascript code in Firefox - javascript

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.

Related

Firefox - Disable 'debugger' keywords

How do I tell Firefox not to stop if it sees a debugger keyword?
I need to avoid a continuous debugger loop in case the website uses debugging protection generating debugger statements on the fly using timers.
Here is an example. In case you open the debugging console the script will throw tons of debugger statements, which will block you from normal debugging work.
An example website is http://www.avito.ru - the biggest classified site in Russia. Open it and then open the debugger console and it will be immediately stop at the debugger keyword in generated script.
(function(x/**/) {
(function(f){
(function a(){
try {
function b(i) {
if(
(''+(i/i)).length !== 1 ||
i % 20 === 0
) {
(function(){}).constructor('debugger')();
} else {
debugger;
}
b(++i);
}
b(0);
} catch(e) {
f.setTimeout(a, x)
}
})()
})(document.body.appendChild(document.createElement('frame')).contentWindow);
});
In the current version of Firefox at writing this answer (ver 63.0.3), in the Developer Tools, the Debugger section, there's an icon with the tooltip "Skip all pausing" or "Deactivate breakpoints". When enabled it seems to disable stopping at any debugger instruction.
Obviously the page tries to avoid people from debugging their JavaScript code with that construct.
Debugging in Firebug
Firebug allows to set disabled breakpoints on the debugger statements. Because the page generates a variable call stack depth, you'll need to set those disabled breakpoints for all of them to be able to debug the JavaScript properly. Unfortunately, Firebug seems to be buggy when it comes to set those breakpoints.
Furthermore, Firebug doesn't have an option to ignore all debugger statements.
So, if you don't need to debug JavaScript but only HTML, CSS, network requests, etc., you can simply disable the Script panel to avoid these annoying debugger halts. To do so, right-click the Script tab and click on Enable within the opening menu.
Note: Because Firebug development is discontinued, it's useless to file an enhancement request for it.
Debugging in Firefox DevTools
Unfortunately, the Firefox DevTools currently don't allow to avoid halting on debugger statements. So you have to wait until bug 1300934 (which mentions the same website as an example), bug 925269 and/or issue 828 are fixed.
Furthermore there is no way to disable the Debugger panel completely, which is filed as bug 1247198.
if you use Greasemonkey you can rewrite setTimeout/setInterval function to disable the script
unsafeWindow.setTimeout = function () {};
Chrome
in chrome you can edit the breakpoint and put a condition that is always false, it won't hit the debugger anymore
another option is to use "never pause here"
Firefox
for firefox, you can blackbox the script that you don't want to be hit by the breakpoint. for me it causes to hang the firefox. but when you restart the browser. then it's okay,
If you want to stop debugging without losing your breakpoints, then you need to disable breakpoints, not only to deactivate. Click right above the list of breakpoints and select Disable breakpoints. Then even if you refresh the page all breakpoints remain disabled. Tested with Firefox 101.0.1 on Ubuntu.

Is there any way to force Internet Explorer to break on alert()?

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.

How to write and run scripts in the Google Chrome Javascript Console?

I recently switched from Firefox to Chrome and I (probably) missed an important feature. I was used to test javascript snippets on FF from within the Firebug console this way: open the console, write the script and finally press CTRL + Return to execute the code.
It seems not possible to do the same in Chrome console, as when I type some code there and press return to start a new line the code is executed immediatly.
Is there a way to replicate the Firefox behavior on Chrome?
Thanks.
It seems that there is no explicit “multiline mode”.
But you can:
Paste code (it will preserve multiline)
Shift + Return to add a new line without executing the script
Related bugs:
https://bugs.webkit.org/show_bug.cgi?id=30553
http://code.google.com/p/chromium/issues/detail?id=72739
You can also hit Shift + Enter to start a new line without running the code in Chrome's console: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#multiline-commands
Install Firebug Lite for Google Chrome. It has got a console.
Don't look for a full fledged Firebug. You will be disappointed :)
Oops,I didn't read properly at first. My bad!
In Firebug Lite, take Console. Then you will see a tiny red up-arrow at the right corner.
Click on it and you will get a multi-line console. Won't you?
I recommend this:
Write debugger; and hit Enter, in the console tab
This takes you to the Sources tab; if not, make sure debugger breakpoints are active
Now you can write whatever you want in the Sources tab, which acts like a full IDE with features like newline and indentation
Select any part of your code to run, and right-click, choose Evaluate in console
Better way of doing this using Chrome featue i.e Snippets where you can write javascript and save it in chrome developer console.
Its available underneath source inside developers tools while inspecting element.
More info about the snippets can be find on this link.
It was available in Chrome canary and I guess now it is available in default chrome browser also.

Google Chrome won't let me place breakpoints

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.

why does firebug debugging sometimes work and sometimes not?

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.

Categories