javascript 在激活开发者工具之前，带有 JS 的网站在 IE9 中不起作用

Website with JS doesn't work in IE9 until the Developer Tools is activated

提问by Tom Auger

I'm developing a complex website that heavily leverages jQuery and a number of scripts. On load of the site, none of my scripting is working (though I can confirm that other scripts are functioning fine). I wouldn't be posting such a lame question here on SE except for one thing:

我正在开发一个复杂的网站，该网站大量利用 jQuery 和许多脚本。在网站加载时，我的脚本都没有工作（尽管我可以确认其他脚本运行良好）。除了一件事，我不会在 SE 上发布这样一个蹩脚的问题：

The instant I hit F12 to turn on developer tools so I can debug my issue, everything instantly works perfectly!

当我按下 F12 打开开发人员工具以便我可以调试我的问题时，一切立即完美运行！

Worse, if I shut down the browser, start it up, turn on Dev Tools first and visit the site, everything works as expected.

更糟糕的是，如果我关闭浏览器，启动它，首先打开开发工具并访问该站点，一切都会按预期进行。

So I can't even debug the darned problem because Dev Tools fixes it! What could Dev Tools be doing that makes things work? Does it change the UA (I do some jQuery.browser detection)? Does it do something to doctype?

所以我什至无法调试这个该死的问题，因为 Dev Tools 修复了它！开发工具可以做什么来使事情正常进行？它是否改变了 UA（我做了一些 jQuery.browser 检测）？它对文档类型有什么作用吗？

EDIT

编辑

All my console logging is wrapped in the following wrapper utility function:

我所有的控制台日志都包含在以下包装实用程序函数中：

   function log(msg){
    if (console){
        console.log(msg);
    }
   }

Any thoughts or suggestions I could try would be welcome. I'll post here if I find a solution.

欢迎任何我可以尝试的想法或建议。如果我找到解决方案，我会在这里发布。

采纳答案by Liam Newmarch

I appreciate I'm pretty late to the party here, but I've got a solution for IE9 that's a little different.

我很感激我在这里参加聚会已经很晚了，但是我已经为 IE9 提供了一个有点不同的解决方案。

(function() {
    var temp_log = [];
    function log() {
        if (console && console.log) {
            for (var i = 0; i < temp_log.length; i++) {
                console.log.call(window, temp_log[i]);
            }
            console.log.call(window, arguments);
        } else {
            temp_log.push(arguments);
        }
    }
})();

Basically instead of console.logyou use log. If console.logexists then it works as normal, otherwise it stores log entries in an array and outputs them on the next logwhere the consoleis available.

基本上代替console.log你使用log. 如果console.log存在则它正常工作，否则它将日志条目存储在一个数组中并在下一个可用的log地方输出它们console。

It would be nice if it pushed the data as soon as the consoleis available, but this is less expensive than setting up a custom setInterval listener.

如果它在console可用时立即推送数据会很好，但这比设置自定义 setInterval 侦听器便宜。

Updated function (1 October 2012)

更新功能（2012 年 10 月 1 日）

I've updated this script for my own use and thought I'd share it. It has a few worthy improvements:

我已经更新了这个脚本供我自己使用，并认为我会分享它。它有一些值得改进的地方：

• use console.log()like normal, i.e. no longer need to use non-standard log()
• supports multiple arguments, e.g. console.log('foo', 'bar')
• you can also use console.error, console.warnand console.info(though outputs them as console.log)
• script checks for native consoleevery 1000ms and outputs the buffer when found

• console.log()正常使用，即不再需要使用非标准log()
• 支持多个参数，例如 console.log('foo', 'bar')
• 您也可以使用console.error, console.warnand console.info（虽然将它们输出为console.log）
• 脚本console每 1000 毫秒检查一次本机并在找到时输出缓冲区

I think with these improvements, this has become a pretty solid shim for IE9. Check out the GitHub repo here.

我认为通过这些改进，这已经成为 IE9 的一个非常可靠的 shim。在此处查看 GitHub 存储库。

