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


466

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

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

Ответы:


597

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

JavaScript: console.log (2);

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


13
Просто понял, console.log()это здорово для отладки js ... Я часто забываю использовать его на практике.
Иш

Как долго может быть один из этих «выходов»? Upvote, кстати, это было действительно полезно
nbura

3
@dbrin это хорошо для разработки, однако любой console.log()код должен быть удален из рабочего кода перед развертыванием.
Сэмюэль МакЛахлан

2
@Sebas'ы Console.Logдолжны быть удалены из рабочего кода перед развертыванием, потому что в противном случае эти сообщения будут записываться в консоль JavaScript вашего пользователя. Хотя они вряд ли увидят это, они занимают место на своем устройстве. Кроме того, в зависимости от содержимого журнала, вы можете рассказать людям, как взломать / перепроектировать ваше приложение.
Сэмюэль МакЛахлан

166

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

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.


Спасибо за это. Разве код не будет более плотным, если вы if (!window.console) {запустите «если» один раз, как, а затем поместите все в скобки? Прямо сейчас вы оцениваете одно и то же четыре раза.
Дэн Розенстарк

Нет, b / c, только наличие window.console не гарантирует, что у вас будет window.console.log или .warn & c
Пол

18
Просто будьте осторожны, потому что если этот скрипт загружен вместе со страницей, а окно консоли не открыто, он создаст «фиктивную» консоль, которая может помешать работе реальной консоли, если вы откроете консоль после загрузки страницы. (по крайней мере, так обстоит дело в старых версиях Firefox / Firebug и Chrome)
cwd

1
У меня есть дополнения к этому, см. Мой ответ ниже
Тим Büthe

1
Нет, это не приведет к прерыванию работы Chrome с помощью TypeError. Связанный вопрос выше о звонке с этим . Приведенный выше код этого не делает и будет отлично работать в Chrome
gman

47

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

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 () .


3
Еще один, который я только что обнаружил: console.dir developer.mozilla.org/en-US/docs/Web/API/console.dir
dbrin

17

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

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


2
Я избегаю кросс-браузерных ошибок, таких как: if (console) console.log ()
Крейг Вольфейл

Если вы откроете инструменты разработчика в IE (F12), consoleобъект будет создан и существует до тех пор, пока вы не закроете этот экземпляр браузера.
Тим Бюте

17

Вот короткий скрипт, который проверяет, доступна ли консоль. Если это не так, он пытается загрузить 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.
}

14

В дополнение к ответу Делана Азабани , я хотел бы поделиться своим 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() {};
  }
}


7

Вот мой класс оболочки консоли. Это дает мне возможность выхода из области видимости, чтобы облегчить жизнь. Обратите внимание на использование 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

6

Лично я использую это, которое похоже на 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. для этой страницы.


почему нет if(windows.console) console.log(msg)?
CJStuart

window.consoleты имеешь в виду. единственный раз, когда попытка будет полезна, это если выдается ошибка (если console.log не является функцией) с момента переопределения консоли. Делать window.console && window.console.log instanceof Functionбыло бы более полезным.
Арам Кочарян

4

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


4

У меня было много проблем с разработчиками, проверяющими их операторы 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 (). Это была фантастическая помощь много раз.


Спасибо за эту замечательную идею. Было довольно вдохновляющим. От вашей функции исследования я невольно перешел к идее области для отладки php. mydebug_on («somescope»), mydebug («somescope», $ data) и т. д. Теперь я могу включить / отключить выборочную отладку и ведение журнала для php-кода. И так же, как и в обычных программах Linux, он может войти в стандартный, обычный многословный вариант и т.д. Действительно хорошая идея!
Йохан

3

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

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

2
console.debug("");

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

введите описание изображения здесь


1

Дальнейшее совершенствование идей Делана и Андру (именно поэтому этот ответ является отредактированной версией); 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.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.