{"id":117,"date":"2006-12-03T00:26:00","date_gmt":"2006-12-03T00:26:00","guid":{"rendered":"https:\/\/wdev-blog.azurewebsites.net\/index.php\/2006\/12\/03\/javascript-debug-log\/"},"modified":"2006-12-03T00:26:00","modified_gmt":"2006-12-03T00:26:00","slug":"javascript-debug-log","status":"publish","type":"post","link":"http:\/\/panahy.nl\/index.php\/2006\/12\/03\/javascript-debug-log\/","title":{"rendered":"JavaScript Debug Log"},"content":{"rendered":"
Date: Monday, 18 Dec 2006 14:08<\/div>\n
<\/div>\n
Original Post : http:\/\/ajaxcookbook.org\/javascript-debug-log\/<\/a><\/div>\n
By Bret Taylor<\/a>, December 3, 2006<\/div>\n

Even with the most advanced debugging tools, every program requires a little “printf<\/code> debugging”: run your program, print out state as it executes, and visually verify that everything is working properly. Unfortunately, there is no built in console to print debug messages to in JavaScript, forcing many JavaScript programmers to revert to calling alert()<\/code> in their code. alert<\/code> is completely infeasible for a function that gets called a lot, as it halts execution until you click an OK button. This recipe creates a simple debug log window that does not halt execution: <\/p>\n

<\/div>\n
\n

function log(message) {
    if (!log.window_  log.window_.closed) {
        var win = window.open(\"\", null, \"width=400,height=200,\" +
                              \"scrollbars=yes,resizable=yes,status=no,\" +
                              \"location=no,menubar=no,toolbar=no\");
        if (!win) return;
        var doc = win.document;
        doc.write(\"<html><head><title>Debug Log<\/title><\/head>\" +
                  \"<body><\/body><\/html>\");
        doc.close();
        log.window_ = win;
    }
    var logLine = log.window_.document.createElement(\"div\");
    logLine.appendChild(log.window_.document.createTextNode(message));
    log.window_.document.body.appendChild(logLine);
}
<\/pre>\n<\/div>\n
<\/div>\n
To print log messages, you just call log()<\/code> within your code:<\/p>\n
<\/p>\n

for (var i = 0; i < 10; i++) {
     log(\"This is log message #\" + i);
} <\/pre>\n<\/div>\n
When you push your code to production, you can just replace the definition of log<\/code> with an empty function so your users will not see your debug messages.<\/p>\n
See the example<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Date: Monday, 18 Dec 2006 14:08 Original Post : http:\/\/ajaxcookbook.org\/javascript-debug-log\/ By Bret Taylor, December 3, 2006 Even with the most advanced debugging tools, every program requires a little “printf debugging”: run your program, print out state as it executes, and visually verify that everything is working properly. Unfortunately, there is no built in console to … Continue reading “JavaScript Debug Log”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[94,18,73],"tags":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"Pouya Panahy","author_link":"http:\/\/panahy.nl\/index.php\/author\/pouya\/"},"uagb_comment_info":1,"uagb_excerpt":"Date: Monday, 18 Dec 2006 14:08 Original Post : http:\/\/ajaxcookbook.org\/javascript-debug-log\/ By Bret Taylor, December 3, 2006 Even with the most advanced debugging tools, every program requires a little “printf debugging”: run your program, print out state as it executes, and visually verify that everything is working properly. Unfortunately, there is no built in console to…","_links":{"self":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/117"}],"collection":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":0,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"wp:attachment":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}