if (!window.console) (function() {

    var __console, Console;

    Console = function() {
        var check = setInterval(function() {
            var f;
            if (window.console && console.log && !console.__buffer) {
                clearInterval(check);
                f = (Function.prototype.bind) ? Function.prototype.bind.call(console.log, console) : console.log;
                for (var i = 0; i < __console.__buffer.length; i++) f.apply(console, __console.__buffer[i]);
            }
        }, 1000); 

        function log() {
            this.__buffer.push(arguments);
        }

        this.log = log;
        this.error = log;
        this.warn = log;
        this.info = log;
        this.__buffer = [];
    };

    __console = window.console = new Console();
})();

回答by crappie coder

You have console calls, in IE these will fail if the dev tools are not open. A simple fix is to wrap any console calls in a function like:

您有控制台调用，在 IE 中，如果开发工具未打开，这些调用将失败。一个简单的解决方法是将任何控制台调用包装在一个函数中，例如：

function log(msg) {
  if(console)
    console.log(msg);
}

回答by benqus

I have hacked it the following way

我用以下方式破解了它

<script type="text/javascript">
    (function () {
        if (typeof console == "undefined") {
            console = {
                log : function () {}
            }
        }
    })();
</script>

And this is the first script element in the .

这是 .

回答by Jasmine Hegman

Most of the other solutions should work great, but here's a short one liner if you don't care about catching log messages if the console is not available.

大多数其他解决方案应该可以很好地工作，但是如果您不关心在控制台不可用时捕获日志消息，这里有一个简短的一行代码。

// Stub hack to prevent errors in IE
console = window.console || { log: function() {} };

This lets you still use the native console.log function directly still instead of wrapping it with anything or having a conditional each time.

这让你仍然可以直接使用原生的 console.log 函数，而不是每次都用任何东西包装它或有条件。

回答by zzzzBov

I find it much more convenient to simply use console && console.log('foo', 'bar', 'baz')rather than use a wrapper function.

我发现简单地使用console && console.log('foo', 'bar', 'baz')而不是使用包装函数更方便。

The code you provided:

您提供的代码：

function logError(msg){
  if (console) {
    console.log(msg);
  } else {
    throw new Error(msg);
  }
}

Will produce an error for IE when dev tools are closed because consolewill be undefined.

当开发工具关闭时会为 IE 产生错误，因为console将是未定义的。

回答by Tom Auger

The console.log wrapper that I used was not sufficient to detect the console in IE9. Here's the wrapper that works from a related question on SE:

我使用的 console.log 包装器不足以检测 IE9 中的控制台。这是从 SE 上的相关问题工作的包装器：

function logError(msg){
    try {
        console.log(msg);
    } catch (error) {
        throw new Error(msg);
    }
}

function log(msg){
    try {
        console.log(msg);
    } catch (error) { }
}

A proper test for the availability of the console object would be: if (typeof console === "undefined" || typeof console.log === "undefined")

控制台对象可用性的正确测试是： if (typeof console === "undefined" || typeof console.log === "undefined")

回答by Zhonk

If you have multiple parallel script files, maybe the files are being loaded/executed in a different order with developer tools on/off.

如果您有多个并行脚本文件，则可能是在打开/关闭开发人员工具的情况下以不同的顺序加载/执行这些文件。

回答by John

I have run into this issue many times. Basically with variables we do this to check if they are valid

我已经多次遇到这个问题。基本上对于变量，我们这样做是为了检查它们是否有效

var somevar;
if (somevar)
 //do code

this works because somevar will resolve to undefined. But if your checking a window property for example. window.console.

这是有效的，因为 somevar 将解析为未定义。但是，例如，如果您检查窗口属性。窗口.控制台。

if (console) <---- this throws an exception

You cannot do the same check. The browser treats it differently. Basically only doing this

你不能做同样的检查。浏览器以不同的方式对待它。基本上只做这个

if (window.console) <---- will NOT throw an exception if undefined
//some code

this will work the same as the first example. So you need to change your code to

这将与第一个示例相同。所以你需要将代码更改为

function log(msg){
 if (window.console){
     console.log(msg);
 }
}