Step Debugging jQuery Selectors

Posted July 16, 2009 at 11:00 AM by Ben Nadel

Tags: Javascript / DHTML

NOTE: This blog post was inspired by a post that Ray Camden did a while back about an AIR-based jQuery selector tester.

I was talking to some people a while back about debugging jQuery selectors. To me, the hardest part about debugging jQuery selectors is that when they are not returning the set of nodes you want, or nodes at all, its hard to tell where you went wrong. As such, I thought it would be really cool to build a little jQuery selector test harness that would step through the jQuery selector search path, one step at a time, highlighting each intermediary set of nodes in the process. This way, you can see where in the path you went wrong.

 
 
 
 
 
 
 
 
 
 

As you can see, the final nodes that would be returned by your target jQuery selector are highlighted in Gold. If your jQuery selector doesn't match any nodes, all you will see are shades of gray.

Since this blog post isn't so much about the code, but rather the overall functionality, I'll just display the code below without going in depth into what it does. I wrote the code in haste and am not going to stand by its "cleanliness".

The HTML Page:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>Untitled</title>
  • <script src="jquery-1.3.2.js" type="text/javascript"></script>
  • <script src="trace.js" type="text/javascript"></script>
  • <script type="text/javascript">
  •  
  • $(
  • function(){
  • var jForm = $( "#tester" );
  • var jText = jForm.find( ":text" );
  • var jButton = jForm.find( ":button" );
  • var objTester = new SelectorTester( 1000 );
  •  
  • // Hook up form submit.
  • jForm.submit(
  • function(){
  • // Run test.
  • objTester.Test( jText.val() );
  •  
  • // Kill form submission.
  • return( false );
  • }
  • );
  • }
  • );
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <form id="tester">
  • <p>
  • <input type="text" size="40" />
  • <input type="submit" value="Run Test" />
  • </p>
  • </form>
  •  
  •  
  • <h1>
  • jQuery Selector Testing
  • </h1>
  •  
  • <p>
  • This is the jQuery selector tester. The way it works is
  • that you enter your selector in the above form and hit
  • <strong>"Run Test"</strong>. The tester then parses your
  • selector into its sub-parts and runs each sub-part
  • individually.
  • </p>
  •  
  • <p>
  • The beauty of this is that it highlights each intermediary
  • node collection and then <em>pauses</em> before moving
  • onto the next intermediary collection. This gives you the
  • ability to trace the route of the selector.
  • </p>
  •  
  • <div>
  •  
  • <p>
  • I am in a <span>DIV > P</span>
  • </p>
  •  
  • <p>
  • I am in a DIV > P
  • </p>
  •  
  • </div>
  •  
  • </body>
  • </html>

