Как распечатать отладочные сообщения в консоли JavaScript Google Chrome?
Обратите внимание, что JavaScript-консоль отличается от JavaScript-отладчика; они имеют разные синтаксисы AFAIK, поэтому команда print в JavaScript Debugger не будет работать здесь. В консоли JavaScript print() отправит этот параметр на принтер.
Выполнение следующего кода из адресной строки браузера:
javascript: console.log(2);
успешно печатает сообщение в "Консоли JavaScript" в Google Chrome.
Улучшая идею Andru, вы можете написать script, который создает консольные функции, если они не существуют:
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 говорит.
Счастливый взлом!
UPDATE. Некоторые библиотеки написаны плохими людьми, которые переопределяют объект console для своих целей. Чтобы восстановить исходный браузер console после загрузки библиотеки, используйте:
delete console.log;
delete console.warn;
....
См. вопрос о переполнении стека Восстановление console.log().
Просто быстрое предупреждение - если вы хотите протестировать в Internet Explorer, не удаляя все console.log(), вам нужно будет использовать Firebug Lite или вы получите некоторые не особо дружеские ошибки.
(Или создайте свой собственный console.log(), который просто возвращает false.)
Вот короткий script, который проверяет, доступна ли консоль. Если это не так, он пытается загрузить 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.
}
В дополнение к Delan Azabani answer, мне нравится делиться своим 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's:
// 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 и нажмите вкладку Консоль. Вы увидите результат. Счастливое кодирование.:)
У меня было много проблем с разработчиками, проверяющими их консольные операторы(). И мне действительно не нравится отладка Internet Explorer, несмотря на фантастические улучшения Internet Explorer 10 и Visual Studio 2012 и т.д.
Итак, я переопределил сам объект консоли... Я добавил флаг __localhost, который разрешает только консольные инструкции, когда на localhost. Я также добавил функции console.() В 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 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 и ниже shim, который сохраняет нумерацию строк для других браузеров:
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
console.debug("");
Используя этот метод, вы можете распечатать текст в ярко-синем цвете в консоли.
Улучшение дальнейших идей Delan и Andru (вот почему этот ответ является отредактированной версией); console.log, вероятно, будет существовать, пока другие функции могут не работать, поэтому карта по умолчанию будет работать с той же функцией, что и console.log....
Вы можете написать script, который создает функции консоли, если они не существуют:
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.