3 ways to print javascript Object
Blogs20112011-03-27
3 ways to print javascript Object
It is always helpful to print Javascript Objects on screen. Here I use ‘click’ event as object, to use 3 ways to print out. Actually any object can simulate.
- print objects(associate array) in a HTMl div.
- print objects in console
- alert - popup window
The browsers work differently:
- For FF, all 3 ways work.
- For Chrome, 1,2 works.
- For IE, 1 works.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Events</title>
http://www.google.com/jsapi
google.load("jquery", "1.4.2");
$(document).ready(function() {
$('#div1').bind('click', function(e) {
$('#div1').append(e.type).css('color', 'red');
// print in screen.
var output = '';
for (property in e) {
output += property + ': ' + e[property]+"; n";
}
$('#div2').append(output);
// print in FF
console.log(e);
// alert.
alert(e.toSource());
})
});
</head>
<body>
DIV event:
</body>
</html>So FF’s console is the best solution for debug purpose. A useful article can be found at: http://stackoverflow.com/questions/957537/how-can-i-print-a-javascript-object