为什么 JavaScript 只能在 IE 中打开开发工具一次后才能工作？

听起来好像你的javascript中有一些调试代码。

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

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

这里有一些解决方案:

最明显的方法是在代码中删除对console的引用。无论如何，您都不应该在产品代码中留下这样的东西。

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

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

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

这解决了我的问题后，我做了一个小的改变。为了解决IE9的问题，我在我的html页面中添加了以下内容:

<script type="text/javascript">
// IE9 fix
if(!window.console) {
var console = {
log : function(){},
warn : function(){},
error : function(){},
time : function(){},
timeEnd : function(){}
}
}
</script>

HTML5样板有一个很好的控制台问题修复的预先编写的代码:

// 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;
}
}
}());

正如@加号在评论中指出的，最新版本在他们的GitHub页面上可用

除了在公认答案中提到的“console”使用问题之外，至少还有另一个原因，为什么有时Internet Explorer中的页面只能在激活开发人员工具时才能工作。

当开发者工具被启用时，IE不会像正常模式那样真正使用HTTP缓存(至少在ie11中是默认的)。

这意味着如果你的网站或页面有缓存问题(如果它缓存的比它应该的多，例如-这是我的情况)，你在F12模式下不会看到这个问题。因此，如果javascript执行一些缓存的AJAX请求，它们可能无法在正常模式下正常工作，而在F12模式下正常工作。

我得到了runeks和todotresde提供的另一种解决方案，也避免了Spudley回答的评论中讨论的陷阱:

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

它有点凌乱，但另一方面，它简洁，涵盖了runeks'回答中涵盖的所有日志记录方法，它有一个巨大的优势，你可以在任何时候打开IE的控制台窗口，日志就会涌入。

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

当控制台没有打开时，IE会进行非常积极的缓存，所以要确保任何$.ajax调用或XMLHttpRequest调用都将缓存设置为false。

例如:

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

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

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

简单的日志服务。默认实现将消息安全地写入浏览器的控制台(如果存在)。

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

如果你有类似的东西

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

你可以用

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

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

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

如果你使用angular和ie 9, 10或edge使用:

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。

我们在Windows 7和Windows 10的IE 11上遇到了这个问题。我们通过打开IE的调试功能(IE > Internet Options > Advanced tab > Browsing > Uncheck 关闭脚本调试(Internet Explorer))发现了问题所在。这个特性通常由域管理员在我们的环境中检查。

问题在于我们在JavaScript代码中使用了console.debug(...)方法。开发人员(我)做出的假设是，如果客户端developer Tools控制台没有显式打开，我不希望编写任何内容。虽然Chrome和Firefox似乎同意这一策略，但IE 11一点也不喜欢。通过将所有console.debug(...)语句更改为console.log(...)语句，我们能够继续在客户端控制台中记录额外的信息，并在它打开时查看它，但在其他方面对典型用户保持隐藏。

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

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