IE9中的Heisenbug

Question

好的StackOverflow - 这是一个奇怪的。

问题

所以我有一个“按钮”（实际上只是一个带有javascript onclick监听器的div），它通过页面加载时的json从数据库中获取文本。 （鉴于申请，这是有道理的）。我们不支持IE＆lt; 9。

问题是div中的文本没有显示在IE9的新实例中。但是，当我打开开发人员控制台（试图弄清楚出了什么问题）并刷新页面时，IE就好像什么都没有出错并正确填充按钮文本。它适用于所有其他浏览器。

什么。

守则

所以这就是我在PHP中所拥有的：

<div class="dark-button notification-button" data-notification="NOTIF_A">
    <span class="float-right">&#9654;</span>
</div>

Javascript（使用Jquery 1.8.0）：

$('document').ready(refreshNotificationButtons('.notification-button'));
function refreshNotificationButtons(buttons){
    var buttons = typeof buttons != 'object' ? $('.notification-button') : buttons;
    var allNotifications = {};
    var buttonsCount = 0;
    buttons.each(function(){
        var button = $(this);
        if(typeof button.attr('id') == 'undefined') button.attr('id', 'notif-button-' + buttonsCount);
        buttonsCount ++;
        if(typeof allNotifications[button.attr('data-notification')] == 'undefined'){
            allNotifications[button.attr('data-notification')] = [button.attr('id')];
        } else {
            allNotifications[button.attr('data-notification')].push(button.attr('id'))
        }
    });
    $.get(
        '/notifications/get_notifications/' + $.map(allNotifications, function(x, abbr){return abbr}).join(','),
        '',
        function(data){
            $(data).each(function(){
                if (typeof allNotifications[this.Notification.NotificationAbbr] != 'undefined'){
                    console.log(this); //debug
                    buttonEl = $('#' + allNotifications[this.Notification.NotificationAbbr]);
                    if(this.Notifications_User.UserID != null) buttonEl.addClass('notification-button-remove');
                    buttonEl.attr('data-notification-id', this.Notification.Notifications_TableID);
                    buttonEl.append($('<span class="notification-button-signup-span">' + this.Notification.EnableText + '</span><span class="notification-button-remove-span">' + this.Notification.DisableText + '</span>'));
                }
            });
        },
        'json'
    );

}

图片

打开开发控制台前的按钮：

打开开发控制台并刷新后按钮：

结论

有什么想法吗？如果你想看到它，我很乐意发布更多代码！提前谢谢。

Answer 1

如上所述，当没有可打开的控制台时，console.log()在IE中的效果不佳。

您可以删除对console的调用，也可以添加此插件（由Paul Irish开发）

http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/

Answer 2

当调试器处于活动状态时，IE只有一个console对象。

因此，当您尝试执行console.log()并且没有console对象时，它会在尝试引用.log的{​​{1}}属性时抛出javascript异常，你的代码停止执行。

您可以通过在初始化代码中插入它来解决这个问题 - 在您使用undefined之前的某个地方。

console.log()

这样可以安全地始终使用var console = console || {}; if (!console.log) { console.log = function(data) { // do nothing } } ，即使在调试器未运行的IE中也是如此。我不建议在完成的生产代码中留下console.log()个语句，但它可能会在开发期间帮助您。