Решаем ошибку 'console' не определена в Internet Explorer

Быстрый ответ

Для предотвращения ошибок в

браузере Internet Explorer в случае отсутствия объекта console можно использовать следующий код:

if (typeof console === "undefined") {
    window.console = {
        log: function() {}, // заглушка для вывода сообщений
        warn: function() {}, // заглушка для вывода предупреждений
        error: function() {}, // заглушка для вывода ошибок
        // добавьте другие методы по надобности
    };
}

Этот код создаёт пустые функциональные заместители для методов console. Это позволяет исполнять JavaScript в IE даже при закрытых инструментах разработчика.

Подготовительный этап

Всем известно, что устаревшие браузеры, вроде IE, имеют ограниченный функционал. Объект console в них часто отсутствует, но его легко имитировать.

Восполнение пробелов

Чтобы обойти проблему отсутствия console в IE, можно применить следующий код:

if (!window.console) {
    window.console = {
        log: function() {}, // Аналогично глушилке
        warn: function() {}, // Сообщение может быть интересным
        error: function() {}, // Произошло слишком много ошибок
        info: function() {}, // Для справки: вы читаете комментарий
        // продолжайте добавлять необходимые методы
    };
}

Подробнее об этом расскажет наш спикер на видео

Полифилы на подходе

Полифилы можно создать только для отсутствующих методов console:

(function(console) {
    var methods = ["log", "warn", "error", "info", "debug", "trace"];
    for (var i = 0; i < methods.length; i++) {
        if (!console[methods[i]]) {
            console[methods[i]] = function() {}; // Заглушка для недостающих методов.
        }
    }
}(window.console = window.console || {}));

Визуализация

Исправить ошибку console is undefined в Internet Explorer можно сравнить с настройкой старого радиоприёмника:

Internet Explorer (🚗):   Приём АМ-частот.
Современные браузеры (🚀): Приём и АМ, и FM-частот.

Попытка использования console.log в IE без открытого инструмента разработчика похожа на попытку настроить радио на FM-волны:

🚗: [АМ 📡] = 🎶 (работает нормально)
🚗: [FM 🔇] = ❌ (на FM "молчит", как «console» в IE)

В отличие от этого, современные браузеры могут работать с обоими типами частот:

🚀: [АМ 📡] = 🎶 (работает с console)
🚀: [FM 📡] = 🎶 (также работает с console)

Обеспечение работы console в IE превращается в установку FM-антенны для старого радиоприёмника:

if (typeof console !== "undefined") {
    console.log("FM-антенна установлена! Теперь IE 'настроен' на сообщения из консоли.");
}

Продумываем на ход вперёд

Рассмотрим более продвинутые стратегии для повышения контроля и безопасности работы с консолью.

Меняем методы консоли

Методы такие как console.log могут отсутствовать в старых версиях IE. Но мы можем имитировать их с помощью следующего кода:

if (typeof console === "undefined" || typeof console.log === "undefined") {
    console = {
        log: function() {},   // Фиктивное логгирование
        warn: function() {},  // Виртуальное предупреждение
        error: function() {}, // Имитация ошибки
        // Добавьте другие методы по надобности.
    };
}

Подключаем кавалерию: библиотеки для логирования

Для абсолютного управления логированием можно использовать библиотеку log4javascript:

var log;
if (!window.console) {
    log = log4javascript.getDefaultLogger();
} else {
    log = console;
}

Используем HTML5 Boilerplate

В HTML5 Boilerplate есть код, обеспечивающий совместимость с устаревшими версиями IE:

// Подстраховка на случай отсутствия console.
(function() {
    var method;
    var silentFunction = function() {};  // Безмолвное действие.
    var methods = [
        // Перечисляем методы console.
    ];
    var console = (window.console = window.console || {});

    // Добавляем отсутствующие методы с пустым функционалом.
}());

Добиваемся беспроблемной работы скрипта

Разместите полифил для console в самом начале ваших скриптов:

<script src="path/to/console-polyfill.js"></script>

Полезные материалы

1. console – Web API | MDN — Обзор Console API на MDN.
2. Поддерживает ли IE9 console.log, и является ли это настоящей функцией? – Stack Overflow — Дискуссия о поддержке console.log в IE9 на Stack Overflow.
3. Настройки GTK Radiant Jedi Academy · GitHub — Полный полифил для методов console в IE на GitHub.
4. Определение использования IE пользователем – Stack Overflow — Как с помощью JavaScript определить версии Internet Explorer.
5. CSS – Условные комментарии — Описание условных комментариев для точечной работы с IE.
6. Среда браузера, спецификации – javascript.info — Изучите браузерную среду и глобальные объекты, включая console.
7. Использование F12 Tools Console для просмотра ошибок и состояния (Windows) | Microsoft Learn — Руководство по использованию F12 разработчика в Internet Explorer для работы с ошибками console.