The Javascript code behind:

  • // I am the base class for the testing.
  • function SelectorTester( intPause ){
  • this.OriginalSelector = "";
  • this.Pause = (intPause || 1000);
  • this.Selectors = [];
  • this.Timeout = null;
  • }
  •  
  •  
  • // I clean the selectore before parsing.
  • SelectorTester.prototype.CleanSelector = function( strSelector ){
  • // Trim selector.
  • strSelector = $.trim( strSelector );
  •  
  • // Make sure we only ever have single spaces.
  • strSelector = strSelector.replace(
  • new RegExp( " +", "g" ),
  • " "
  • );
  •  
  • // Hook up the child selector with next selector.
  • strSelector = strSelector.replace(
  • new RegExp( "> +", "g" ),
  • ">"
  • );
  •  
  • // Return cleaned selector.
  • return( strSelector );
  • }
  •  
  •  
  • // I parse the selector into selectors classes.
  • SelectorTester.prototype.ParseSelector = function( strSelector ){
  • var arrSelectors = [];
  •  
  • // Clean and break the selector into sub-selectors.
  • var arrSubSelectors = this.GetSubSelectors(
  • this.CleanSelector( strSelector )
  • );
  •  
  • // For each sub-selector, we want to create a selector.
  • $.each(
  • arrSubSelectors,
  • function( intI, strSelector ){
  • arrSelectors.push(
  • new Selector( strSelector )
  • );
  • }
  • );
  •  
  • // Return the collection of selectors.
  • return( arrSelectors );
  • }
  •  
  •  
  • // I break up the original selector into sub-selectors.
  • SelectorTester.prototype.GetSubSelectors = function( strSelector ){
  • var arrSubSelectors = this.OriginalSelector.match(
  • new RegExp(
  • "[^\\[,]+(\\[[^\\]]+\\][^\\[,]*)*",
  • "gi"
  • )
  • );
  •  
  • // Loop over each to trim.
  • return(
  • $.map(
  • arrSubSelectors,
  • function( strSelector, intI ){
  • return( $.trim( strSelector ) );
  • }
  • )
  • );
  • }
  •  
  •  
  • // I reset the selector tester.
  • SelectorTester.prototype.Reset = function(){
  • // Clear any existing testing timeout.
  • clearTimeout( this.Timeout )
  •  
  • // Clear the original selector.
  • this.OriginalSelector = "";
  •  
  • // Destroy each selector.
  • $.each(
  • this.Selectors,
  • function( intI, objSelector ){
  • objSelector.Destroy();
  • }
  • );
  •  
  • // Clear selectors.
  • this.Selectors = [];
  • }
  •  
  •  
  • // I run the tests.
  • SelectorTester.prototype.Test = function( strSelector ){
  • var objSelf = this;
  •  
  • // Reset any existing test.
  • this.Reset();
  •  
  • // Store the selector and parse it.
  • this.OriginalSelector = this.CleanSelector( strSelector );
  • this.Selectors = this.ParseSelector( this.OriginalSelector );
  •  
  •  
  • // Define a method that will test each intermediary
  • // collection of nodes.
  • function PerformTest(){
  • var blnKeepTesting = false;
  •  
  • // Loop over each tester.
  • for (var i = 0 ; i < objSelf.Selectors.length ; i++){
  •  
  • blnKeepTesting = (
  • objSelf.Selectors[ i ].ShowNextSelector() ||
  • blnKeepTesting
  • );
  •  
  • }
  •  
  • // Check to see if we should perform another test.
  • if (blnKeepTesting){
  •  
  • // Launch test again shortly.
  • objSelf.Timeout = setTimeout(
  • PerformTest,
  • objSelf.Pause
  • );
  •  
  • }
  • }
  •  
  • // Start test harness.
  • PerformTest();
  • }
  •  
  •  
  • // -------------------------------------------------------- //
  • // -------------------------------------------------------- //
  •  
  •  
  • // I am a class for individual testing.
  • function Selector( strSelector ){
  • this.OriginalSelector = strSelector;
  • this.Parts = this.ParseSelector( strSelector );
  • this.Colors = [ "#F0F0F0", "#D0D0D0", "#B0B0B0", "#909090", "#707070", "#505050" ];
  • this.Depth = 0;
  • this.Nodes = $( "body" );
  • this.ResetNodes = $( [] );
  • }
  •  
  •  
  • // I parse the selectir into parts.
  • Selector.prototype.ParseSelector = function( strSelector ){
  • return(
  • strSelector.match(
  • new RegExp(
  • "[^\\s\\[]+(\\[[^\\]]+\\][^\\s\\[]*)*",
  • "gi"
  • )
  • )
  • );
  • }
  •  
  •  
  • // I show the next selector.
  • Selector.prototype.ShowNextSelector = function(){
  • if (this.Depth >= this.Parts.length){
  • return( false );
  • }
  •  
  • // Get the next set of nodes and colorize them.
  • this.Nodes = this.Nodes
  • .find( this.Parts[ this.Depth ] )
  • .css( "background-color", this.Colors[ this.Depth ] )
  • ;
  •  
  • // Build up the reset nodes collection.
  • this.ResetNodes = this.ResetNodes.add( this.Nodes );
  •  
  • // Increase the depth.
  • this.Depth++;
  •  
  • // Check to see if we have any more nodes to search.
  • // If not, we want to highlight this ndoe in gold
  • // to signify its a final node.
  • if (this.Depth >= this.Parts.length){
  • this.Nodes.css( "background-color", "gold" )
  • }
  •  
  • // Return true/false for next selectors.
  • return( this.Depth < this.Parts.length );
  • }
  •  
  •  
  • // I reset the select (take away background coloring).
  • Selector.prototype.Destroy = function(){
  • // Clear node colors.
  • this.ResetNodes.css( "background-color", "transparent" );
  • }



Reader Comments

Shayne Sweeney
Jul 16, 2009 at 10:16 PM // reply »
10 Comments
11 Points

I find using the Firebug console immensely useful for writing and debugging jQuery selectors.


Ben Nadel
Jul 17, 2009 at 7:50 AM // reply »
11,246 Comments
75,418 Points

@Shayne,

Yeah, FireBug is the bomb!!


Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:
Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
Brandon
May 23, 2013 at 9:52 PM
Preventing Links In Standalone iPhone Applications From Opening In Mobile Safari
@Muhmmadibn Did you figure out a solution to launching PDFs? I am running into the same issues myself. There is no way to close the PDF or go back once you launch it. Thanks in advance! ... read »
Dr Amadi
May 23, 2013 at 6:06 PM
The Girl Who Broke My Heart, And Made Me A Better Person
Good day,ladies and gentle men, my name is Dr AMADI the great spell caster in Africa, i have help so many people for different kind of problems,who say there is no solution to problems on earth, that ... read »
Ben Nadel
May 23, 2013 at 4:26 PM
ColdFusion QueryAppend( qOne, qTwo )
@Heather, Glad people are still getting value out of this! ... read »
Ben Nadel
May 23, 2013 at 3:49 PM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@WebManWalking, I meant the code at the bottom (not the video). I did try to experiment with an intermediary variable, like: value = users.id[ i ]; arrayContains( userIDs, value ); ... but t ... read »
WebManWalking
May 23, 2013 at 11:06 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@Ben, Are you talking about As Number: YES As String: YES As Java: YES? If so, that's with 3 different ways of referencing the constant 1, not users.id[1]. Query object references(*) are what seem ... read »
Ben Nadel
May 23, 2013 at 9:55 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@Dan, According to the CF Admin, I'm running Java "1.6.0_45". As far as the DB column, in the database it's an INT. I'll see if I can dig into what CF sees it as. @WebManWalking, But h ... read »
WebManWalking
May 23, 2013 at 9:49 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@Ben, I think the problem is that we're used to loose typing in ColdFusion, like JavaScript. If a value is a number but it's needed in an expression to be a string, noooo problem. I've encountered ... read »
Heather
May 23, 2013 at 9:47 AM
ColdFusion QueryAppend( qOne, qTwo )
You rock! Thank you, thank you, thank you!!! ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools