Site behaves differently when developer tools are open IE11

internet explorer 11 developer tools
how to enable f12 developer tools in ie 11
javascript only works after opening developer tools ie 11
f12 developer tools not working in ie11 windows 10
internet explorer 11 enable developer tools registry
internet explorer 11 javascript console
ie developer tools closes on redirect
how to debug javascript in internet explorer 11

Im using the following template in IE11 and can not figure out why the sidebar sings in every time navigation is happening. When developer tools are open it behaves as I would like it to. It is easily demoed by clicking on any one of the tabs under UI element in the tree while running IE11. However you will notice if F12 developer tools are open the side bar does not slide in every time navigation happens. This is not an issue in chrome. There is an error with fastclick that may show up however I have ran without fastclick and it still happens. Any help would be great. Thanks. https://almsaeedstudio.com/themes/AdminLTE/pages/UI/general.html

Try removing any console.log() from your code.

console.log() which is to help out when debugging Javascript can cause IE to completely stop processing scripts on the page. To add to the mystery, if you keep watching your page in IE with devtools open - you won’t notice an issue at all.

Explanation

The reason for this is the console object is not instantiated unless devtools is open in IE. Otherwise, you will see one of two things:

  1. Javascript won’t execute correctly
  2. Console has cryptic errors, such as ‘object is undefined’ or others of that nature

Nine times out of ten, you have an errant console.log in the code somewhere. This does not affect any browser other than IE.

Why does JavaScript only work after opening developer tools in IE , The console object is only activated when the Dev Toolbar is opened. As @​plus- pointed in comments, latest version is available on their GitHub page When the developer console is open, caching is less aggressive. really uses its HTTP cache (at least by default in IE 11) like it does in normal mode. After you opened Developer Tools, you may need to wait for some time before browser displays all recorded messages. In my case is was about 30 seconds. For more information check Using the Console to view errors and debug article on MSDN.

Another potential cause, especially if you are performing ajax calls, is the ajax response may be cached when dev tools are closed, but refreshed from the server when dev tools are open.

In IE, open the Network tab of Developer Tools, click the play icon, and un-set the Always refresh from server button. Then watch to see if any of your ajax calls are coming back with a response code of 304 (Not modified). If they are, then you are not getting fresh data from the server and you need to update the cacheability settings on the page that is being called via ajax.

Page renders improperly in IE before developer tool has opened , Once you open the developer tool, the bug is gone! DEAD END!!! Because I cannot open developer tool, so I have to debug with alert . It is really  When the Internet Explorer is launched, press F12on the keyboard. Way 2: Open Developer Tools via the Tools icon. In IE, click the top-right Tools icon, and choose F12 Developer Toolsin the list. Way 3: Open them in the Tools menu. Select Toolson the menu bar in IE, and then tap F12 Developer Toolsin the options.

Adding onto the already great answers (since I can't comment - requires 50 rep points), agreeing with the answer from @sam100rav and the comment from @storsoc, I discovered that in IE11 version 11.1387.15063.0 with updated version 11.0.90 (KB4462949), that window.console indeed exists as an empty object (window.console = {}). Hence, I used a variation of the polyfill from @storsoc as shown below.

if (!window.console || Object.keys(window.console).length === 0) {
  window.console = {
    log: function() {},
    info: function() {},
    error: function() {},
    warn: function() {}
  };
}

Master IE11 Developer Tools · Raygun Blog, IE11 is the updated version of the IE web browser - and it's much more developer friendly. With IE Developer Tools, you're able to edit your site within the browser, CSS and HTML as well as preview page layout at different resolutions​. 5) Once you've closed the open windows, also close the Internet  ie-developer-tools × 253 internet-explorer × 118 javascript × 66 internet-explorer-8 × 64 internet-explorer-11 × 28 css × 25 internet-explorer-9 × 25 debugging × 20 html × 16 firebug × 15 jquery × 14 developer-tools × 8 ie8-compatibility-mode × 8 ie11-developer-tools × 8 google-chrome-devtools × 7 windows × 6 performance × 6

I'm assuming you've fixed this since you posted it as I can not see the behavior you describe in your link.

However, I have recently run into a similar issue where the dev tools being open changed the behavior not because of console issues, but because opening the tools changed the width of the window. It was the window width difference that triggered an underlying bug in my case.

Related post here.

Internet Explorer mode and the DevTools, When these web sites are viewed in Microsoft Edge (Chromium), a full instance of with a message that reads: "Developer Tools are not available in Internet Explorer mode. To debug the page, open it in Internet Explorer 11. This is a quick reference to the tools, commands, and menus available in F12 tools, built into Internet Explorer 10. Each element of the interface is identified and has a short description of what it does. For more information about using the Developer tools in Windows Internet Explorer 8, see Developer Tools User Interface Reference.

It's possible you've got the compatibility mode set to a later version of IE in your developer console (see the highlighted section)

How to debug javascript in internet explorer 11, If you'd like to know how to debug a website with Internet Explorer F12 tools, Internet Explorer 11 Open the Developer tools from the tool bar or by pressing F12 and At a first glance the DOM explorer does not look very different, but there is Explorer 10 or earlier, may behave incorrectly with Microsoft's latest browsers. It has been observed that the window.open () JavaScript method is behaves differently in IE 10 browser. Method: Window.opne () Purpose: To open a page in new browser window. Syntax: window.open (URL, name, specs, replace) Parameter Details: URL: URL of the page to open. Name: name of the page.

Emulate and Test Other Browsers, Open Web Developer Advocate at Google • Tools, Performance, let you automate unit tests for your site across different platforms. Test your site on browsers running on real devices to be certain everything behaves as expected. use IE 11's Emulation to simulate how your page would look in older  Browser emulators are great for testing the responsiveness of a site, but each does not emulate differences in API, CSS support, and certain behaviors that you see on a mobile browser. Test your site on browsers running on real devices to be certain everything behaves as expected. Firefox Responsive Design View

Handling common JavaScript problems, Browser developer tools have many useful features for helping to let request = new XMLHttpRequest(); request.open('GET', requestURL); Refresh the page in the browser, and you will get an output in the Modernizr's list of HTML5 Cross Browser Polyfills is a useful place to find polyfills for different  This can cause unexpected behavior, because code targeted at Windows Internet Explorer 8 can run very differently in Microsoft Edge; or a feature your browser is perfectly capable of supporting might be disabled because of an assumption made by the developer.

Handling common HTML and CSS problems, Responsive design problems are also common — a site that looks good with CSS and HTML arises when different CSS rules begin to conflict with one another. The developer tools built into most browsers also feature useful tools for You can add fallback content in between the opening and closing  1. While you have the website open in Internet Explorer, open the Tools menu (Alt+T), and click/tap on Enterprise Mode to check (on) or uncheck (off) it for what you want to do. (see screenshots below) To Turn On or Off Enterprise Mode for a Website in IE11 F12 Developer Tools. 1. While you have the website open in Internet Explorer, press the

Comments
  • all calls to console are commented out, twice checked now and still no go
  • @poptarts just out of the curiosity, did you figure out what's the root cause?
  • That was precisely what we were running into on an intranet site that had to run in Compatibility View mode: any console.log() call would just quietly halt all JavaScript. Instead of commenting out console.log() calls we just polyfilled a stub so that others browsers (or IE with console open) would still provide diagnostic value: if (!window.console) { window.console = {}; window.console.log = function () { } };
  • This helped me thanks! The site was working with Developer Tools. Thanks!