Як надрукувати повідомлення про налагодження на консолі JavaScript Google Chrome?

Як надрукувати повідомлення про налагодження на консолі JavaScript Google Chrome?

Зауважте, що консоль 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 (), який просто повертає помилку.)

Ось короткий сценарій, який перевіряє, чи доступна консоль. Якщо його немає, він намагається завантажити 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'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, який дозволяє констатувати консолі лише у локальному хості. Я також додав функції консолі. () До 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 (). Я створив це років тому тому, щоб я міг залишити код налагодження в певних областях навколо продукту, щоб допомогти вирішити проблеми, пов'язані з питаннями якості та клієнтів. Наприклад, я б залишив наступний рядок у звільненому коді:

    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.