{"id":74,"date":"2012-12-04T15:49:42","date_gmt":"2012-12-04T15:49:42","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=74"},"modified":"2012-12-04T15:53:48","modified_gmt":"2012-12-04T15:53:48","slug":"debugging-javascript","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/debugging-javascript\/","title":{"rendered":"Debugging JavaScript"},"content":{"rendered":"

Meet the Console<\/h3>\n

Our final post for 2010 comes after a few discussions with industry friends. I was surprised to find that a number of them had never used the in-browser debugging consoles for JavaScript. Regrettably this also included a certain member of our own office, but he can remain nameless for now.<\/p>\n

So for those of you who haven\u2019t yet been formally introduced to the browser console API, here\u2019s a great way to start fresh in 2011.<\/p>\n

Visual Debugging<\/h3>\n

When you work on websites, debugging is mostly a visual experience. It\u2019s easy to see misaligned columns or overlapping text, change something, and then refresh. With PHP, error reporting stops the script and displays the issue right on the page. In short, a good chunk of web design errors can be handled identified by page load.<\/p>\n

The console API is a browser object that can be used to output debugging information as a page loads. For example, the console might output an error if an image element had a source of \u201cdefinitelynotareallink\u201d instead of a valid URL. The console really shines when it comes to JavaScript, especially when sorting through the DOM.<\/p>\n

\"Chrome<\/p>\n

Firebug has the best documented (and robust) console API<\/a>, but Firefox isn\u2019t the only browser that can use it. Most modern browsers have development tools that include a console tab. For Chrome and Safari, you can reach this view by right-clicking and selecting \u201cInspect Element\u201d from the context menu.<\/p>\n

Simple Examples<\/h3>\n

The console support a number of options, but you\u2019ll probably only use the same 3-4 regularly. From my own experience, the log() function is by far the most useful. It outputs a new message line to the console that can contain plaintext, DOM Elements, or variables. The examples below cover a couple of the more common functions.<\/p>\n

In this script, the console outputs a different result depending on whether or not the full_name variable is empty:<\/p>\n

\n
    \n
  1. if\u00a0(full_name\u00a0!=\u00a0“”){<\/li>\n
  2. \u00a0\u00a0\u00a0\u00a0console.log(‘The\u00a0name\u00a0\\”‘\u00a0+\u00a0full_name\u00a0+\u00a0‘\\”\u00a0was\u00a0entered’);<\/li>\n
  3. }else{<\/li>\n
  4. \u00a0\u00a0\u00a0\u00a0console.error(‘No\u00a0name\u00a0was\u00a0entered’);<\/li>\n
  5. }<\/li>\n<\/ol>\n<\/div>\n

    For this jQuery click event, the console will return information about the target element\u2019s attributes:<\/p>\n

    \n
      \n
    1. $(‘.trace’).click(function(){<\/li>\n
    2. \u00a0\u00a0\u00a0\u00a0\/\/Run\u00a0a\u00a0trace\u00a0on\u00a0this\u00a0click\u00a0event<\/li>\n
    3. \u00a0\u00a0\u00a0\u00a0console.trace();<\/li>\n
    4. \u00a0\u00a0\u00a0\u00a0return\u00a0false;<\/li>\n
    5. });<\/li>\n<\/ol>\n<\/div>\n

      \"Console<\/a><\/p>\n

      Direct Input is Allowed<\/h4>\n

      The console goes much deeper than simple outputs, and can also accept direct input similar to a command line. For example, type \u201cdocument\u201d and press enter to get the page returned. Console DOM traversal is a bit heavier (and not as immediately useful) for an introduction, so we\u2019ll leave that for another post.<\/p>\n

      Keep the Page Clean<\/h3>\n

      Debugging behind the scenes keeps your page clear of any \u201ctesting only\u201d outputs that must be deleted before launching. It\u2019s entirely possible to leave console debugging in a live installation without the user ever noticing.<\/p>\n

      Next time you\u2019re working on a JavaScript project, give the console a go. It\u2019s a hell of a lot easier than creating random alert() boxes for specific triggers. When it comes to troubleshooting, unobtrusive is wonderful.<\/p>\n

      If there\u2019s a further interest in this topic, there are a number of things we can do more on, particularly with tracking jQuery events. If you have any suggestions, questions, or expertise of your own to throw in, leave a comment below and we\u2019ll compile something for a future post.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Meet the Console Our final post for 2010 comes after a few discussions with industry friends. I was surprised to find that a number of them had never used the in-browser debugging consoles for JavaScript. Regrettably this also included a certain member of our own office, but he can remain nameless for now. So for […]<\/p>\n","protected":false},"author":1,"featured_media":79,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[9,10,7],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/74"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/79"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}