关于Internet Explorer：为什么JavaScript只在IE中打开开发人员工具后才能工作？

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

IE9 Bug - 只有在打开一次开发人员工具后才能使用JavaScript。

我们的网站为用户提供免费的pdf下载，它有一个简单的"输入密码下载"功能。但是，它在Internet Explorer中根本不起作用。

你可以在这个例子中看到自己。

下载通行证是"makeuseof"。在任何其他浏览器中，它工作正常。在IE中，两个按钮都不起作用。

我发现最奇怪的事情是，如果用F12打开和关闭开发人员工具栏，它就会突然开始工作。

我们尝试过兼容模式等等，没有什么区别。

如何在Internet Explorer中完成此工作？

相关讨论

听起来你的javascript中可能有一些调试代码。

您所描述的体验是典型的包含console.log()或任何其他console功能的代码。

只有在打开开发工具栏时才会激活console对象。在此之前，调用控制台对象将导致报告为undefined。打开工具栏后，控制台将存在(即使工具栏随后关闭)，因此您的控制台调用将起作用。

有一些解决方案：

最明显的一个是通过代码删除对console的引用。不管怎样，你不应该在生产代码中留下这样的东西。

如果要保留控制台引用，可以将它们包装在if()语句中，或者在尝试调用之前检查控制台对象是否存在的其他条件。

相关讨论

是否有任何解决方法可以保留调试代码？ IE是唯一具有这种无聊行为的浏览器......
if(!console) {console={}; console.log = function(){};}
@Meekohi if(!console)将导致相同的错误 - 它应该读取if(!window.console)
@btevfik - 我很高兴答案对你有所帮助，但为此敲打IE有点不公平。 IE以这种方式工作是出于向后兼容的原因 - 较旧的IE版本没有控制台功能，并且存在一些复制它的第三方脚本(例如Firebug Lite)。默认情况下声明控制台对象会破坏这些脚本，这对于想要使用它们的开发人员来说是不受欢迎的。 IE打开开发工具窗口时创建控制台对象的行为是一个很好的折衷方案。
所以... IE应该没有实现每个新的js开发人员一直使用的功能，以避免烦扰一些使用脚本修复应该首先工作的东西的开发人员...但这是不公平的为此敲IE？你是一个非常慷慨的人斯普利！ :)
@jorjordandan - 好吧，你不能真的为它敲老IE;如果您尝试使用旧版本的Firefox进行调试，则会遇到同样的问题。只是没人使用Firefox 3了。
console = window.console || { log: function(){} }
if(!window.console) {console={}; console.log = function(){};}我的上帝，当用户直接打开我的网站作为起始网站时，我刚刚解决了这个烦人的问题，我的代码无法在IE8和9上运行。似乎在IE10和11上这不再是一个问题了。
从谷歌来到这里搜索："即打开开发工具f12时问题就消失了"这解决了我无法在任何版本的IE上重现的问题，但是在客户端出现了问题。调试也是不可能的，因为打开开发工具来查明正在发生的事情会导致问题消失。非常感谢;我希望我能不止一个。
@Spudley有趣的是，chrome是第一个发布控制台的人，他们并没有像"向后兼容"那样做任何疯狂的事情，但IE8带来了这种奇怪的行为。然后firefox 4也添加了cosole，仍然没有什么疯狂，IE9仍然有这种奇怪的控制台行为：caniuse.com/#search=console
@Ziul - 实际上，他们都复制的原始控制台是Firefox的Firebug插件，在Chrome发布之前的很长一段时间里，它可以用于Firefox 1.5，甚至可能更早。当Firebug出现时，它确实有这种行为，所以IE的行为在当时并没有脱离背景。是的，现在看起来很糟糕，但当时还不是。 (无论如何，如果你没有为糟糕的浏览器行为做好准备，你不应该使用旧的IE版本，对吧？)
@Spudley在IE8测试版中它不是这样的，当他们像这样发布时，他们只给了我们一个大的价格...
我在Safari 9.x中遇到同样的问题(早期版本工作正常)。但这些解决方案都不适合我
IE11仍然会发生

HTML5 Boilerplate有一个很好的预制代码，用于修复控制台问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});

