main কাজঃ
এর কাজ হল browser এর console এ গিয়ে output দেখানো । console.log() দিয়ে কোন কিছু print করলে তার output দেখতে হবে কোন browser এর console এ গিয়ে ।
simple code:
var lol="hello world";
console.log(lol);
firefox এর console খুলতে --ctrl+shift+k
chorome এর console খুলতে --ctrl+shift+j
Resource 1:
It's not a jQuery feature but a feature of Firebug (or some other tool). It's used for debugging. You can for instance log something to the console when something happens. For instance:
$( '#someButton' ).click ( function () {
console.log ( '#someButton was clicked' );
// do something
} );
You'd then see
#someButton was clicked in Firebug’s “Console” tab (or another tool’s console — e.g. Chrome’s Web Inspector) when you would click the button.
edit: as Baptiste Pernet showed in his answer you could first check if
console is even avaliable. This is useful as you don't have to remove your debugging code when you deploy to production:if ( window.console && window.console.log ) {
// console is available
}Resource 2:
It will post a log message to the browser's javascript console, e.g. Firebug or Developer Tools (Chrome / Safari) and will show the line and file where it was executed from.
Moreover, when you output a jQuery Object it will include a reference to that element in the DOM, and clicking it will go to that in the Elements/HTML tab.
You can use various methods, but beware that for it to work in Firefox, you must have Firebug open, otherwise the whole page will crash. Whether what you're logging is a variable, array, object or DOM element, it will give you a full breakdown including the prototype for the object as well (always interesting to have a poke around). You can also include as many arguments as you want, and they will be replaced by spaces.
console.log( myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");
These show up with different logos for each command.
You can also use console.profile(profileName); to start profiling a function, script etc. And then end it with console.profileEnd(profileName); and it will show up in you Profiles tab in Chrome (don't know with FF).
For a complete reference go to http://getfirebug.com/logging and I suggest you read it. (Traces, groups, profiling, object inspection).
Resource 3:
There is nothing to do with jQuery and if you want to use it I advice you to do
if (window.console) {
console.log("your message")
}
So you don't break your code when it is not available.
As suggested in the comment, you can also execute that in one place and then use console.log as normal
if (!window.console) { window.console = { log: function(){} }; }
Resource 4:
Places you can view the console! Just to have them all in one answer.
Firefox
(you can also now use Firefox's built in developer tools Ctrl+Shift+J (Tools > Web Developer > Error Console), but Firebug is much better; use Firebug)
Safari and Chrome
Basically the same.
Internet Explorer
Don't forget you can use compatibility modes to debug IE7 and IE8 in IE9 or IE10
If you must access the console in IE6 for IE7 use the Firebug Lite bookmarklet
http://getfirebug.com/firebuglite/ look for stable bookmarklet
Opera
iOS
Works for all iPhones, iPod touch and iPads.
Now with iOS 6 you can view the console through Safari in OS X if you plug in your device. Or you can do so with the emulator, simply open a Safari browser window and go to the "Develop" tab. There you will find options to get the Safari inspector to communicate with your device.
Windows Phone, Android
Both of these have no console built in and no bookmarklet ability. So we use http://jsconsole.com/type :listen and it will give you a script tag to place in your HTML. From then on you can view your console inside the jsconsole website.
iOS and Android
You can also use http://html.adobe.com/edge/inspect/ to access web inspector tools and the console on any device using their convenient browser plugin.
Older browser problems
Lastly older browsers (thanks again Microsoft) will crash if you use console.log in your code and not have the developer tools open at the same time. Luckily its an easy fix. Simple use the below code snippet at the top of your code and good old IE should leave you alone:
if(!window.console){ window.console = {log: function(){} }; }
This checks to see if the console is present, and if not it sets it to an object with a blank function calledlog. This way window.console and window.console.log is never truly undefined.
0 comments:
Post a Comment