Jun 8 2012

JavaScript StackTrace With The console Object

Error handling and debugging had been made difficult in JavaScript because the lack of tools and the language itself. Unlike Java, that has a strong type and hierarchy of exception classes, JavaScript didn’t even have a direct approach to print the execution stack trace. For years I used a workaround to navigate around stack trace of a method call in JavaScript by using the Function arguments property. In JavaScript, all functions have an arguments property defined. The arguments property is available even if the function is defined with no explicit function parameters. The function arguments property behaves like an array and you can iterate through the argument parameters used to call the function but it also has a reference to the caller via the arguments.callee property. The arguments.callee property references the currently executing function itself, which has a caller property to that of the previous function call in the execution stack.

function basicFunction() {
   var isTrue = arguments.callee == basicFunction; // true
   var callingFunction = arguments.callee.caller; 
}

In the above code, the callingFunction variable holds a reference to the Function object that called the basicFunction.

The caller property returns a Function object or null, so you can chain these until you get to the root of the call stack. You can iterate through a call stack in JavaScript with code similar to the following.

function basicFuction() {
   var caller = arguments.callee.caller;
   while(caller != null) {
      console.log(caller);
      caller = caller.caller;
   }
}

Unfortunately, there is no clean way to get the function name out of the Function object returned by the caller property. This is made slightly more difficult because somethings functions don’t have names if they are created anonymously. If you print or log a Function object, it displays the function definition in its entirety.

Fortunately, the JavaScript console object provides a trace function that will log to the web console the JavaScript stack trace.

function basicFunction() {
   console.trace();
}

If the above function is invoked from an on click event, the whole JavaScript track trace from the on click to the basicFunction function is logged out in the web console. In addition to the function names, the web console in Safari, Chrome, and Firefox have a link to navigate to the exact location your web application where the functions were called.


Jun 4 2012

JavaScript Debugging With The console Object

In the early days of JavaScript there were few options for debugging large web applications. You could have used the multiple alert notifications or possibly even calling document.write to write messages into the document. Firebug changed web developers lives, and I think how we view JavaScript, by making it incredibly easy to debug HTML, CSS, and JavaScript. Since Firebug, most current versions of web browsers include powerful debugging tools. In addition to the debugging tools browsers have made available a JavaScript console object to help write debug statements. With console, there is no need to pop up alerts to inspect the state of an object. To write a log message intended for the console, just write the following JavaScript statement in the right place.

console.log("This is a log message");
console.log("Message one", "Message two", "Message three");

To open the console, you can find it in Safari by looking for the the Web Inspector, in Chrome it’s called Developer Tools, and in Firefox you’ll find it under the Tools menu as Web Console.

The console object has a lot of useful debugging messages for errors with different severity, such as log, debug, info, warn, and error.

console.info("I'm here.");
console.warn("Do I smell smoke?");
console.error("The roof, the roof, the roof is on fire.");

In addition to logging String messages, you can log whole JavaScript objects. It may be useful to inspect a complete object and it’s state. To write out the state of an object to the console use the dir method as in the following example.

console.dir({fname:"Bill", lname:"Gates"});
console.dir(document.getElementById('SomeElementId'));

In Chrome and Safari, you can also use dirxml to display the a HTML element object in the console as HTML. In my version of Firefox, this method did not work.

console.dirxml(document.getElementById('SomeElementId'));

You can also group related log messages, no matter their severity. To group console messages surround them with a group and groupEnd. You can even nest groups inside of groups.

console.group("Server update");
console.log("calling server...");
// ... any number of console log messages.
console.groupEnd();

You can also test the performance of your JavaScript code with time and timeEnd. Both of these methods accept a String label and it needs it needs to be the same value for both methods.

console.time("Process Data");
// ... some time consuming code
console.timeEnd("Process Data");

When the timeEnd method is executed it will generate a message in the log console with the amount of time it took to run the code between the time and timeEnd method.

Chrome Developer Tools Web Console

Chrome Developer Tools Web Console


Nov 14 2011

jQuery Mobile + PhoneGap = Awesome Mobile Development Platform

I’m currently prototyping an iPad application and I’ve just found working with jQuery Mobile and PhoneGap to be a breeze for mobile application development. I’ve used iOS SDK before and I’ve experimented on test applications with Android and I’ve always found issues with both the iOS and Android development frameworks. I’ve also looked into cross platform mobile development toolkits such as Appcelerator Titanium and Sencha Touch but I found these were not of me at the time. Any of the aforementioned platforms and frameworks can be used to create a great looking and functional mobile application but I found that they each ask the developer to make a trade off.

With jQuery Mobile, you develop your mobile application with HTML5 and JavaScript/jQuery. With jQuery Mobile, all of your UI is written in pure HTML5 tags with the correct CSS classes and attributes. jQuery Mobile is built on top of jQuery so many web developers can immediately start being productive with jQuery Mobile.