while (length--) {
method = methods[length];

// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());

正如@ plus-在评论中指出的那样，最新版本可以在他们的GitHub页面上找到

相关讨论

除了console.log问题之外，这是另一个可能的原因(至少在IE11中)：

当控制台未打开时，IE会进行相当激进的缓存，因此请确保所有$.ajax调用或XMLHttpRequest调用都将缓存设置为false。

例如：

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

当开发人员控制台打开时，缓存不那么激进。似乎是一个错误(或者可能是一个功能？)

相关讨论

在我对它做了一些小改动后，这解决了我的问题。我在我的html页面中添加了以下内容以修复IE9问题：

1
2
3
4
5
6
7
8
9
10
11

相关讨论

除了在已接受的答案和其他人中提到的'console'使用问题之外，至少还有另一个原因，即Internet Explorer中的页面有时仅与激活的开发人员工具一起工作。

启用开发人员工具时，IE并不像在正常模式下那样真正使用其HTTP缓存(至少在IE 11中默认使用)。

这意味着如果您的站点或页面存在缓存问题(例如，如果缓存超出应该的范围 - 这就是我的情况)，那么在F12模式下您将看不到该问题。因此，如果javascript执行一些缓存的AJAX请求，它们可能无法在正常模式下按预期工作，并在F12模式下正常工作。

相关讨论

我想这可能有所帮助，在任何javascript标签之前添加这个：

1
2
3
4
5

try{
console
}catch(e){
console={}; console.log = function(){};
}

相关讨论

如果您使用的是AngularJS版本1.X，则可以使用$ log服务而不是直接使用console.log。

Simple service for logging. Default implementation safely writes the message into the browser's console (if present).

https://docs.angularjs.org/api/ng/service/$log

所以，如果你有类似的东西

1
2
3
4

angular.module('logExample', [])
.controller('LogController', ['$scope', function($scope) {
console.log('Hello World!');
}]);

你可以用它替换它

1
2
3
4

angular.module('logExample', [])
.controller('LogController', ['$scope', '$log', function($scope, $log) {
$log.log('Hello World!');
}]);

Angular 2+没有任何内置日志服务。

相关讨论

如果您使用的是angular，即9, 10或edge，请使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

myModule.config(['$httpProvider', function($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}

// Answer edited to include suggestions from comments
// because previous version of code introduced browser-related errors

//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

要完全禁用cache。

它发生在IE 11中。我正在调用jquery .load函数。
所以我用旧的时尚方式做了，并在URL中放了一些东西来禁用缓存。

1	$("#divToReplaceHtml").load('@Url.Action("Action","Controller")/' + @Model.ID +"?nocache=" + new Date().getTime());

我为runeks和todotresde提供的解决方案提供了另一种选择，这也避免了对Spudley答案的评论中讨论的陷阱：

1
2
3
4

try {
console.log(message);
} catch (e) {
}

它有点邋but但另一方面它简洁并涵盖了runeks答案中涵盖的所有日志记录方法，它具有巨大的优势，您可以随时打开IE的控制台窗口并且日志流入。

我提出决议并解决我的问题。看起来我放入JavaScript的AJAX请求没有处理，因为我的页面有一些缓存问题。如果您的网站或网页有缓存问题，您将无法在开发人员/ F12模式中看到该问题。我缓存的JavaScript AJAX请求它??可能无法正常工作并导致执行中断哪个F12完全没有问题。
所以只需添加新参数以使缓存为false。

1
2
3

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

看起来IE特别需要这个是假的，以便AJAX和javascript活动运行良好。

我们在Windows 7和Windows 10上的IE 11上遇到了这个问题。通过打开IE的调试功能(IE> Internet选项>高级选项卡>浏览>取消选中禁用脚本调试(Internet Explorer))，我们发现了问题究竟是什么。通常由域管理员在我们的环境中检查此功能。

问题是因为我们在JavaScript代码中使用了console.debug(...)方法。开发人员(我)的假设是，如果客户端开发人员工具控制台未明确打开，我不想要任何内容??。虽然Chrome和Firefox似乎同意这一策略，但IE 11并不喜欢它。通过将所有console.debug(...)语句更改为console.log(...)语句，我们能够继续在客户端控制台中记录其他信息，并在打开时查看它，但在其他方面使其对典型用户隐藏。