Co to jest console.log?

414

Jakie jest zastosowanie console.log?

Wyjaśnij, jak używać go w JavaScript, na przykładzie kodu.

Mihir
źródło

Odpowiedzi:

454

To nie jest funkcja jQuery, ale funkcja do celów debugowania. Możesz na przykład zalogować coś do konsoli, gdy coś się stanie. Na przykład:

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

Zobaczysz wtedy #someButton was clickedw zakładce „Konsola” Firebuga (lub konsoli innego narzędzia - np. Inspektora sieci Chrome), kiedy klikniesz przycisk.

Z niektórych powodów obiekt konsoli może być niedostępny. Następnie możesz sprawdzić, czy tak jest - jest to przydatne, ponieważ nie musisz usuwać kodu debugowania podczas wdrażania do wersji produkcyjnej:

if (window.console && window.console.log) {
  // console is available
}
Jan Hančič
źródło
17
Narzędzia programistyczne Google Chrome mają również zintegrowaną konsolę.
RobertPitt,
8
„Jest to przydatne, ponieważ nie trzeba usuwać kodu debugującego podczas wdrażania do wersji produkcyjnej” <- Co się stanie, jeśli użytkownik końcowy otworzy Firebug?
AbdullahC,
6
przydaje się także, gdy IE nie zgłasza błędu, ponieważ konsola nie jest zdefiniowana
Alan Whitelaw,
4
Imho, lepiej niż sprawdzanie za każdym razem, czy jest dostępny plik console.log, lepiej mieć coś takiego: if (typeof (console) == 'undefined') {console = {'log': function () {return}}} In w takim przypadku możesz napisać console.log za każdym razem, kiedy potrzebujesz, bez sprawdzania jego obecności!
Enrico Carlesso,
12
if (console.log)(lub nawet if (console && console.log)) nadal zgłasza błąd, jeśli konsola nie jest dostępna. Powinieneś użyć window.console(jak windowna pewno istnieje) i sprawdzać tylko jeden poziom głębokości naraz.
Tgr
226

Miejsca, w których możesz zobaczyć konsolę! Wystarczy mieć je wszystkie w jednej odpowiedzi.

Firefox

http://getfirebug.com/

(możesz teraz także korzystać z wbudowanych narzędzi programistycznych Firefoksa Ctrl + Shift + J (Narzędzia> Web Developer> Konsola błędów), ale Firebug jest znacznie lepszy; użyj Firebug)

Safari i Chrome

Zasadniczo to samo.

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technologies/safari/developer-tools.html

Internet Explorer

Nie zapominaj, że możesz używać trybów zgodności do debugowania IE7 i IE8 w IE9 lub IE10

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

Jeśli musisz uzyskać dostęp do konsoli w IE6 dla IE7, skorzystaj z bookmarkletu Firebug Lite

http://getfirebug.com/firebuglite/ szukaj stabilnego bookmarkletu

http://en.wikipedia.org/wiki/Bookmarklet

Opera

http://www.opera.com/dragonfly/

iOS

Działa na wszystkich iPhone'ach, iPodach touch i iPadach.

http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

Teraz z iOS 6 możesz przeglądać konsolę przez Safari w OS X, jeśli podłączysz urządzenie. Możesz to zrobić za pomocą emulatora, po prostu otwórz okno przeglądarki Safari i przejdź do karty „Opracuj”. Znajdziesz tam opcje umożliwiające inspektorowi Safari komunikację z urządzeniem.

Windows Phone, Android

Oba nie mają wbudowanej konsoli i nie mają możliwości tworzenia zakładek. Używamy więc http://jsconsole.com/ type: słuchaj, a otrzymasz skrypt do umieszczenia w kodzie HTML. Od tego momentu możesz wyświetlać swoją konsolę na stronie internetowej jsconsole.

iOS i Android

Możesz także użyć http://html.adobe.com/edge/inspect/, aby uzyskać dostęp do narzędzi inspektora sieci i konsoli na dowolnym urządzeniu za pomocą wygodnej wtyczki do przeglądarki.


Starsze problemy z przeglądarką

Wreszcie starsze wersje IE ulegną awarii, jeśli użyjesz konsoli.log w kodzie i nie otworzysz narzędzi programistycznych w tym samym czasie. Na szczęście jest to łatwa naprawa. Użyj poniższego fragmentu kodu u góry kodu:

 if(!window.console){ window.console = {log: function(){} }; } 

To sprawdza, czy konsola jest obecna, a jeśli nie, ustawia ją na obiekt o nazwie pustej funkcji log. W ten sposób window.console i window.console.log nigdy nie są naprawdęundefined.

