Cos’è console.log?

Qual è l’uso di console.log ?

Si prega di spiegare come usarlo in JavaScript, con un esempio di codice.

Non è una funzione jQuery ma una funzionalità a scopo di debug. Ad esempio, è ansible registrare qualcosa nella console quando succede qualcosa. Per esempio:

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

Vedrai quindi che #someButton was clicked nella scheda “Console” di Firebug (o nella console di un altro strumento, ad es. Web Inspector di Chrome) quando fai clic sul pulsante.

Per alcuni motivi, l’object console potrebbe non essere disponibile. Quindi è ansible verificare se lo è: ciò è utile in quanto non è necessario rimuovere il codice di debug durante la distribuzione in produzione:

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

Luoghi puoi vedere la console! Giusto per averli tutti in una sola risposta.

Firefox

https://getfirebug.com/

Anche gli strumenti di sviluppo incorporati di Firefox Ctrl + Maiusc + J (Strumenti> Web Developer> Console errore) (ma Firebug è molto meglio, usa Firebug)

https://developer.mozilla.org/en-US/docs/Tools

Safari e Chrome

Fondamentalmente lo stesso.

https://developers.google.com/web/tools/chrome-devtools/

https://developer.apple.com/safari/tools/

Internet Explorer

Non dimenticare che puoi utilizzare le modalità di compatibilità per eseguire il debug di IE7 e IE8 in IE9 o IE10

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

https://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

https://getfirebug.com/firebuglite/ cerca bookmarklet stabile

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

musica lirica

https://www.opera.com/dragonfly/

iOS

Funziona su tutti gli iPhone, iPod touch e iPad.

https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/
( collegamento all’archivio per il debug di contenuto Web su iOS )

Ora con iOS 6 è ansible visualizzare la console tramite Safari in OS X se si collega il dispositivo. Oppure puoi farlo con l’emulatore, basta aprire una finestra del browser Safari e andare alla scheda “Sviluppo”. Lì troverai le opzioni per far sì che Safari Inspector possa comunicare con il tuo dispositivo.

Windows Phone, Android

Entrambi non hanno console incorporate e nessuna capacità bookmarklet. Quindi usiamo https://jsconsole.com/ type: ascolta e ti darà un tag script da inserire nel tuo codice HTML. Da quel momento in poi potrai visualizzare la tua console nel sito web di 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 pratico plug-in del browser.


Problemi del browser precedenti

Infine i browser più vecchi (grazie ancora a Microsoft) si bloccano se si utilizza console.log nel codice e non si aprono gli strumenti di sviluppo contemporaneamente. Fortunatamente è una soluzione facile. Usa semplicemente lo snippet di codice seguente nella parte superiore del tuo codice e il buon vecchio IE dovrebbe lasciarti in pace:

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

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

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

 console.log('Testing console'); 

Quando accedi alla console in Firebug (o qualsiasi strumento tu decida di utilizzare per ispezionare il tuo codice), vedrai qualunque messaggio tu abbia detto alla funzione di registrare. 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.

Pubblicherà un messaggio di log sulla console javascript del browser, ad esempio Firebug o Developer Tools (Chrome / Safari) e mostrerà la riga e il file da cui è stato eseguito.

Inoltre, quando si esegue l’output di un object jQuery includerà un riferimento a quell’elemento nel DOM e facendo clic su di esso verrà visualizzato nella scheda Elementi / HTML.

Puoi usare vari metodi, ma attenzione che funzioni in Firefox, devi avere Firebug aperto, altrimenti l’intera pagina andrà in crash. Se quello che stai loggando è una variabile, un array, un object o un elemento DOM, ti darà una descrizione completa includendo anche il prototipo dell’object (è sempre interessante avere un colpo in giro). Puoi anche includere tutti gli argomenti che desideri e saranno 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 diversi loghi per ciascun comando.

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

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

Spero che questo ti aiuti!

Non c’è niente da fare con jQuery e se vuoi usarlo ti consiglio di fare

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

Quindi non si rompe il codice quando non è disponibile.

Come suggerito nel commento, è anche ansible eseguirlo in un posto e quindi usare console.log normalmente

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

