Why Does JavaScript Only Work After Opening Developer Tools in Ie Once

Why does JavaScript only work after opening developer tools in IE once?

It sounds like you might have some debugging code in your javascript.

The experience you're describing is typical of code which contain console.log() or any of the other console functionality.

The console object is only activated when the Dev Toolbar is opened. Prior to that, calling the console object will result in it being reported as undefined. After the toolbar has been opened, the console will exist (even if the toolbar is subsequently closed), so your console calls will then work.

There are a few solutions to this:

The most obvious one is to go through your code removing references to console. You shouldn't be leaving stuff like that in production code anyway.

If you want to keep the console references, you could wrap them in an if() statement, or some other conditional which checks whether the console object exists before trying to call it.

Weird IE, Javascript only works in development mode (F12)

Taken from the comments on the original question:

Why does JavaScript only work after opening developer tools in IE once?

For OP it was the caching of his Ajax request causing the issue. Solved by disabling the cache:

$.ajax({cache: false, ...})

Javascript running only once on Internet Explorer, runs properly when developer tools is open

(I put in comments but will make this an answer now as it appears to have solved the problem) get requests are cached by IE but when the developer console is open it does not perform this cache.

three ways to fix:

1. add a timestamp to the request to trick the browser into thinking it is making a new request each time

   var requestUrl = '/Tools.ashx?command=validscreen&time='+new Date().getTime();
   

2. set the response header to no-cache

3. make a POST request as these are not cached
   (as pointed out by @juanmendes not ideal you are not editing a resource)

Javascript code only works in Chrome while Chrome Developer Tools are open

You have incorrect calculations for xy, which goes beyond canvas.

If your canvas is located down in the page with the scroll

canvas.offsetTop would be amount the space from the start of the scroll (grows to infinity when your scroll grows), but e.clientY would grow to window height (display height) which is a fix number.

I would suggest using mouseEvent.offsetX which is supported in ie9+ and test it in different conditions on different browsers. I tested it in Chrome and it works perfect w/ and w/o scroll.

 const findxy = (res, e) => {
    if (res == 'down') {
      prevX = currX;
      prevY = currY;
      currX = e.offsetX;
      currY = e.offsetY;

      flag = true;

    }
    if (res == 'up' || res == "out") {
      flag = false;
    }
    if (res == 'move') {
      if (flag) {
        prevX = currX;
        prevY = currY;
        currX = e.offsetX;
        currY = e.offsetY;
        draw();
      }
    }
  }

---

Related Topics