Fresheyeball
źródło
26
Popraw mnie, jeśli się mylę, ale myślę, że przeglądanie konsoli nie wymaga Firebug w Firefoksie, po prostu kliknij Ctrl + Shift + J (Narzędzia> Web Developer> Konsola błędów)
Dane411
4
@ Dane411 to prawda, ale firebug jest lepszy i częściej używany.
Fresheyeball
3
@Fresheyeball Ktoś musi usunąć wszystkie śmieci, ale myślę, że w pewnym momencie staje się mniej interesujące zbieranie tych przedstawicieli i utrzymywanie czystości społeczności.
andlrc
2
Kto głosował na tę odpowiedź, proszę o komentarz. przegłosowania bez komentarzy są bezużyteczne
Fresheyeball
przed window.console.log był window.dump. To lepsze niż pusta funkcja dziennika
OCTAGRAM
100

Możesz przeglądać wszelkie wiadomości zarejestrowane w konsoli, jeśli używasz narzędzia takiego jak Firebug do sprawdzania swojego kodu. Powiedzmy, że to robisz:

console.log('Testing console');

Gdy uzyskasz dostęp do konsoli w Firebug (lub innym narzędziu, które zdecydujesz się użyć do sprawdzenia kodu), zobaczysz każdą wiadomość, której funkcję chcesz zalogować. Jest to szczególnie przydatne, gdy chcesz sprawdzić, czy funkcja wykonuje się lub czy zmienna jest poprawnie przekazywana / przypisywana. Jest to w rzeczywistości dość cenne, aby dowiedzieć się, co poszło nie tak z twoim kodem.

Fibericon
źródło
10
Nie zapomnij go najpierw zdefiniować, aby uniknąć błędów w IE: stackoverflow.com/a/7585409/318765
mgutt
83

Wyśle komunikat dziennika do konsoli javascript przeglądarki, np. Firebug lub Developer Tools (Chrome / Safari) i wyświetli wiersz i plik, z którego został wykonany.

Co więcej, kiedy wyślesz obiekt jQuery, będzie on zawierał odniesienie do tego elementu w DOM, a kliknięcie go spowoduje przejście do tego w zakładce Elements / HTML.

Możesz używać różnych metod, ale uwaga: aby działał w Firefoksie, musisz mieć otwartego Firebuga, w przeciwnym razie cała strona ulegnie awarii. Bez względu na to, czy logujesz się jako zmienna, tablica, obiekt lub element DOM, da ci to pełny podział, w tym również prototyp obiektu (zawsze interesujące jest, żebyś miał poke). Możesz także dołączyć dowolną liczbę argumentów, a zostaną one zastąpione spacjami.

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

Wyświetlają się one z różnymi logo dla każdego polecenia.

Możesz także użyć console.profile(profileName);do rozpoczęcia profilowania funkcji, skryptu itp. A następnie zakończyć ją, console.profileEnd(profileName);a pojawi się ona na karcie Profile w Chrome (nie wiem w FF).

Pełne odniesienie znajduje się na stronie http://getfirebug.com/logging i sugeruję, aby je przeczytać. (Ślady, grupy, profilowanie, kontrola obiektów).

Mam nadzieję że to pomoże!

Fred
źródło
1
Dlaczego jest console.log("x:", x)lepszy niż console.log("x:" + x)? Czy jest mniej podatny na błędy, ponieważ ,łatwiej jest odczytać niż +?
Kevin Meredith,
Moim zdaniem nieco łatwiej jest czytać, gdy wypisujesz wiele różnych rzeczy. W tym przypadku prawdopodobnie powinien być +ściśle używany , ale chciałem pokazać, że możesz również używać przecinków w funkcjach konsoli. Ponadto pozwala uniknąć problemów, jeśli obie zmienne są liczbami całkowitymi lub tablicami.
Fred
5
console.log("x:", x)jest znacznie lepszy, ponieważ gdy xjest obiektem lub tablicą (lub czymkolwiek innym niż ciąg znaków), wyświetla się poprawnie, bez konwersji na ciąg znaków.
Josef Kufner
34

Z jQuery nie ma nic wspólnego, a jeśli chcesz go użyć, radzę ci to zrobić

if (window.console) {
    console.log("your message")
}

Nie łamiesz więc kodu, gdy nie jest on dostępny.

Jak sugerowano w komentarzu, możesz również wykonać to w jednym miejscu, a następnie użyć console.lognormalnie

