Script Injection: Debug with Your Favorite AJAX Library

June 15th, 2010 by Bob Byron

You want to debug a web page using your favorite AJAX library, but it isn’t loaded into the page. Fortunately, there is a solution…

Script Injection: Debug with Your Favorite AJAX Library

Many of you are familiar with debugging using Firebug. It gives you a console allowing you to interact with the DOM and call any functions available in scope. This proves to be extremely useful when you are analyzing or otherwise debugging a website. If your favorite AJAX library has been loaded, you can even call it interactively too. With convenience functions that most libraries offer, it is another handy way of making quick tests of the code. But, what if your library hasn’t been included in the page?

With console access it is simple to inject your script into the page.  There are many great AJAX libraries out there and we will have injection code for several, however, we are going to use Dojo for this example, although this technique should work for most libraries out there. Go to the Firebug command line and type the following:

document.documentElement.firstChild
 .appendChild(document.createElement("script"))
 .src='http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js';

Note: This attaches to the first element in the doc which is probably the head – but if there ISN’T a head, this will still work!

In a single line (thanks Mike for taking it from four lines to one), that code creates a script element, assigns a src specifying the Dojo cross domain reference file, then adds the script element to the document. That’s all there is to it. You have now loaded the Dojo library into the workspace and have access to its functions.  jQuery can be done the same way.

Client Side Injection

It is important to note that using this type of code injection doesn’t change the way the code has been delivered to you.  It simply alters this one instance of the page to better suit your needs.  When you refresh the page, the library will no longer be loaded, nor any changes you may have made in the command line.  That being said, you should still be careful because you don’t know how this code might affect the client’s AJAX interactions with the server. Also, injecting a library into a page that already has that library or a different version of it loaded could have some unpredictable results.

Convenient Bookmark Injectors

Cutting and pasting the line above works, but it isn’t very convenient to have to do that every time we want to debug a page. Let’s make it easier to use by creating bookmarks for your injectors.  The following links are for a few of the more common AJAX libraries and can be dragged to your Firefox “Bookmarks Toolbar”.  From then on, you can just click it when you have a page you want to alter.  The bookmark does the injection for you!  The bookmark itself takes the command above and prepends the JavaScript protocol identifier along with wrapping the command in a console.log statement.  It also checks to see of the library has already been loaded by testing for variables associated with each library. When the injector is run, it will write to the console the name of the library loaded or an error stating the library was already loaded.  You could change the injector to use alerts instead of the console.log to attract attention.

AJAX Library
Injector Link
(Drag to Bookmark Toolbar)
Test Variable
(If it exists, the Library is loaded)
Dojo Toolkit Inject Dojo 1.4.3 dojo
Ext JS Inject Ext 3.1.0 Ext
jQuery Inject jQuery 1.4.2 jQuery
MooTools Inject MooTools 1.2.4 MooTools
Prototype Inject Prototype 1.6.1.0 Prototype

All of these links use the same code, but refer to different library sources.  These files can be found on the Google AJAX Libraries page.  You might want to keep track of it to verify you have the latest release.

Verify Your Library

Test your injector by going to this tiny page.  It is set up for fast startup and minimal HTML so you can see how the injector works.  By watching the expanded head element from the HTML tab of Firebug, you can see the injectors do their magic.  Click on the bookmark of your library and watch the new link element be created in the head.  Then easiest way to verify the library loaded is to check for the existence of a variable the library creates.  Or, if you click on the injector a second time, it will tell you it has been loaded because it checks the variable.

Let’s Test Some Code!

Mouse Watch

This piece of code is helpful to get a better idea of what your mouse actually does.  If you pass in null, the event function is attached to the window, in essence, that’s the entire page and you receive events any time the mouse moves anywhere on the page.  However, in order to minimize the avalanche of log statements, the log is only written when you change targets.  The number of events called before the log is displayed again is listed as intervening.

var prevtarget = "", eventcount = 0;
dojo.connect(null,"onmousemove", function() {
  var o = arguments[0];
  var t = o.originalTarget;
  eventcount++;
  if (t!==prevtarget) {
    console.log(t," intervening:"+eventcount," X:"+o.clientX," Y:"+o.clientY);
    prevtarget=t;
    eventcount=0;
  }
});;

Dynamic Package Loading

Here’s a cool trick from Tom Trenka that might help you in your dojo activities.  Try loading a package dynamically.  You can do it easy enough, just type in the following command:

dojo.require("dojo.fx.easing");

This is a nice trick if you need access to a package on this fly.  One thing to note though, don’t expect the library to be loaded by the very next line of code. The require puts the script element in place to load, but the browser might not load and, hence, process the package for a few hundred milliseconds. You can run the dojo.require separately and as long as you don’t refresh, then the package should be there by the time you run your next code.  Or you can add the dependent code as a function for dojo.addOnLoad, which will invoke your function once the package is loaded.

Ad Hoc Animation

We can perform a bit of of ad hoc animation to the image at the top of this blog.  Copy the following code into your browser, then scroll up to where you can see the picture “Debug Your Way”.  This code will shrink and grow the image alternately every time you run it.  Give it a go.

dojo.require("dojo.fx.easing");
dojo.addOnLoad(
  function() {
    var pic = dojo.query("#injectorimage")[0];
    var moveit = dojo.animateProperty({
      node : pic,
      duration: 1000,
      easing: dojo.fx.easing.bounceOut,
      properties : {
        height: {end : (pic.clientHeight<200?209:5)}
      }
    });
    moveit.play();
  }
);

Now that you have run it, play around with some of the values.  Make the duration longer, or shorter.  Change the height values.  Try affecting a different picture on the screen.

Conclusion

Injecting a JavaScript library into a page is pretty easy.  With the links above, it’s as simple is dragging the link to your Bookmark Toolbar, then clicking it to execute the injector.  You can start using the features of the library immediately, testing your results in Firebug.  Script injection can help give you the tools you need to understand a website.  Further, you can run your own scriptlets interactively to see how your code might affect the page.  And if you have some scriptlets you find useful, especially as they apply to this article, show us your ideas in the comments!

Tags: , , , , , , , , , , , , ,

3 Responses to “Script Injection: Debug with Your Favorite AJAX Library”

  1. [...] Script Injec­tion: Debug with Your Favorite AJAX Library | Club AJAX – Dal­las Ft. Worth Area AJ… [...]

  2. [...] Script Injection: Debug with Your Favorite AJAX Library [...]

  3. [...] few months back, I posted an article on Framework Injection where I showed how to explore a webpage through Firebug. Not having access to the utility functions [...]