Che cos'è console.log?


Risposte:


455

Non è una funzione jQuery ma una funzione per scopi di debug. Ad esempio, puoi registrare qualcosa sulla console quando succede qualcosa. Per esempio:

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

Vedresti quindi #someButton was clickednella scheda "Console" di Firebug (o nella console di un altro strumento, ad esempio Chrome Web Inspector) quando fai clic sul pulsante.

Per alcuni motivi, l'oggetto console potrebbe non essere disponibile. Quindi è possibile verificare se lo è - questo è utile in quanto non è necessario rimuovere il codice di debug quando si distribuisce in produzione:

if (window.console && window.console.log) {
  // console is available
}

17
Gli strumenti per sviluppatori di Google Chrome hanno anche una console integrata.
RobertPitt,

8
"Ciò è utile in quanto non è necessario rimuovere il codice di debug quando si esegue la distribuzione in produzione" <- Cosa succede se un utente finale apre Firebug?
AbdullahC,

6
è anche utile per non consentire a IE di generare un errore per console non definita
Alan Whitelaw,

4
Imho, meglio che controllare ogni volta che console.log è disponibile è meglio avere qualcosa del genere: if (typeof (console) == 'undefined') {console = {'log': function () {return}}} In in tal caso puoi scrivere console.log ogni volta che ti serve senza verificarne la presenza!
Enrico Carlesso,

12
if (console.log)(o anche if (console && console.log)) genererà comunque un errore se la console non è disponibile. Dovresti usare window.console(come windowè garantito che esista) e controllare solo un livello di profondità alla volta.
Tgr

226

Luoghi in cui è possibile visualizzare la console! Solo per averli tutti in una risposta.

Firefox

http://getfirebug.com/

(ora puoi anche usare gli strumenti di sviluppo integrati di Firefox Ctrl + Maiusc + J (Strumenti> Sviluppatore Web> Console errori), ma Firebug è molto meglio; usa Firebug)

Safari e Chrome

Praticamente lo stesso.

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

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

Internet Explorer

Non dimenticare che puoi utilizzare le modalità di compatibilità per eseguire il debug di IE7 e IE8 in IE9 o 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

Se è necessario accedere alla console in IE6 per IE7, utilizzare il bookmarklet Firebug Lite

http://getfirebug.com/firebuglite/ cercare bookmarklet stabile

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

musica lirica

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

iOS

Funziona con tutti gli iPhone, iPod touch e iPad.

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

Ora con iOS 6 è possibile visualizzare la console tramite Safari in OS X se si collega il dispositivo. Oppure puoi farlo con l'emulatore, apri semplicemente una finestra del browser Safari e vai alla scheda "Sviluppo". Lì troverai le opzioni per far comunicare l'ispettore Safari con il tuo dispositivo.

Windows Phone, Android

Entrambi questi non hanno console integrata e nessuna possibilità di bookmarklet. Quindi usiamo http://jsconsole.com/ type: ascolta e ti darà un tag script da inserire nel tuo HTML. Da quel momento in poi puoi visualizzare la tua console all'interno del sito Web jsconsole.

iOS e Android

Puoi anche utilizzare http://html.adobe.com/edge/inspect/ per accedere agli strumenti di Web Inspector e alla console su qualsiasi dispositivo utilizzando il loro comodo plug-in del browser.


Problemi del browser precedenti

Infine, le versioni precedenti di IE si arrestano in modo anomalo se si utilizza console.log nel codice e non si hanno gli strumenti di sviluppo aperti contemporaneamente. Fortunatamente è una soluzione semplice. Utilizza lo snippet di codice riportato sotto nella parte superiore del codice:

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

Questo verifica se la console è presente e, in caso contrario, la imposta su un oggetto con una funzione vuota chiamata log. In questo modo window.console e window.console.log non sono mai veramenteundefined.


26
Correggimi se sbaglio, ma penso che non sia necessario Firebug in Firefox per visualizzare la console, fai clic su Ctrl + Maiusc + J (Strumenti> Sviluppatore Web> Console errori)
Dane411

4
@ Dane411 questo è vero, ma firebug è migliore e più comunemente usato.
Fresheyeball

3
@Fresheyeball Qualcuno deve ripulire tutta la spazzatura, ma penso che a un certo punto diventi meno interessante raccogliere quelle ripetizioni e mantenere la comunità pulita.
andlrc,

2
Chiunque abbia annullato la votazione di questa risposta, può commentare. i voti senza commenti sono inutili
Fresheyeball,

c'era window.dump prima di window.console.log. È meglio della funzione di registro vuota
OCTAGRAM

100

È possibile visualizzare tutti i messaggi registrati sulla console se si utilizza uno strumento come Firebug per ispezionare il codice. Diciamo che lo fai:

console.log('Testing console');

Quando accedi alla console in Firebug (o qualunque strumento tu decida di utilizzare per ispezionare il tuo codice), vedrai qualsiasi messaggio che hai detto alla funzione di accedere. Ciò è particolarmente utile quando si desidera vedere se una funzione è in esecuzione o se una variabile viene passata / assegnata correttamente. In realtà è piuttosto prezioso per capire cosa è andato storto con il tuo codice.