if (!window.console) { window.console = { log: function(){} }; }
Baptiste Pernet
źródło
18
Czy mogę polecić zamiast tego robić if(!window.console){ window.console = function(){}; }w jednym miejscu, a następnie używać pliku console.log jak zwykle.
Fresheyeball
23

console.lognie ma nic wspólnego z jQuery. Jest to powszechny obiekt / metoda udostępniana przez debuggery (w tym debugger Chrome i Firebug), który pozwala skryptowi rejestrować dane (lub obiekty w większości przypadków) na konsoli JavaScript.

Quentin
źródło
19

console.logloguje informacje debugowania do konsoli w niektórych przeglądarkach (Firefox z zainstalowanym Firebug, Chrome, IE8, cokolwiek z zainstalowanym Firebug Lite). W Firefoksie jest to bardzo potężne narzędzie, które pozwala sprawdzać obiekty lub badać układ lub inne właściwości elementów HTML. Nie jest to związane z jQuery, ale przy użyciu go z jQuery często wykonuje się dwie rzeczy:

  • zainstaluj rozszerzenie FireQuery dla Firebug. To, między innymi, sprawia, że ​​rejestrowanie obiektów jQuery wygląda ładniej.

  • stwórz opakowanie, które będzie bardziej zgodne z konwencjami kodu łańcuchowego jQuery.

Oznacza to zwykle coś takiego:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

które możesz następnie wywołać jak

$('foo.bar').find(':baz').log().hide();

aby łatwo sprawdzić wewnątrz łańcuchów jQuery.

Tgr
źródło
16

console.log nie ma nic wspólnego z jQuery.

Loguje komunikat do konsoli debugowania, takiej jak Firebug.

SLaks
źródło
16

Niekiedy chodzi o zamieszanie, że aby zarejestrować wiadomość tekstową wraz z zawartością jednego z twoich obiektów za pomocą console.log, musisz przekazać każdy z nich jako inny argument. Oznacza to, że musisz je rozdzielić przecinkami, ponieważ jeśli użyjesz operatora + do połączenia danych wyjściowych, domyślnie wywołałoby to .toString()metodę twojego obiektu. W większości przypadków nie jest to jawnie nadpisywane, a domyślna implementacja dziedziczona przez Objectnie dostarcza żadnych użytecznych informacji.

Przykład do wypróbowania w konsoli:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

mając na uwadze, że jeśli spróbujesz połączyć informacyjną wiadomość tekstową z zawartością obiektu, otrzymasz:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

Pamiętaj więc, że console.log w rzeczywistości bierze tyle argumentów, ile chcesz.

Thalis K.
źródło
13

Służy console.logdo dodawania informacji o debugowaniu do strony.

Wiele osób korzysta alert(hasNinjas)z tego celu, ale console.log(hasNinjas)łatwiej z nim pracować. Za pomocą wyskakujących okienek wyskakujące modalne okno dialogowe blokujące interfejs użytkownika.

Edycja: Zgadzam się z Baptiste Pernet i Janem Hančičem , że bardzo dobrym pomysłem jest sprawdzenie, czy window.consolejest zdefiniowane jako pierwsze, aby Twój kod się nie łamał , jeśli nie jest dostępna konsola.

Mark Byers
źródło
12

Przykład - załóżmy, że chcesz wiedzieć, który wiersz kodu byłeś w stanie uruchomić program (zanim się zepsuł!), Po prostu wpisz

console.log("You made it to line 26. But then something went very, very wrong.")
Gautam Kshatriya
źródło
11

Używasz go do debugowania kodu JavaScript za pomocą Firebug for Firefox lub konsoli JavaScript w przeglądarkach WebKit .

var variable;

console.log(variable);

Wyświetli zawartość zmiennej, nawet jeśli jest to tablica lub obiekt.

Jest ona podobna do print_r($var);dla PHP .

jondavidjohn
źródło
3
Poręczny wskazówka ... ja zawsze zawierać następujące elementy w dostępnym globalnie pliku javascript: if (!window.console) { window.console = { log : function() {} }; }. Pozwala to uniknąć zapomnienia o usuwaniu sporadycznych instrukcji debugowania.
roufamatic 20.01.11
@roufamatic Nie wiem ... dodawanie kodu do obsługi kodu, który nie należy, wydaje się dość okropnym rozwiązaniem ... szczególnie, gdy znalezienie / zamiana jest takie łatwe ...
jondavidjohn
10

Uwaga: pozostawienie wywołań konsoli w kodzie produkcyjnym spowoduje uszkodzenie witryny w przeglądarce Internet Explorer. Nigdy nie przechowuj go w rozpakowaniu. Zobacz: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

