Cool tricks with Internet Explorer Developer Tools and datajs

Today I want to show you how the Internet Explorer Developer Tools and datajs make it easy for developers to experiment with code and data. Just follow along in another Internet Explorer window and enjoy.

First, we'll want to start with a page, let's say https://www.bing.com/. As always, we're greeted with a nice background picture.

Next, we'll bring up the developer tools. Simply press F12 in your browser and the window will come up. Pin it by pressing Ctrl+P (or clicking the rightmost button on the menu area).

Now we'll check whether we have datajs loaded. Click on the Script tab, and type datajs at the prompt. A red message will be shown, "'datajs' is undefined". OK then, let's load it by pasting the following code at the prompt.

(function() {
  var url = "https://download.codeplex.com/Project/Download/FileDownload.aspx?ProjectName=datajs&DownloadId=227462&FileTime=129470492005570000&Build=17889";
  var scriptTag = document.createElement("SCRIPT");
  scriptTag.setAttribute("type", "text/javascript");
  scriptTag.setAttribute("src", url);
  var h = document.getElementsByTagName("HEAD")[0];
  h.appendChild(scriptTag);
})();

This pulls in datajs 0.0.3 from CodePlex. You'll note that the tool went into multi-line mode after pasting; you can go back to the single line by clicking on the 'Single line mode' button. 'Single line' is more convenient in that you can execute everything by pressing Enter, but of course it doesn't work well for multi-line snippets like the one above. If you run OData now, you'll get a few of the members displayed, and we're ready to go.

Next, if we check whether jQuery is loaded like before, we'll see that it's not, so the following snippet will do the trick (we're really just changing the url value).

(function() {
  var url = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js";
  var scriptTag = document.createElement("SCRIPT");
  scriptTag.setAttribute("type", "text/javascript");
  scriptTag.setAttribute("src", url);
  var h = document.getElementsByTagName("HEAD")[0];
  h.appendChild(scriptTag);
})();

Now we're ready to rock and roll. Let's get some sample data from the web and display it on the page.

(function() {
  var url = "https://services.odata.org/Northwind/Northwind.svc/Customers";
  OData.defaultHttpClient.enableJsonpCallback = true;
  OData.read(url, function(data) {
    var html = "<table>";
    for (var i = 0; i < data.results.length; i++) {
      html += "<tr>";
      for (var element in data.results[i]) {
        html += "<td>" + data.results[i][element] + "</td>";
      }
      html += "</tr>";
    }
    html += "</table>";
    $(document.body).append(html);
  });
})();

Of course, you can also use the developer tools to craft more interesting queries, submit changes, test / tweak scripts, extract and reshape some interesting page... There are lots of scenarios and uses for this very useful tool for web developers.

Enjoy!