Как распечатать отладочные сообщения в консоли Google Chrome JavaScript?

Как распечатать отладочные сообщения в консоли Google Chrome JavaScript?

Обратите внимание, что консоль JavaScript отличается от отладчика JavaScript; у них разный синтаксис AFAIK, поэтому команда печати в JavaScript Debugger здесь не будет работать. В консоли JavaScript print()отправит параметр на принтер.

Выполнение следующего кода из адресной строки браузера:

JavaScript: console.log (2);

успешно печатает сообщение в «Консоль JavaScript» в Google Chrome.

Продолжая идею Андру, вы можете написать скрипт, который создает консольные функции, если они не существуют:

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

Затем используйте любое из следующего:

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

Эти функции будут регистрировать различные типы элементов (которые могут быть отфильтрованы на основе журнала, информации, ошибки или предупреждения) и не вызовут ошибок, когда консоль недоступна. Эти функции будут работать в консолях Firebug и Chrome.

Просто добавьте классную функцию, которую многие разработчики упускают:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

Это волшебный %oдамп кликабельного и глубоко просматриваемого контента объекта JavaScript. %sбыл показан только для записи.

И это тоже круто:

console.log("%s", new Error().stack);

Который дает Java-подобную трассировку стека до точки new Error()вызова (включая путь к файлу и номер строки !).

Оба %oи new Error().stackдоступны в Chrome и Firefox!

Также для трассировки стека в Firefox используйте:

console.trace();

Как говорит https://developer.mozilla.org/en-US/docs/Web/API/console .

Удачного взлома!

ОБНОВЛЕНИЕ : Некоторые библиотеки написаны плохими людьми, которые переопределяют consoleобъект для своих собственных целей. Чтобы восстановить исходный браузер consoleпосле загрузки библиотеки, используйте:

delete console.log;
delete console.warn;
....

См. Вопрос переполнения стека Восстановление console.log () .

Просто быстрое предупреждение - если вы хотите протестировать в Internet Explorer, не удаляя все console.log (), вам нужно будет использовать Firebug Lite, или вы получите несколько не совсем дружественных ошибок.

(Или создайте свой собственный console.log (), который просто возвращает false.)

Вот короткий скрипт, который проверяет, доступна ли консоль. Если это не так, он пытается загрузить Firebug, а если Firebug недоступен, он загружает Firebug Lite. Теперь вы можете использовать console.logв любом браузере. Наслаждайтесь!

if (!window['console']) {

    // Enable console
    if (window['loadFirebugConsole']) {
        window.loadFirebugConsole();
    }
    else {
        // No console, use Firebug Lite
        var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
            if (F.getElementById(b))
                return;
            E = F[i+'NS']&&F.documentElement.namespaceURI;
            E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
            E[r]('id', b);
            E[r]('src', I + g + T);
            E[r](b, u);
            (F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
            E = new Image;
            E[r]('src', I + L);
        };
        firebugLite(
            document, 'createElement', 'setAttribute', 'getElementsByTagName',
            'FirebugLite', '4', 'firebug-lite.js',
            'releases/lite/latest/skin/xp/sprite.png',
            'https://getfirebug.com/', '#startOpened');
    }
}
else {
    // Console is already available, no action needed.
}

В дополнение к ответу Делана Азабани , я хотел бы поделиться своим console.js, и я использую для той же цели. Я создаю консоль noop, используя массив имен функций, что, на мой взгляд, является очень удобным способом сделать это, и я позаботился об Internet Explorer, у которого есть console.logфункция, но нет console.debug:

// Create a noop console object if the browser doesn't provide one...
if (!window.console){
  window.console = {};
}

// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
  if (!window.console.debug && typeof window.console.log !== 'undefined') {
    window.console.debug = window.console.log;
  }
}

// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

for (var i = 0; i < names.length; ++i){
  if(!window.console[names[i]]){
    window.console[names[i]] = function() {};
  }
}

Или используйте эту функцию:

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}

Вот мой класс оболочки консоли. Это дает мне возможность выхода из области видимости, чтобы облегчить жизнь. Обратите внимание на использование localConsole.debug.call()так, чтобы он localConsole.debugработал в области вызывающего класса, предоставляя доступ к его toStringметоду.

localConsole = {

    info: function(caller, msg, args) {
        if ( window.console && window.console.info ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.info.apply(console, params);
        }
    },

    debug: function(caller, msg, args) {
        if ( window.console && window.console.debug ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.debug.apply(console, params);
        }
    }
};

someClass = {

    toString: function(){
        return 'In scope of someClass';
    },

    someFunc: function() {

        myObj = {
            dr: 'zeus',
            cat: 'hat'
        };

        localConsole.debug.call(this, 'someFunc', 'myObj: ', myObj);
    }
};

