Jak wydrukować komunikaty debugowania w konsoli JavaScript Google Chrome?

Jak wydrukować komunikaty debugowania w konsoli JavaScript Google Chrome?

Pamiętaj, że konsola JavaScript nie jest tym samym co debuger JavaScript; mają różne składnie AFAIK, więc polecenie drukowania w JavaScript Debugger nie będzie tutaj działać. W konsoli JavaScript print()wyśle ​​parametr do drukarki.

Wykonanie następującego kodu z paska adresu przeglądarki:

javascript: console.log (2);

pomyślnie drukuje wiadomość do „konsoli JavaScript” w Google Chrome.

Udoskonalając pomysł Andru, możesz napisać skrypt, który tworzy funkcje konsoli, jeśli nie istnieją:

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

Następnie skorzystaj z jednego z poniższych:

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

Funkcje te rejestrują różne typy elementów (które można filtrować na podstawie dziennika, informacji, błędu lub ostrzeżenia) i nie powodują błędów, gdy konsola nie jest dostępna. Te funkcje będą działać w konsolach Firebug i Chrome.

Po prostu dodaj fajną funkcję, której brakuje wielu programistom:

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

Jest to magiczny %ozrzut, który można kliknąć i który można głęboko przeglądać w obiekcie JavaScript. %spokazano tylko dla zapisu.

To też jest fajne:

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

Co daje ślad stosu podobny do Java do punktu new Error()wywołania (w tym ścieżkę do pliku i numer linii !).

Zarówno %oi new Error().stacksą dostępne w Chrome i Firefox!

Również w przypadku śladów stosu w przeglądarce Firefox:

console.trace();

Jak mówi https://developer.mozilla.org/en-US/docs/Web/API/console .

Miłego hakowania!

AKTUALIZACJA : Niektóre biblioteki są pisane przez złych ludzi, którzy redefiniują consoleobiekt do własnych celów. Aby przywrócić oryginalną przeglądarkę consolepo załadowaniu biblioteki, użyj:

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

Zobacz pytanie Przepełnienie stosu Przywracanie console.log () .

Krótkie ostrzeżenie - jeśli chcesz przetestować w Internet Explorerze bez usuwania wszystkich console.log (), musisz użyć Firebug Lite lub otrzymasz kilka niezbyt przyjaznych błędów.

(Lub utwórz własną konsolę.log (), która po prostu zwraca wartość false.)

Oto krótki skrypt sprawdzający, czy konsola jest dostępna. Jeśli tak nie jest, próbuje załadować Firebug, a jeśli Firebug nie jest dostępny, ładuje Firebug Lite. Teraz możesz używać console.logw dowolnej przeglądarce. Cieszyć się!

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.
}

Oprócz odpowiedzi Delana Azabani , lubię się dzielić console.jsi używam do tego samego celu. Tworzę konsolę noop, używając tablicy nazw funkcji, co jest moim zdaniem bardzo wygodnym sposobem, aby to zrobić, i zająłem się Internet Explorerem, który ma console.logfunkcję, ale nie 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() {};
  }
}

Lub użyj tej funkcji:

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

Oto moja klasa otoki konsoli. Daje mi to również zakres działania, aby ułatwić życie. Zwróć uwagę na użycie localConsole.debug.call()takiego, który localConsole.debugdziała w zakresie klasy wywołującej, zapewniając dostęp do jej toStringmetody.

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

Daje to wynik tak jak w Firebug :

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

Lub Chrome:

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

Osobiście używam tego, który jest podobny do tarka11011:

// 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){}
}

Chodzi przede wszystkim o to, że dobrym pomysłem jest, aby przynajmniej poćwiczyć logowanie poza console.log()kodowaniem bezpośrednio w kodzie JavaScript, ponieważ jeśli o nim zapomnisz i znajduje się on na stronie produkcyjnej, może potencjalnie złamać cały kod JavaScript dla tej strony.

Możesz użyć, console.log()jeśli masz debugowany kod w jakim edytorze oprogramowania do programowania i zobaczysz wynik, który prawdopodobnie jest najlepszym edytorem dla mnie (Google Chrome). Po prostu naciśnij F12i naciśnij kartę Konsola. Zobaczysz wynik. Szczęśliwego kodowania. :)

Miałem wiele problemów z programistami sprawdzającymi instrukcje w konsoli. (). Naprawdę nie lubię debugowania programu Internet Explorer, pomimo fantastycznych ulepszeń programu Internet Explorer 10 i Visual Studio 2012 itp.

Więc przesłoniłem sam obiekt konsoli ... Dodałem flagę __localhost, która zezwala na instrukcje konsoli tylko na localhost. Dodałem również funkcje konsoli. () Do Internet Explorera (zamiast tego wyświetla się alert ()).

// 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));
            }
        }
    };
})();

Przykładowe zastosowanie:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

Dla tych, którzy przyjrzą się kodowi, odkryjesz funkcję console.examine (). Stworzyłem to lata temu, aby pozostawić kod debugowania w niektórych obszarach wokół produktu, aby pomóc w rozwiązywaniu problemów związanych z kontrolą jakości / klientem. Na przykład zostawiłbym następujący wiersz w jakimś wydanym kodzie:

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

Następnie w wydanym produkcie wpisz następujące polecenie w konsoli (lub pasek adresu z prefiksem „javascript:”):

    top.__examine_someLabel = true;

Następnie zobaczę wszystkie zarejestrowane instrukcje console.examine (). To była fantastyczna pomoc wiele razy.

Proste Internet Explorer 7 i poniżej podkładki który zachowuje linii numeracji dla innych przeglądarek:

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

console.debug("");

Ta metoda drukuje tekst w konsoli w jasnoniebieskim kolorze.

Dalsze udoskonalanie pomysłów Delana i Andru (dlatego ta odpowiedź jest wersją zredagowaną); Konsola.log prawdopodobnie istnieje, podczas gdy inne funkcje mogą nie istnieć, dlatego domyślną mapę należy odwzorować na tę samą funkcję, co konsola.log ....

Możesz napisać skrypt, który tworzy funkcje konsoli, jeśli nie istnieją:

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

Następnie skorzystaj z jednego z poniższych:

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

Funkcje te rejestrują różne typy elementów (które można filtrować na podstawie dziennika, informacji, błędu lub ostrzeżenia) i nie powodują błędów, gdy konsola nie jest dostępna. Te funkcje będą działać w konsolach Firebug i Chrome.