10
Non dimenticare di definire prima a errori Evita in IE: stackoverflow.com/a/7585409/318765
mgutt

83

Pubblicherà un messaggio di registro sulla console javascript del browser, ad esempio Firebug o Strumenti di sviluppo (Chrome / Safari) e mostrerà la linea e il file da cui è stato eseguito.

Inoltre, quando si genera un oggetto jQuery, questo includerà un riferimento a quell'elemento nel DOM e facendo clic su di esso andrà a quello nella scheda Elements / HTML.

Puoi usare vari metodi, ma fai attenzione perché funzioni in Firefox, devi avere Firebug aperto, altrimenti l'intera pagina andrà in crash. Che si tratti di una variabile, di una matrice, di un oggetto o di un elemento DOM, si otterrà una suddivisione completa, incluso anche il prototipo dell'oggetto (sempre interessante avere una visione d'insieme). Puoi anche includere tutti gli argomenti che desideri e verranno sostituiti da spazi.

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

Questi vengono visualizzati con loghi diversi per ciascun comando.

Puoi anche usare console.profile(profileName);per iniziare a profilare una funzione, uno script, ecc. E poi finirlo con console.profileEnd(profileName);e apparirà nella tua scheda Profili in Chrome (non lo so con FF).

Per un riferimento completo vai a http://getfirebug.com/logging e ti suggerisco di leggerlo. (Tracce, gruppi, profilatura, ispezione di oggetti).

Spero che sia di aiuto!


1
Perché è console.log("x:", x)meglio di console.log("x:" + x)? È meno soggetto a errori poiché ,è più facile da leggere di un +?
Kevin Meredith,

Secondo me è leggermente più facile da leggere quando stai producendo molte cose diverse. In questo caso probabilmente dovrebbe essere usato +rigorosamente, ma volevo dimostrare che puoi anche usare le virgole nelle funzioni della console. Inoltre, evita problemi se entrambe le variabili sono numeri interi o array.
Fred

5
console.log("x:", x)è significativamente migliore, perché quando xè un oggetto o un array (o qualsiasi cosa tranne una stringa), viene visualizzato correttamente, senza conversione in stringa.
Josef Kufner,

34

Non c'è niente a che fare con jQuery e se vuoi usarlo ti consiglio di farlo

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

Quindi non rompere il codice quando non è disponibile.

Come suggerito nel commento, puoi anche eseguirlo in un punto e quindi usarlo console.lognormalmente

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

18
Posso raccomandare invece di fare if(!window.console){ window.console = function(){}; }invece in un unico posto, quindi utilizzare console.log come di consueto.
Fresheyeball

23

console.lognon ha nulla a che fare con jQuery. È un oggetto / metodo comune fornito dai debugger (inclusi Chrome debugger e Firebug) che consente a uno script di registrare dati (o oggetti nella maggior parte dei casi) nella console JavaScript.


19

console.logregistra le informazioni di debug sulla console su alcuni browser (Firefox con Firebug installato, Chrome, IE8, qualsiasi cosa con Firebug Lite installato). Su Firefox è uno strumento molto potente, che consente di ispezionare oggetti o esaminare il layout o altre proprietà degli elementi HTML. Non è correlato a jQuery, ma ci sono due cose che vengono comunemente fatte quando lo si utilizza con jQuery:

  • installa l' estensione FireQuery per Firebug. Questo, tra gli altri vantaggi, rende la registrazione degli oggetti jQuery più gradevole.

  • creare un wrapper che sia più in linea con le convenzioni sul codice concatenato di jQuery.

Questo di solito significa qualcosa del genere:

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

che puoi quindi invocare come

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

per controllare facilmente all'interno delle catene jQuery.


16

console.log non ha nulla a che fare con jQuery.

Registra un messaggio su una console di debug, come Firebug.


16

Un punto di confusione a volte è che per registrare un messaggio di testo insieme al contenuto di uno dei tuoi oggetti usando console.log, devi passare ognuno dei due come argomento diverso. Ciò significa che è necessario separarli tramite virgole perché se si dovesse utilizzare l'operatore + per concatenare gli output, ciò implicherebbe implicitamente il .toString()metodo dell'oggetto. Questo nella maggior parte dei casi non viene esplicitamente annullato e l'implementazione predefinita ereditata da Objectnon fornisce alcuna informazione utile.

Esempio da provare in console:

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

mentre se provassi a concatenare il messaggio di testo informativo insieme al contenuto dell'oggetto otterrai:

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

Quindi tieni presente che console.log in effetti prende tutti gli argomenti che vuoi.


13

Utilizzare console.logper aggiungere informazioni di debug alla pagina.

Molte persone usano alert(hasNinjas)per questo scopo ma console.log(hasNinjas)è più facile lavorarci. L'utilizzo di un avviso fa apparire una finestra di dialogo modale che blocca l'interfaccia utente.

Modifica: concordo con Baptiste Pernet e Jan Hančič sul fatto che sia una buona idea verificare se window.consoleè stato definito per primo in modo che il codice non si interrompa se non è disponibile alcuna console.


12

Un esempio: supponiamo di voler sapere quale riga di codice è stata in grado di eseguire il programma (prima che si rompesse!), È sufficiente digitare

console.log("You made it to line 26. But then something went very, very wrong.")

11

Lo si utilizza per eseguire il debug del codice JavaScript con Firebug per Firefox o la console JavaScript nei browser WebKit .

var variable;

console.log(variable);

Visualizzerà il contenuto della variabile, anche se si tratta di una matrice o di un oggetto.

È simile a print_r($var);per PHP .


3
Un suggerimento utile ... Ho sempre includono quanto segue in un file javascript globalmente accessibile: if (!window.console) { window.console = { log : function() {} }; }. Questo ti consente di scordarti di rimuovere la dichiarazione di debug occasionale.
roufamatic,

@roufamatic Non lo so ... l'aggiunta di codice, per gestire il codice che non appartiene, sembra una soluzione piuttosto terribile ... specialmente quando trovare / sostituire è così facile ...
jondavidjohn

10

Attenzione: lasciare le chiamate sulla console nel codice di produzione provocherà la rottura del sito in Internet Explorer. Non tenerlo mai scartato. Vedi: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog


2
Non è che il registro della console si interromperà se si utilizza un computer Windows, ma interromperà il sito se si utilizza Internet Explorer.
Kris Hollenbeck,

Penso che il blog a cui fa riferimento la risposta non esiste più.
Tsundoku,

Il link originale è morto. Ho trovato una copia di Web Archive.
Alex,

8

All'inizio il debug di JS veniva eseguito tramite la alert()funzione, ora è una pratica obsoleta.

La console.log()è una funzione che scrive un messaggio per accedere alla console di debugging, come Webkit o Firebug. In un browser non vedrai nulla sullo schermo. Registra un messaggio su una console di debug. È disponibile solo in Firefox con Firebug e nei browser basati su Webkit (Chrome e Safari). Non funziona bene in tutte le versioni di IE .

L'oggetto console è un'estensione del DOM.

La console.log()deve essere usato in codice solo durante lo sviluppo e il debug.

È considerata una cattiva pratica che qualcuno lascia console.log()nel file javascript sul server di produzione.


5

Se il tuo browser supporta il debug, puoi utilizzare il metodo console.log () per visualizzare i valori JavaScript.

Attiva il debug nel tuo browser con F12 e seleziona "Console" nel menu debugger.

Console in JavaScript. Prova a correggere, o "debug", un programma JavaScript non funzionante e fai pratica usando il comando console.log (). Esistono scorciatoie che ti aiuteranno ad accedere alla console JavaScript, in base al browser che stai utilizzando:

Scorciatoie da tastiera della console Chrome

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

Scorciatoie da tastiera della console Firefox

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

Scorciatoie da tastiera della console di Internet Explorer

F12 chiave

Scorciatoie da tastiera di Safari Console

Cmd+ Option+C


4

console.login particolare è un metodo per gli sviluppatori di scrivere codice per informare in modo inequivocabile gli sviluppatori che cosa sta facendo il codice. Può essere utilizzato per avvisare che c'è un problema, ma non dovrebbe sostituire un debugger interattivo quando arriva il momento di eseguire il debug del codice. La sua natura asincrona significa che i valori registrati non rappresentano necessariamente il valore quando è stato chiamato il metodo.

In breve: registra gli errori con console.log(se disponibile), quindi correggi gli errori usando il tuo debugger preferito: Firebug , Strumenti per gli sviluppatori WebKit (integrati in Safari e Chrome ), Strumenti per gli sviluppatori IE o Visual Studio.


4

Sento davvero la programmazione web quando inizio console.logper il debug.

var i;

Se voglio verificare il valore di iruntime ..

console.log(i);

puoi controllare il valore corrente inella scheda della console di firebug. È utilizzato specialmente per il debug.


4

Viene utilizzato per accedere (qualsiasi cosa tu lo passi) alla console Firebug . L'utilizzo principale sarebbe il debug del codice JavaScript.


4

Oltre agli usi sopra menzionati, console.logè anche possibile stampare sul terminale in node.js. Un server creato con express (ad es.) Può usare console.logper scrivere nel file del logger di output.


2

Negli script java non ci sono funzioni di input e output. Quindi per eseguire il debug viene utilizzato il metodo code.log () di codice. È un metodo per la registrazione. Verrà stampato nel registro della console (strumenti di sviluppo).

Non è presente in IE8 e sotto fino a quando non si apre lo strumento di sviluppo di IE.


2

Questo non ha nulla a che fare con jQuery. Fa console.log()riferimento alla funzione di registro dell'oggetto console, che fornisce metodi per la registrazione delle informazioni sulla console del browser. Questi metodi sono destinati esclusivamente a scopi di debug e non devono essere utilizzati per la presentazione di informazioni agli utenti finali.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.