someClass.someFunc();

Это дает вывод как в Firebug :

In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}

Или Chrome:

In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object

Лично я использую это, которое похоже на tarek11011:

// Use a less-common namespace than just 'log'
function myLog(msg)
{
    // Attempt to send a message to the console
    try
    {
        console.log(msg);
    }
    // Fail gracefully if it does not exist
    catch(e){}
}

Суть в том, что это хорошая идея, по крайней мере, иметь некоторую практику ведения журналов, а не просто вставлять console.log()прямо в код JavaScript, потому что, если вы забудете об этом, и он находится на рабочем сайте, он может потенциально сломать весь код JavaScript. для этой страницы.

Вы можете использовать, console.log()если у вас есть отлаженный код в редакторе программного обеспечения, который у вас есть, и вы увидите вывод, который, скорее всего, лучший для меня (Google Chrome). Просто нажмите F12и нажмите вкладку Консоль. Вы увидите результат. Удачного кодирования. :)

У меня было много проблем с разработчиками, проверяющими их операторы console. (). И мне действительно не нравится отладка Internet Explorer, несмотря на фантастические улучшения Internet Explorer 10 и Visual Studio 2012 , и т.д.

Итак, я переопределил сам объект консоли ... Я добавил флаг __localhost, который разрешает операторы консоли только на локальном хосте. Я также добавил функции консоли. () В Internet Explorer (вместо этого отображается предупреждение ()).

// Console extensions...
(function() {
    var __localhost = (document.location.host === "localhost"),
        __allow_examine = true;

    if (!console) {
        console = {};
    }

    console.__log = console.log;
    console.log = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__log === "function") {
                console.__log(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__info = console.info;
    console.info = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__info === "function") {
                console.__info(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__warn = console.warn;
    console.warn = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__warn === "function") {
                console.__warn(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__error = console.error;
    console.error = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__error === "function") {
                console.__error(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__group = console.group;
    console.group = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__group === "function") {
                console.__group(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert("group:\r\n" + msg + "{");
            }
        }
    };

    console.__groupEnd = console.groupEnd;
    console.groupEnd = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__groupEnd === "function") {
                console.__groupEnd(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg + "\r\n}");
            }
        }
    };

    /// <summary>
    /// Clever way to leave hundreds of debug output messages in the code,
    /// but not see _everything_ when you only want to see _some_ of the
    /// debugging messages.
    /// </summary>
    /// <remarks>
    /// To enable __examine_() statements for sections/groups of code, type the
    /// following in your browser's console:
    ///       top.__examine_ABC = true;
    /// This will enable only the console.examine("ABC", ... ) statements
    /// in the code.
    /// </remarks>
    console.examine = function() {
        if (!__allow_examine) {
            return;
        }
        if (arguments.length > 0) {
            var obj = top["__examine_" + arguments[0]];
            if (obj && obj === true) {
                console.log(arguments.splice(0, 1));
            }
        }
    };
})();

Пример использования:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

Для тех, кто присматривается к коду, вы обнаружите функцию console.examine (). Я создал это несколько лет назад, чтобы я мог оставлять отладочный код в определенных областях продукта, чтобы устранять проблемы QA / клиента. Например, я бы оставил следующую строку в некотором выпущенном коде:

    function doSomething(arg1) {
        // ...
        console.examine("someLabel", arg1);
        // ...
    }

А затем из выпущенного продукта введите следующее в консоль (или в адресную строку с префиксом 'javascript:'):

    top.__examine_someLabel = true;

Затем я увижу все зарегистрированные операторы console.examine (). Это была фантастическая помощь много раз.

Простой Internet Explorer 7 и ниже, который поддерживает нумерацию строк для других браузеров:

/* Console shim */
(function () {
    var f = function () {};
    if (!window.console) {
        window.console = {
            log:f, info:f, warn:f, debug:f, error:f
        };
    }
}());

console.debug("");

При использовании этого метода печатается текст ярко-синего цвета в консоли.

Дальнейшее совершенствование идей Делана и Андру (именно поэтому этот ответ является отредактированной версией); console.log, вероятно, существует, в то время как другие функции могут не существовать, поэтому по умолчанию сопоставьте с той же функцией, что и console.log ....

Вы можете написать скрипт, который создает консольные функции, если они не существуют:

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || console.log;  // defaults to log
console.error = console.error || console.log; // defaults to log
console.info = console.info || console.log; // defaults to log

Затем используйте любое из следующего:

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

Эти функции будут регистрировать различные типы элементов (которые могут быть отфильтрованы на основе журнала, информации, ошибки или предупреждения) и не вызовут ошибок, когда консоль недоступна. Эти функции будут работать в консолях Firebug и Chrome.