console.log non ha nulla a che fare con jQuery. È un object / metodo comune fornito dai debugger (incluso il debugger di Chrome e Firebug) che consente a uno script di registrare i dati (o gli oggetti nella maggior parte dei casi) sulla console JavaScript.

console.log registra 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 sono comunemente fatte quando lo si usa con jQuery:

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

  • crea un wrapper più in linea con le convenzioni del codice di concatenamento di jQuery.

Questo significa solitamente 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.

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

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

Un punto di confusione a volte è che per registrare un messaggio di testo insieme al contenuto di uno dei tuoi oggetti utilizzando console.log, devi passare ognuno dei due come argomento diverso. Ciò significa che devi separarli con le virgole perché se dovessi usare l’operatore + per concatenare le uscite, ciò implicitamente chiamerebbe il metodo .toString() dell’object. Questo nella maggior parte dei casi non è esplicitamente sovrascritto e l’implementazione predefinita ereditata da Object non 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 informativo insieme ai contenuti dell’object riceverai:

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

Quindi tieni presente che console.log prende infatti tutti gli argomenti che desideri.

Usa console.log per aggiungere informazioni di debug alla tua pagina.

Molte persone usano alert(hasNinjas) per questo scopo ma console.log(hasNinjas) è più facile da utilizzare. Utilizzando un avviso si apre una finestra di dialogo modale che blocca l’interfaccia utente.

Modifica: Sono d’accordo con Baptiste Pernet e Jan Hančič che è una buona idea controllare se window.console è definito prima in modo che il tuo codice non si interrompa se non c’è una console disponibile.

Un esempio: supponiamo che tu voglia sapere quale linea di codice sei riuscito a far girare il tuo programma (prima che si rompesse!), Semplicemente scrivi

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

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

 var variable; console.log(variable); 

Visualizzerà il contenuto della variabile, anche se si tratta di un array o di un object.

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

Attenzione: lasciare le chiamate alla console nel codice di produzione causerà l’interruzione del tuo sito in Internet Explorer. Non tenerlo mai aperto. Vedi: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

Nei primi giorni il debugging JS veniva eseguito tramite la funzione alert() : ora è una pratica obsoleta.

console.log() è una funzione che scrive un messaggio per accedere alla console di debug, 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’object console è un’estensione del DOM.

Il console.log() dovrebbe essere usato nel codice solo durante lo sviluppo e il debug.

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

console.log è specificamente un metodo con cui gli sviluppatori possono scrivere codice per informare in modo inequivocabile gli sviluppatori del codice. Può essere usato per avvisare che c’è un problema, ma non dovrebbe prendere il posto di 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 di scelta: Firebug , Strumenti per sviluppatori WebKit (integrato in Safari e Chrome ), IE Developer Tools o Visual Studio.

Mi sento davvero a mio agio con la programmazione web quando avvio console.log per il debug.

 var i; 

Se voglio controllare il valore di i runtime ..

 console.log(i); 

puoi controllare il valore corrente di i nella scheda della console di Firebug. È usato specialmente per il debugging.

È usato per registrare (tutto ciò che si passa) alla console Firebug . L’utilizzo principale sarebbe quello di eseguire il debug del codice JavaScript.

Oltre agli usi menzionati sopra, console.log può anche stampare sul terminale in node.js Un server creato con express (ad es.) Può utilizzare console.log per scrivere nel file del registratore di output.

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

Attiva il debug nel tuo browser con F12 e seleziona “Console” nel menu del debugger.

Console in JavaScript. Prova a correggere, o “esegui il debug”, un programma JavaScript non funzionante e 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 di Chrome Console

Windows: Ctrl + Maiusc + J
Mac: Cmd + Opzione + J

Scorciatoie da tastiera della console di Firefox

Windows: Ctrl + Maiusc + K
Mac: Cmd + Opzione + K

Scorciatoie da tastiera della console di Internet Explorer

Tasto F12

Scorciatoie da tastiera di Safari Console

Cmd + Opzione + C

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

Non è presente in IE8 e sotto finché non si apre lo strumento di sviluppo di IE.