Harlo Holmes
źródło
2
Nie jest tak, że dziennik konsoli się zepsuje, jeśli używasz komputera z systemem Windows, ale zepsuje witrynę, jeśli używasz Internet Explorera.
Kris Hollenbeck,
Myślę, że blog wymieniony w odpowiedzi już nie istnieje.
Tsundoku,
Oryginalny link jest martwy. Znalazłem kopię archiwum internetowego.
Alex
8

Na początku debugowanie JS odbywało się za pomocą alert()funkcji - teraz jest to przestarzała praktyka.

console.log()To funkcja, która pisze wiadomość do logowania na konsoli debugowania, takich jak Webkit lub Firebug. W przeglądarce nic nie widać na ekranie. Loguje komunikat do konsoli debugowania. Jest dostępny tylko w Firefoksie z Firebug oraz w przeglądarkach opartych na Webkit (Chrome i Safari). Nie działa dobrze we wszystkich wydaniach IE .

Obiekt konsoli jest rozszerzeniem DOM.

console.log()Powinny być stosowane tylko w kodzie w czasie rozwoju i debugowania.

Uznaje się za złą praktykę, że ktoś pozostawia console.log()w pliku javascript na serwerze produkcyjnym.

jjpcondor
źródło
5

Jeśli Twoja przeglądarka obsługuje debugowanie, możesz użyć metody console.log () do wyświetlenia wartości JavaScript.

Aktywuj debugowanie w przeglądarce za pomocą F12 i wybierz „Console” w menu debuggera.

Konsola w JavaScript. Spróbuj naprawić lub „debugować” niedziałający program JavaScript i poćwicz korzystanie z komendy console.log (). Istnieją skróty, które pomogą Ci uzyskać dostęp do konsoli JavaScript, w zależności od używanej przeglądarki:

Skróty klawiaturowe konsoli Chrome

Windows: Ctrl+ Shift+ J
Mac: Cmd+ Option+J

Skróty klawiaturowe konsoli Firefox

Windows: Ctrl+ Shift+ K
Mac: Cmd+ Option+K

Skróty klawiaturowe konsoli Internet Explorer

F12 klucz

Skróty klawiaturowe w konsoli Safari

Cmd+ Option+C

S. Mayol
źródło
4

console.logw szczególności jest to metoda dla programistów do pisania kodu w celu niepozornego informowania programistów o tym, co robi kod. Można go użyć do ostrzeżenia o problemie, ale nie powinien zastępować interaktywnego debugera, gdy przychodzi czas na debugowanie kodu. Jego asynchroniczny charakter oznacza, że zarejestrowane wartości niekoniecznie reprezentują wartość w momencie wywołania metody.

W skrócie: rejestruj błędy za pomocą console.log(jeśli są dostępne), a następnie napraw je za pomocą wybranego debuggera: Firebug , WebKit Developer Tools (wbudowany w Safari i Chrome ), IE Developer Tools lub Visual Studio.

outis
źródło
4

Naprawdę czuję, że programowanie sieciowe jest łatwe, kiedy zaczynam console.logdebugować.

var i;

Jeśli chcę sprawdzić wartość iśrodowiska wykonawczego ..

console.log(i);

możesz sprawdzić bieżącą wartość iw zakładce konsoli firebug. Jest specjalnie używany do debugowania.

aksu
źródło
4

Służy do logowania (cokolwiek przekażesz) do konsoli Firebug . Głównym zastosowaniem byłoby debugowanie kodu JavaScript.

Poelinca Dorin
źródło
4

Oprócz wyżej wymienionych zastosowań console.logmożna również drukować na terminalu w node.js. Serwer utworzony za pomocą ekspresu (np.) Może użyć console.logdo zapisu do wyjściowego pliku rejestratora.

surajck
źródło
2

W skryptach Java nie ma funkcji wejścia i wyjścia. Aby debugować kod, użyto metody console.log (). Jest to metoda rejestrowania. Zostanie wydrukowany w dzienniku konsoli (narzędzia programistyczne).

Nie jest obecny w IE8 i poniżej, dopóki nie otworzysz narzędzia programistycznego IE.

NavyaKumar
źródło
2

To nie ma nic wspólnego z jQuery. console.log()Odwołuje się do funkcji logarytmicznej obiektu konsoli, która przedstawia sposoby rejestrowania informacji do konsoli przeglądarki. Metody te są przeznaczone wyłącznie do celów debugowania i nie należy polegać na prezentowaniu informacji użytkownikom końcowym.

Aravinda Meewalaarachchi
źródło