How to debug RangeError: Maximum call stack size exceeded without developer console

Question

In a complex JavaScript app (with jQuery and jQueryUI), the JavaScript will occasionally throw an error. We catch and log these errors, but the stacktrace doesn't show the complete origin. Thus far, we've been unable to find the root cause of the error.

RangeError: Maximum call stack size exceeded 
at RegExp.[Symbol.replace] (native) at String.replace (native) 
at Function.camelCase (<jquery>) 
at Function.css (<jquery>) 
at Object.get (<jquery>) 
at init.cur (<jquery>) 
at init (<jquery>) 
at Function.Ya [as Tween] (<jquery>) 
at Object.createTween (<jquery>) 
at Object.r.Animation.r.extend.tweeners.* (<jquery>) 

and another one:

RangeError: Maximum call stack size exceeded 
at RegExp.[Symbol.replace] (native) at String.replace (native) 
at Function.camelCase (<jquery>) 
at Function.css (<jquery>) 
at (<jquery>)
at S (<jquery>) 
at a.fn.init.css (<jquery>) 
at HTMLImageElement.jc (<jquery>) 
at HTMLImageElement.e.complete (<jquery>) 
at i (<jquery>) 

Is there any way to get to the origin of the error without using the developer toolkit? The errors seem to occur only on Chrome and didn't occur when we were using the older version of jQuery. (we are on 3.1.1 now)

Answer 1

I guess we found the bug. In this JSfiddle it occurs:

https://jsfiddle.net/c41bgs24/12/

function completeFunc(){
  var $this = $(this);
  var fadeIn = $this.css("opacity") == 0;
  console.log("complete", (new Date()).getTime());
  $this.animate({
    opacity: fadeIn ? 1 : 0
  }, 2000, "linear", completeFunc);
}

// Make sure the tab is switched out within 3 seconds. This tab needs to be inactive when the timeout triggers for the bug to take place.
setTimeout(function(){
    $("#test").each(completeFunc);
}, 3000);

Make sure you tab out of it before 3 seconds to make sure the bug occurs.

We've made a bug report to jQuery about this: https://github.com/jquery/jquery/issues/3507