iOs Safari running wrong function in minified Javascript - javascript

I have an angularJS SPA that is published from Visual Studio using MVC4 bundling to minify most of the scripts. The problem I'm having is that on Safari, the wrong function is being run.
Here are some screen captures to show the issue:
Note the definition of the function, and how it's identified as "v" in the popup available on rollover.
I've outlined function v in red. You can see in the call stack Safari thinks that's what it's calling. Note the function definition matches the one in the popup. Yet, the line we're stopped on is actually in function d. The yellow lines are causing the bug, so we really need to be in the correct function.
I have no idea what to do about this. I tried renaming both methods, which forced the bundling to happen again, but that did not resolve the issue. Has anyone seen anything like this?
I'm running an iPad mini, but this has been reported on multiple devices.

Related

webdriver.io rightClick immediately closes when executing tests, but works in repl

We're writing tests in webdriver.io 4.14.0 (with mocha and chai) , and I'm running into a strange issue that I can't get to the bottom of.
The issue revolves around the following code:
var elem = $("#myid");
elem.waitForText();
elem.rightClick() // also tried browser.rightClick("#myid");
In both cases above, the expectation is that a context menu in our application appears. When running the test from the console, I can see the context menu flash briefly, and disappear (this causes other commands to then fail since the required elements aren't visible).
The weird thing (to me) is that if I put browser.debug(), enter repl mode and execute the same commands there, everything works, and the context menu stays open.
Is there something that I'm missing when writing the test case?
I've tried both the stable 3.* and 4.0 alpha packages of selenium. Additionally, I'm using Chrome 71.
If anyone else encounters something like this, make sure you find something on your page that you can use to determine if any scripts are running. In my case, other scripts were trying to overwrite the DOM and closing the menu (something that wasn't happening in REPL because they had already finished).

Chrome Developer Tools keeps breaking where no breakpoints are set

When debugging JavaScript code using Chrome Developer Tools the debugger pauses on code where breakpoints are not set. I don't have the Pause on exceptions feature enabled, and there definitely are not breakpoints set (see attached image).
I asked a similar question before which was helpful but didn't quite solve this issue (previously I had the Pause on exceptions enabled). In the example below I swapped out the minified version of kendo.all.min.js for the unminified version, which allows me to see where the script execution is being paused, but I don't know why it is being paused. This happens a lot with jquery.min.js too.
I fixed my breakpoints problem by clicking the "Restore defaults and reload" button located in the “Settings” section. To find the button: In Developer Tools click the cogged wheel next to the top right three vertical dots. (Note: If using older versions of Google Chrome, click on the top right three vertical dots and then select “Settings F1”). The button “Restore defaults and reload” is at the bottom right.
Also note that it really restores defaults - you lose all previously saved breakpoints and any files you have open in Developer Tools will be closed.
I got this solution from: Chrome javascript debugger breakpoints don't do anything?
Accepted answer to Import/export Chrome devtools breakpoints & settings between computers reminded me to check "devtools-on-devtools" and in the DevTools' inner Application Local Storage remove the faulty element(s) of the JSON list value for key breakpoints to fix my same issue without resetting everything.
Later it happened again, so I wrote this console snippet:
((stores, matchKey, removeMatchingRegExp, dryRun)=>{for(let store of stores){
let r = JSON.parse(localStorage[store]), l = r.length;
r = r.filter(b=>!b[matchKey].match(removeMatchingRegExp));
if(!dryRun) localStorage[store] = JSON.stringify(r);
console.log(`${dryRun ? 'Would' : 'Did'} remove ${l - r.length} entries from ${store}:`, r)}; return 'OK'})
(['breakpoints', 'domBreakpoints'], 'url',
new RegExp('^https?://example.com/script.js$'), true)
Note:
Provided without warranty: Use at own risk. Backup your data.
Edit it - at least the RegExp argument - to suite your needs.
The last-most boolean should be false to disable dryRun.
Outer DevTools must be reopened for effect.
I was able to resolve this by updating Chrome. I don't think the version matters, just the process of updating resets all of the breakpoints that have been stored in the cache.
F8 has two functionalitys. 1. Skip ot next Breakpoint, 2.stop wherever the Browser is executing code. This works even if you have no breakpoint set. For example spamming F8 when you forgot to deactivate breakpoints might cause the browser to stop anywhere.
When you go to the debugger shortcuts you can see that F8 has the functionality to Pause / Continue. But it sadly seems like you can't split them on two different keybinds.
Since I know this feature I never ran into this "bug" anymore.
I'm posting this answer in case it will help someone who, like me, missed an important clue as to the cause of the phantom breakpoint behavior. In my case, it was "user error" --mine. The root cause was a forgotten "debugger;" statement in a JavaScript file that was itself generated from TypeScript. I had removed the debugger; statement from TypeScript locally, run and tested without issue from localhost. But I had pushed the version with the statement to remote and it built and released to our dev site with the statement present. The dev site build excludes the TypeScript source files. When the debugger statement was hit, Chrome tried to load the .ts source and displayed "Could not load content..." I just assumed it was at a breakpoint (I'd set many during testing). And when I saw "No breakpoint" I assumed Chrome was experiencing the issue addressed in this thread. If I'd bothered to look in the Call Stack trace, I would have seen the source code line in the .ts file and pretty quickly figured it out. Here's a screenshot:
just disable the cache and reload the page, the breakpoints will show up again

Javascript caching on iPad HTML5 fullscreen web application

I'm having an problem where the iPad insists on loading an old copy of a .js file, instead of the current one. Strangely enough, this only happens when the page is in fullscreen mode, not when it's being run from the page.
I'm not using any kind of cache manifest;
When I open the page on Safari, it behaves as dictated by the latest version of the .js;
When I open the page through the icon, it behaves as dictated by the old .js;
Killing the running application, deleting the icon and then creating it again doesn't solve the problem; it's still using the old .js, even while in full screen.
Does anyone have an idea of what's going on?
-- update --
This seems to be an iOS 5 bug.
-- Workaround (a.k.a. ugly hack) --
Simply add some fake http params to the script tag, so that the cache thinks it's entirely another JS:
<script src="js/pentaho-jqm-repository.js"></script>
Becomes:
<script src="js/pentaho-jqm-repository.js?fkn-ios-bug=1"></script>
After using the aforementioned workaround (adding a fake parameter to the URL) and then changing it back, strangely enough, the problem stopped happening. Of course, in a production environment, one wouldn't be able to do this, so I think I'll just start numbering the js versions so that the end user won't have this problem.

JavaScript breakpoints no longer working in Visual Studio 2008?

My Visual Studio JavaScript breakpoints are no longer working. They don't now. I have tried everything that I could find on the web. the javascript statement debugger dosn't work in FF either (and no, it's not on the first line of the function) debugger does work in IE but I need debug for FF issues. Firebug, IMHO sucks - just look at that watch list you have to wade through. I need the immediate window to check vars ect. I have tried in the latest FF, Chrome and IE. But VS2008 just won't break anywhere in Javascript.
Debugging is enabled everywhere on everything, I have tried attaching to the browsers, deleting temp files, clearing caches, ect, ect, ect, ect, ect. Tried every thing short of a 12 gauge shotgun (I'm saving my shells for the next microsoft employee I come across). The last thing I tried is a repair of VS. Nope, didn't work. I tried a complete VS uninstall, regclean, defrag while I was at it and then a reinstall of VS2008 and SP1. After the reinstall I tried a blank page with 1 button and one 3 line function shown below.
function TestIt() {
var x = 0;
debugger;
alert("In Test function");
}
put the breakpoint on the var x = 0; line. Nope, didn't work.
Microsoft doesn't have any answers, they act like it's the first that they have heard of it. Seems that this issue has been around since vs2003 and people still have this problem in vs2010. Ideas?
I got tired of iffy javascript debuggers and have been heavily using logging instead.
Have you tried Chrome's debugger? I've long since abandoned Firebug in favor of Chrome.

"SCRIPT28: Out of stack space" on website using IE9

I am having an issue where all link button controls on my page do not work once we deploy our website to our production server. Here are a few details:
We have 3 environments upon which we develop: Our local Machine, which uses local IIS7 to run for development; test environment which is an actual webserver behind our firewall(IIS6); Production which is our live webserver(IIS6). The website works fine on local machines and test server but once we click a link button on production server it hangs.
The problem does not exist in Chrome, or FireFox it only exists in IE9. It does not exist when you put IE9 in compatibility mode.
If I use the IE9 Developer tool bar and watch the scripts, as soon as you click one of the link buttons the console shows this error:
SCRIPT28: Out of stack space
, line 340 character 9
I am using quite a bit of JQuery and am wondering if this is causing an issue: However, I see no javascript errors.
Any thoughts?
Thanks for any suggestions.
As people said in comments: it means that infinite recursion takes place. Whether it is simple recursion or some devious path across code like a serpent biting its tail - unknown, it seems IE gives out no stacktrace, or does?
I've reproduced this issue when I'm doing the following code:
HTML
<span class="search-icon"><input title="search" type="submit" value=""></span>
JS
(function($) {
$('.search-icon').on('click', function(e) {
// The click event will call $('.search-icon').on('click', function(e) { .. } for every time
// which make an infinte loop in click event as long as there are no stop condition added here.
$(this).find('input').click();
});
})(jQuery);
I've solve this problem by changing my JS code to be:
(function($) {
$('.search-icon').on('click', function(e) {
$(this).closest('form').submit();
});
})(jQuery);
I hope this answer will be helpfull for you.
Can you post the code / a link to the code, or close this issue?
Common problems: you might have a closure problem in the html, thus different browsers interpret the html hierarchy differently, or you might be looping through a for(x in y) where x contains a backreference to y.
Check out the msdn page for info on this error. In my case, the error was caused by:
Your code triggered an event cascade.
An event cascade is caused by triggering an event that calls an event procedure that's already on the stack. ...
Basically, I was trying to trigger a click event (using jQuery) on a file upload control using the control's click event. Seems like it would cause infinite recursion. Perhaps you may be having a similar problems with your buttons.

Categories

Resources