为什么JavaScript只在IE中打开开发人员工具后才能工作?

时间:2011-10-12 15:44:38

标签: javascript internet-explorer internet-explorer-9

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

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

您可以在此example中看到自己。

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

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

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

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

12 个答案:

答案 0 :(得分:797)

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

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

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

有一些解决方案:

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

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

答案 1 :(得分:159)

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-在评论中指出,最新版本可在他们的GitHub page

上找到

答案 2 :(得分:150)

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

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

例如:

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

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

答案 3 :(得分:62)

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

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

答案 4 :(得分:28)

除了已接受的答案和其他人提到的“console”使用问题外,至少还有另一个原因,即Internet Explorer中的某些页面有时只能激活开发人员工具。

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

这意味着如果您的网站或网页存在缓存问题(例如,如果它缓存的次数超出了应有的范围 - 这就是我的情况),您将无法在F12模式下看到该问题。因此,如果javascript执行一些缓存的AJAX请求,它们可能无法在正常模式下正常工作,并且在F12模式下正常工作。

答案 5 :(得分:17)

我想这可能有所帮助,在任何javascript标签之前添加此内容:

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

答案 6 :(得分:8)

如果您使用的是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

答案 7 :(得分:5)

如果您使用的是angular,即使用9, 10edge

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

答案 8 :(得分:4)

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

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

答案 9 :(得分:2)

我为runekstodotresde提供的解决方案提供了另一种替代方案,这也避免了对Spudley答案的评论中讨论的陷阱:

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

它有点邋but但另一方面它简明扼要,涵盖了runeks&#39;中涵盖的所有日志记录方法。回答它有一个巨大的优势,你可以随时打开IE的控制台窗口,日志就会流入。

答案 10 :(得分:0)

我们在Windows 7和Windows 10上的IE 11上遇到了这个问题。我们通过启用IE的调试功能(IE&gt; Internet选项&gt;高级选项卡&gt;浏览&gt;取消选中禁用脚本调试(Internet Explorer))。此功能通常由域管理员在我们的环境中进行检查。

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

答案 11 :(得分:0)

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

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

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