IE9中的Heisenbug

Question

好的StackOverflow-這是一個奇怪的問題。

問題

所以我有一個“按鈕”（實際上只是一個帶有javascript onclick偵聽器的div），它可以在頁面加載時通過json從數據庫中獲取其文本。 （鑒於應用程序，這很有意義）。 我們不支持IE <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對象時，它會拋出javascript異常，因為它嘗試引用undefined的.log屬性，並且您的代碼停止執行。

您可以通過在初始化代碼中插入此代碼（在使用console.log()之前console.log() 。

var console = console || {};
if (!console.log) {
    console.log = function(data) {
        // do nothing
    }
}

這使得始終使用console.log()變得安全，即使在IE中沒有運行調試器時也是如此。 我不建議將console.log()語句保留在最終的生產代碼中，但這可能會在開發過程中為您提供幫助。