自定义一个log函数,输出传入函数的对象或者信息.
Log.js
// JScript source code
function
log(category, message, object) {
// If this category is explicitly disabled, do nothing
if
(log.options[category + "Disabled
"]) return
;
// Find the container
var
id = category + "_log
";
var
c = document
.getElementById(id);
// If there is no container, but logging in this category is enabled,
// create the container.
if
(!c && log.options[category + "Enabled
"]) {
c = document
.createElement("div
");
c.id = id;
c.className = "log
";
document
.body.appendChild(c);
}
// If still no container, we ignore the message
if
(!c) return
;
// If timestamping is enabled, add the timestamp
if
(log.options.timestamp)
message = new
Date
() + ":
" + (message ? message : "");
// Create a
element to hold the log entry
var entry =
document .createElement("
div "); entry.className = category + "
_message ";
if (message) {
// Add the message to it entry.appendChild(
document .createTextNode(message)); }
if (object &&
typeof object == "
object ") { entry.appendChild(log.makeTable(object, 0)); }
// Finally, add the entry to the logging container c.appendChild(entry); }
// Create a table to display the properties of the specified object log.makeTable =
function (object, level) {
// If we've reached maximum recursion, return a Text node instead.
if (level > log.options.maxRecursion)
return
document .createTextNode(object.
toString ());
// Create the table we'll be returning
var table =
document .createElement("
table "); table.border = 1;
// Add a Name|Type|Value header to the table
var header =
document .createElement("
tr ");
var headerName =
document .createElement("
th ");
var headerType =
document .createElement("
th ");
var headerValue =
document .createElement("
th "); headerName.appendChild(
document .createTextNode("
Name ")); headerType.appendChild(
document .createTextNode("
Type ")); headerValue.appendChild(
document .createTextNode("
Value ")); header.appendChild(headerName); header.appendChild(headerType); header.appendChild(headerValue); table.appendChild(header);
// Get property names of the object and sort them alphabetically
var names = [];
for (
var
name
in object) names.push(
name ); names.sort();
// Now loop through those properties
for (
var i = 0; i < names.
length ; i++) {
var
name , value, type;
name = names[i];
try { value = object[
name ]; type =
typeof value; }
catch (e) {
// This should not happen, but it can in Firefox value = "
"; type = "
unknown "; };
// Skip this property if it is rejected by a filter
if (log.options.filter && !log.options.filter(
name , value))
continue ;
// Never display function source code: it takes up too much room
if (type == "
function ") value = "
{/*source code suppressed*/} ";
// Create a table row to display property name, type and value
var row =
document .createElement("
tr "); row.vAlign = "
top ";
var rowName =
document .createElement("
td ");
var rowType =
document .createElement("
td ");
var rowValue =
document .createElement("
td "); rowName.appendChild(
document .createTextNode(
name )); rowType.appendChild(
document .createTextNode(type));
// For objects, recurse to display them as tables
if (type == "
object ") rowValue.appendChild(log.makeTable(value, level + 1));
else rowValue.appendChild(
document .createTextNode(value));
// Add the cells to the row, and add the row to the table row.appendChild(rowName); row.appendChild(rowType); row.appendChild(rowValue); table.appendChild(row); }
// Finally, return the table.
return table; }
// Create an empty options object log.options = {timestamp:
true };
// Utility versions of the function with hardcoded categories log.debug =
function (message, object) { log("
debug ", message, object); }; log.warn =
function (message, object) { log("
warning ", message, object); };
// Uncomment the following line to convert alert() dialogs to log messages
// function alert(msg) { log("alert", msg); }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Log</title> <mce:script type="text/javascript" src="Log.js" mce_src="Log.js"></mce:script> <!-- include log() --> <link rel="stylesheet" type="text/css" href="log.css" mce_href="log.css" /> <!-- include styles --> </head> <body> <mce:script type="text/javascript"><!-- function makeRectangle(x, y, w, h) { // This is the function we want to debug log.debug("entering makeRectangle"); // Log a message var r = {x:x, y:y, size: { w:w, h:h }}; log.debug("New rectangle", r); // Log an object log.debug("exiting makeRectangle"); // Log another message return r; } // --></mce:script> <!-- this button invokes the function we want to debug --> <button οnclick="makeRectangle(1,2,3,4);">Make Rectangle</button> <!-- This is where our logging messages will be placed --> <!-- We enable logging by putting this <div> in the document --> <div id="debug_log"></div> </body> </html>
log.css
#debug_log { /* Styles for our debug message container */
background-color: #aaa; /* gray background */
border: solid black 2px; /* black border */
overflow: auto; /* scrollbars */
width: 75%; /* not as wide as full window */
height: 300px; /* don't take up too much vertical space */
}
#debug_log:before { /* Give our logging area a title */
content: "Debugging Messages";
display: block;
text-align: center;
font: bold 18pt sans-serif ;
}
.debug_message { /* Place a thin black line between debug messages */
border-bottom: solid black 1px;
}
运行结果:
![结果图 结果图](https://i-blog.csdnimg.cn/blog_migrate/e1732d118944abed803c80a8a28f2f41.png)
所有评论(0)