Everybody has an idea for the next great iPhone application. The top reasons I’ve heard from people, including from developers, as an excuse for not getting started is that they don’t have a Apple computer, they don’t want to learn another programming language, they don’t have time, etc. jQuery Mobile invalidates all of these excuses. You can use Firefox or Chrome to test your jQuery Mobile application, you develop using plain HTML5 and JavaScript, and most it’s easy to pick up.

Because a jQuery Mobile application is just a HTML5-based web application, if your an run it on your iPhone or other mobile device using the native web browser. On the iPhone, when you run a jQuery Mobile application the browser will take up a small portion on the screen for the navigation buttons, bookmarks, and other controls of the browser. One way to claim all of the screen real-estate is to create a native application, that is where PhoneGap comes in. PhoneGap is a native shell around a web application, such as those developed in jQuery Mobile. With PhoneGap, you can turn your jQuery Mobile application into a full fledged native application.


Dec 31 2009

TechKnow Year In Review 2009

It is that time of year where we reflect on the accomplishments of the passing year and look forward to the one to come. Here is a window into the past year in technology through this year’s popular posts on TechKnow Juixe.

Top Favorites

Fav Tutorial

Memorable Quotes

Twitter

Twitter Conversations

Year in Review


Aug 17 2009

The 1Kb CSS Grid

I’ve used a variety of layout techniques and technologies, from HTML tables to home grown CSS. I recently started using The 1Kb CSS Grid to layout my web content in a page. With The 1Kb CSS Grid you can specially design your grid CSS by selecting the number of columns, the column width and the gutter width between columns. The width of your grid will be calculated for you but just in case you care, the total width of the grid will be based on the following equation: (Number of Columns x Column Width) + (Number of Columns – 1) * Gutter With

1Kb CSS Grid

1Kb CSS Grid

For my requirements I found when using The 1Kb CSS Grid that I tend to get more flexibility when I use 12 columns at 60 pixel wide each column and a gutter of only 10 pixels. The total grid width for this layout is 840px. If you peek in the generated grid.css you will find, with our configuration, 12 grid classes, such as grid_1, grid_2, etc. Think of grid_1 as a single column, and grid_2 as a one cell that spans two columns. You can have any number of rows, but each row you only have 12 columns. For example, you can have one grid_12, or three grid_4, or 12 grid_1 per row. Lets see the HTML for a few rows and how they would end up looking.

<div class="row">
  <div class="column grid_12">12</div>
</div>
<div class="row">
  <div class="column grid_6">6</div>
  <div class="column grid_6">6</div>
</div>
<div class="row">
  <div class="column grid_1">1</div>
  <div class="column grid_2">2</div>
  <div class="column grid_4">4</div>
  <div class="column grid_5">5</div>
</div>
Basic Grid Layout

Basic Grid Layout

Notice that each row can have any number of grids, as long as the grid count adds up to 12. You can also nest rows

<div class="row">
  <div class="column grid_8">8
    <div class="row">
      <div class="column grid_4">4</div>
      <div class="column grid_4">4</div>
    </div>
  </div>
  <div class="column grid_4">4</div>
</div>

As a tip, just remember that the grid count in the nested row must add up to the parent/containing column grid count. Below is a dramatization of what a CSS grid row with a nested row would look like.


Sep 7 2008

Google Chrome

The Browser War is flaring up once again with the release of Google Chrome. Google Chrome is a new browser based on many freely available open source components such as WebKit and Firefox. Chrome is bare bones, chromeless, browser with very little UI fluff and decoration. It is interesting to note that the UI for the Google browser took a note from the companies colorful logo, the Chrome UI is very cartoon-like with a blue pastel color scheme.

Many of the features that are high lighted in Chrome are not necessarily revolutionary, instead I would say that the Google browser is retro-evolutionary. Chrome basically reduced the browser to the location bar, tabs, and content page.

The most touted features in Chrome are its crash control, incognito mode, and safe browsing. Chrome runs each web page on its own process so that if one page fails only that page is effected. Incognito mode is like Safari’s Private Browsing, aka Porn Mode, it allows you to surf the web without caching cookies and history of the sites you visit on your local computer. It’s safe browsing feature will help you to identify web sites with malicious code or applications. Many of these features are not entirely novel, so why would Google go to the efforts of creating a new browser?

What I think is novel is that Google decided to release yet another browser. The browser space is already crowded with Firefox, IE, Safari, Opera, Konqueror, and Flock to name just a few. It is clear that Google will align Chrome with its properties, search, applications, development tools, and user generated content sites. Seeing Google take this approach I wonder if other companies follow suit and release internet browsers that compliment their business. Can you imagine a custom browser from Adobe, Mcaffee, Oracle, Amazon, or EBay?

Chrome Web Development Disturbance
Via Noise to Signal

Technorati Tags: , , , , , ,