为啥 JavaScript 只有在 IE 中打开开发者工具一次后才能工作？

Posted 2023-05-09

【中文标题】为啥 JavaScript 只有在 IE 中打开开发者工具一次后才能工作？

【英文标题】：Why does JavaScript only work after opening developer tools in IE once?为什么 JavaScript 只有在 IE 中打开开发者工具一次后才能工作？

【发布时间】：2013-07-07 20:18:38

【问题描述】：

IE9 错误 - javascript 仅在打开开发者工具一次后才能工作。

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

您可以在此example 中亲自查看。

下载通行证是“makeuseof”。在任何其他浏览器中，它都可以正常工作。在 IE 中，两个按钮都不执行任何操作。

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

我们已经尝试过兼容模式等，没有任何区别。

如何在 Internet Explorer 中进行这项工作？

【问题讨论】：

使用跨浏览器包装器：github.com/MichaelZelensky/log.js

如果您有构建步骤，一个不错的选择是使用gulp-strip-debug 之类的东西。它删除了所有 console.* 方法，非常适合生产构建或在 IE 中进行测试。

对于未来的谷歌人：我有同样的症状，但在 IE11 中。好吧，事实证明，答案与console 无关，而是与我对获取请求的角度和缓存的使用有关。查看答案here 和here 了解更多信息。

@ChristofferLette 是的，我有同样的问题，请检查***.com/questions/31428126/… 代码在开发人员工具打开时是否正常工作..

这样的问题最烦人的是什么？它们几乎无法调试，因为它会在您打开开发者控制台后立即开始工作。

【参考方案1】：

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

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

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

有几个解决方案：

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

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

【讨论】：

是否有任何解决方法可以保留调试代码？ IE 是唯一具有这种愚蠢行为的浏览器...

if(!console) console=; console.log = function();

@Meekohi if(!console) 会导致同样的错误 - 它应该是 if(!window.console)

so... IE 不应该实现每个新的 js 开发人员一直使用的功能，以避免惹恼一些使用脚本来修复应该在第一名...但是为此敲击IE是不公平的？你是一个非常慷慨的人斯普德利！！！ :)

IE11 仍然会发生

【参考方案2】：

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

// 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- 在 cmets 中指出的，最新版本可在其GitHub page 上获得

【讨论】：

@plus' 评论中的链接不再有效。代码已下推到src 子目录：github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js

它已从 HTML5 Boilerplate repo 中删除。最后一个版本是this one

【参考方案3】：

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

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

例如：

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

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

【讨论】：

这救了我 ;) 谢谢！我会说这是一个错误，因为您应该在打开和关闭控制台的情况下测试和调试您的网站的条件相同。

为我工作。具体来说：***.com/questions/13391563/…

这应该更高，因为我认为这是实际答案...在某些 IE 版本中，关于 console.log 的公认答案会引发错误，而不是导致此处描述的行为。

【参考方案4】：

这解决了我的问题后，我对其进行了微小的更改。我在我的 html 页面中添加了以下内容以修复 IE9 问题：

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

【讨论】：

此解决方案不适用于 Windows 7 64 位的 IE 11。

这解决了我在 Windows 7 64 位上的 IE 11 上的问题。

【参考方案5】：

除了已接受的答案和其他问题中提到的“console”使用问题之外，至少还有另一个原因是 Internet Explorer 中的页面有时只能在开发人员工具激活的情况下工作。

启用开发人员工具后，IE 并不会像在正常模式下那样真正使用其 HTTP 缓存（至少在 IE 11 中是默认的）。

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

【讨论】：

请参阅***.com/questions/3984961/…，了解如何禁用缓存 xmlHttpReq 请求。

甜蜜。这出人意料地奏效了。我猜 Angular 的 $http 服务并没有像我想象的那样缓存 bust。

【参考方案6】：

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

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

【讨论】：

try catch 检测变量是否存在是个坏主意。它不仅速度慢，而且如果你的 try 块中有多个语句，你可能会因为不同的原因得到一个异常。不要用这个，至少用if (typeof console == 'undefined')

【参考方案7】：

如果您使用的是 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+ does not have any built-in log service.

【讨论】：

这对我有帮助，谢谢-对于其他使用打字稿的人，这是角度定义中的“ILogService”

IIRC 使用 $log 会导致日志语句的位置被遮挡，这与使用 console.log 时不同。根据我在开发过程中的经验，这不是很好。

【参考方案8】：

如果您使用的是angular，即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。

【参考方案9】：

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

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

【参考方案10】：

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

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

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

【参考方案11】：

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

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

【参考方案12】：

我提出解决方案并解决我的问题。看起来我放在 JavaScript 中的 AJAX 请求没有得到处理，因为我的页面有一些缓存问题。如果您的站点或页面存在缓存问题，您将不会在开发人员/F12 模式下看到该问题。我缓存的 JavaScript AJAX 请求它可能无法按预期工作并导致执行中断，而 F12 完全没有问题。 所以只是添加了新参数以使缓存为假。

$.ajax(
  cache: false,
);

看起来 IE 特别需要将此设置为 false，以便 AJAX 和 javascript 活动运行良好。