/jQueryLog

jQuery plugin to allow for selector chain debug

Primary LanguageJavaScript

How to use it:
Simply place the jquery.log.js bellow your jquery file. And call $.log(true) or $.log(false) whenever you want to activate/deactivate the logging system.

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.log.js"></script>		

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

I'm trying to do a "smart" logging system. Meaning that I want this to simplfy my life when developing javascript with jQuery, not complicate it. So I've tried to keep it simple.



$.log(true); // starts the logging system
	$("#foo").parents(".t1").next().prev().parent().find(".t2:last .t4:last").text("test");
$.log(false); // ends the logging system

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

The results will be something like this: (the objects are clickable inside the console)


$('#foo'): [<div id="foo" class="t3"></div>]
    parents('.t1'): [ <div class="t1">…</div> ]
        next(undefined): [ <div class="t1">…</div> ]
            prev(undefined): [ <div class="t1">…</div> ]
                parent(undefined): [ <body>…</body> ]
                    find('.t2:last .t4:last'): [<div class="t4">teste</div>]

					
					
This has been tested against the official jQuery unit tests and it currently passes all except the "(6.3) core no conflict $" (which means if you use some other lib that overwrites $, it won't work with jquery log). I'll address this issue later, but most users shouldn't be affected by it.

I've had a discussion with Prinzhorn when I released the first version of this and meanwhile he made his own, which is also cool, you can find it at: https://github.com/Prinzhorn/jquery-inlog/ 


------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
The jquery unit tests output the following supported functions:
add('#ap'); 
	add('#en'); 
	add('#sap'); 
	add('#select4 > [clickable object]disabled'); 
	add('#sndp'); 
	add('#unwrap2 span;first'); 
	add('<div/>'); 
	add('<p id='x1'>xxx</p>'); 
	add('<p id='x2'>xxx</p>'); 
	add([clickable object]);
	add(undefined); 
	children('#en, #sap'); 
	children(';first'); 
	children(';has(code)'); 
	children('div'); 
	children('span'); 
	children(undefined); 
	contents(undefined); 
	contains( [clickable object] , this );
	contains( this, [clickable object] );
	filter('#ap, #sndp'); 
	filter('#ap,#sndp'); 
	filter('#posp a;eq(0)'); 
	filter('#posp a;eq(9)'); 
	filter('#posp a;even'); 
	filter('#posp a;first'); 
	filter('#posp a;gt(0)'); 
	filter('#posp a;last'); 
	filter('#posp a;last-child'); 
	filter('#posp a;lt(1)'); 
	filter('#posp a;lt(5)'); 
	filter('#posp a;odd'); 
	filter('#posp em;eq(0)'); 
	filter('#posp em;first'); 
	filter('#posp;eq(2)'); 
	filter('#posp;first'); 
	filter(''); 
	filter(';checked'); 
	filter(';hidden'); 
	filter('[clickable object]name'); 
	filter('b'); 
	filter('div'); 
	filter('input'); 
	filter('input,select'); 
	filter('span'); 
	filter(0); 
	filter([clickable object]); 
	filter(function () {
	filter(function () { return !jQuery("a", this).length }); 
	filter(function (){
	filter(function (i, elem) { return !jQuery("a", elem).length }); 
	filter(null); 
	filter(undefined); 
	find(' div.user'); 
	find('#absolute-1'); 
	find('#ap *'); 
	find('#ap > a'); 
	find('#ap a'); 
	find('#ap'); 
	find('#ap, #sndp, .result'); 
	find('#appendSelect1, #appendSelect2'); 
	find('#area1, #hidden1'); 
	find('#bar'); 
	find('#cssFunctionTest div'); 
	find('#dl;visible, #qunit-fixture;visible, #foo;visible'); 
	find('#en, #sndp'); 
	find('#fadein div'); 
	find('#fadeout div'); 
	find('#fadeto div'); 
	find('#fadetogglein div'); 
	find('#fadetoggleout div'); 
	find('#firstp a;first'); 
	find('#firstp,#first'); 
	find('#foo p'); 
	find('#foo select'); 
	find('#foo span'); 
	find('#foo'); 
	find('#form ;input'); 
	find('#form ;radio'); 
	find('#form ;text'); 
	find('#form input'); 
	find('#form input;first'); 
	find('#form option'); 
	find('#form select'); 
	find('#form, #testForm'); 
	find('#get'); 
	find('#groups, #ap'); 
	find('#hide div'); 
	find('#html5email, #html5number'); 
	find('#label-for, #hidden1'); 
	find('#listWithTabIndex li'); 
	find('#listWithTabIndex li.test6997'); 
	find('#mark, #first'); 
	find('#moretests div'); 
	find('#moretests div;last'); 
	find('#myform'); 
	find('#nonnodes > i'); 
	find('#nothiddendiv div'); 
	find('#nothiddendiv span'); 
	find('#nothiddendiv, #nothiddendivchild'); 
	find('#onandoff b'); 
	find('#posp .firsta'); 
	find('#posp .seconda'); 
	find('#posp a em;eq(2)'); 
	find('#posp a em;last'); 
	find('#posp a;eq(0) em'); 
	find('#posp a;eq(0)'); 
	find('#posp a;eq(9)'); 
	find('#posp a;even'); 
	find('#posp a;first em'); 
	find('#posp a;first'); 
	find('#posp a;gt(0)'); 
	find('#posp a;gt(1) em'); 
	find('#posp a;last'); 
	find('#posp a;lt(1) em'); 
	find('#posp a;lt(1)'); 
	find('#posp a;lt(5)'); 
	find('#posp a;odd'); 
	find('#posp em'); 
	find('#posp em;eq(0)'); 
	find('#posp em;first'); 
	find('#posp;eq(2)'); 
	find('#posp;first'); 
	find('#post'); 
	find('#prependSelect2, #prependSelect1'); 
	find('#qunit-fixture > div'); 
	find('#qunit-fixture > p#ap > a'); 
	find('#qunit-fixture div'); 
	find('#qunit-fixture div;last'); 
	find('#qunit-fixture p'); 
	find('#qunit-fixture select'); 
	find('#qunit-fixture table;first'); 
	find('#qunit-fixture'); 
	find('#qunit-fixture, #header'); 
	find('#qunit-fixture, #moretests'); 
	find('#radio1,#radio2,#check1,#check2'); 
	find('#sap>form'); 
	find('#select1 option;last'); 
	find('#select1 option;not(;first)'); 
	find('#select4 > [clickable object]disabled'); 
	find('#select4 optgroup'); 
	find('#show div'); 
	find('#show-tests span'); 
	find('#slidedown div'); 
	find('#slidetogglein div'); 
	find('#slidetoggleout div'); 
	find('#slideup div'); 
	find('#sndp, #en'); 
	find('#sndp, #first'); 
	find('#svg-by-id, .svg-by-class'); 
	find('#t2037 .hidden'); 
	find('#table caption'); 
	find('#table colgroup col'); 
	find('#table colgroup'); 
	find('#table td;visible'); 
	find('#testForm ;input'); 
	find('#testForm button[clickable object]name=sub4'); 
	find('#testForm input[clickable object]name=sub1'); 
	find('#testForm'); 
	find('#text1, #hidden1'); 
	find('#togglein div'); 
	find('#toggleout div'); 
	find('#unwrap > span'); 
	find('#unwrap > span.unwrap3'); 
	find('#unwrap span'); 
	find('#unwrap1 > span, #unwrap2 > span'); 
	find('#unwrap1 span'); 
	find('#unwrap2 span;first'); 
	find('#unwrap3 > span'); 
	find('#unwrap3 span'); 
	find('#yahoo, #first'); 
	find('*'); 
	find('.blog'); 
	find('.blog.link'); 
	find('.blogTest'); 
	find('.devo'); 
	find('.devo-like'); 
	find('.link'); 
	find('.replacewith'); 
	find('.test8070'); 
	find(';checkbox;first'); 
	find(';checkbox;last'); 
	find(';radio;first'); 
	find(';radio;last'); 
	find('> #foo > p'); 
	find('> #foo, > #moretests'); 
	find('> div'); 
	find('[clickable object]lang="de"'); 
	find('[clickable object]lang="en"'); 
	find('[clickable object]type="radio"'); 
	find('[clickable object]type="text"'); 
	find('a'); 
	find('a.test6997'); 
	find('a.test;first'); 
	find('a;first'); 
	find('article'); 
	find('asdf'); 
	find('aside'); 
	find('b'); 
	find('blah'); 
	find('body > span.unwrap'); 
	find('body'); 
	find('body, #nothiddendivchild'); 
	find('body;first div;last'); 
	find('button'); 
	find('calculation'); 
	find('code'); 
	find('div p'); 
	find('div#nothiddendiv'); 
	find('div#nothiddendivchild'); 
	find('div'); 
	find('div.hidden'); 
	find('div;eq(1)'); 
	find('div;first'); 
	find('div;has(p)'); 
	find('div;has(ul)'); 
	find('div;last'); 
	find('div[clickable object]id=replaceWith'); 
	find('em'); 
	find('form input[clickable object]name=radiotest'); 
	find('form'); 
	find('form;last'); 
	find('head'); 
	find('html'); 
	find('html, body'); 
	find('html, body, #qunit-fixture'); 
	find('html>*'); 
	find('input'); 
	find('input;checked'); 
	find('input;disabled'); 
	find('input;radio[clickable object]name='R1''); 
	find('input[clickable object]name=arrayTest'); 
	find('input[clickable object]type='radio''); 
	find('jsconf'); 
	find('li'); 
	find('location'); 
	find('locations'); 
	find('math'); 
	find('option'); 
	find('option;first-child'); 
	find('option;last-child'); 
	find('option;selected'); 
	find('p'); 
	find('pre'); 
	find('properties'); 
	find('result'); 
	find('script'); 
	find('script[clickable object]src*="data\/test\.js"'); 
	find('section'); 
	find('select[clickable object]name='S1''); 
	find('span#liveSpan1 a'); 
	find('span#liveSpan1'); 
	find('span#liveSpan2 a'); 
	find('span#liveSpan2'); 
	find('span'); 
	find('spanx'); 
	find('tab'); 
	find('table'); 
	find('table;last'); 
	find('tbody'); 
	find('td'); 
	find('td;first'); 
	find('textarea'); 
	find('th'); 
	find('thead'); 
	find('thing'); 
	find('tr'); 
	find('u'); 
	find('ul'); 
	find([clickable object]);
	has('#sndp'); 
	has('#sndp, #first'); 
	has([clickable object]);
	has(undefined); 
	index('#form ;radio'); 
	index('#form ;text'); 
	index([clickable object]);
	index(undefined); 
	is('#ap'); 
	is('#area1'); 
	is('#area1, #radio1'); 
	is('#button'); 
	is('#empty'); 
	is('#firstp a;first'); 
	is('#html'); 
	is('#html, #body'); 
	is('#nothiddendiv div'); 
	is('#nothiddendiv'); 
	is('#nothiddendivchild'); 
	is('#posp a em;eq(2)'); 
	is('#posp a em;last'); 
	is('#posp a;eq(0) em'); 
	is('#posp a;eq(0)'); 
	is('#posp a;eq(9)'); 
	is('#posp a;even'); 
	is('#posp a;first em'); 
	is('#posp a;first'); 
	is('#posp a;gt(0)'); 
	is('#posp a;gt(1) em'); 
	is('#posp a;last'); 
	is('#posp a;lt(1) em'); 
	is('#posp a;lt(1)'); 
	is('#posp a;lt(5)'); 
	is('#posp a;odd'); 
	is('#posp em;eq(0)'); 
	is('#posp em;first'); 
	is('#posp;eq(2)'); 
	is('#posp;first'); 
	is('#select1 option;not(;first)'); 
	is('#testForm input[clickable object]name=sub1'); 
	is('#text2'); 
	is(''); 
	is('.blog'); 
	is('.blog.link'); 
	is('.blogTest'); 
	is('.class1'); 
	is('.class2'); 
	is('.class4'); 
	is('.foo'); 
	is('.link'); 
	is('.red'); 
	is('.test'); 
	is('.test,.bar,.foo'); 
	is('.testA'); 
	is('.testA.testB'); 
	is('.testA.testC'); 
	is('.testB'); 
	is('.testC'); 
	is('.testD.testE'); 
	is('.wrapper'); 
	is(';checked'); 
	is(';disabled'); 
	is(';has(p)'); 
	is(';has(p);has(a);has(code)'); 
	is(';has(p);has(a);has(code);has(ol)'); 
	is(';has(ul)'); 
	is(';hidden'); 
	is(';visible'); 
	is('[clickable object]class=foo'); 
	is('[clickable object]lang="de" , [clickable object]lang="en"'); 
	is('[clickable object]lang="de"'); 
	is('[clickable object]lang="de",[clickable object]lang="en"'); 
	is('[clickable object]lang="en" , [clickable object]lang="de"'); 
	is('[clickable object]lang="en"'); 
	is('[clickable object]lang="en",[clickable object]lang="de"'); 
	is('[clickable object]type="radio"'); 
	is('[clickable object]type="text"'); 
	is('a'); 
	is('body'); 
	is('div'); 
	is('form'); 
	is('html'); 
	is('label'); 
	is('label, #search'); 
	is('ol'); 
	is('select[clickable object]name='S1''); 
	is('span#liveSpan1 a'); 
	is('span#liveSpan2 a'); 
	is('span'); 
	is('span,#html'); 
	is(0); 
	is([clickable object]
	is([clickable object]); 
	is(null); 
	is(undefined); 
	next('div'); 
	next('div, p'); 
	next('p'); 
	next(undefined); 
	nextAll('input'); 
	nextAll('input,select'); 
	nextAll(undefined); 
	nextUntil('#area1'); 
	nextUntil('#area1, #radio1'); 
	nextUntil('#text2'); 
	nextUntil('.foo'); 
	nextUntil('[clickable object]class=foo'); 
	nextUntil(undefined); 
	not('#ap, #sndp, .result'); 
	not('#google'); 
	not('#mark, code'); 
	not(''); 
	not('.result'); 
	not(';first'); 
	not(';last'); 
	not('button'); 
	not('code'); 
	not('code, #mark'); 
	not('div'); 
	not('input'); 
	not('option.emptyopt;contains('Nothing'),[clickable object]selected,[clickable object]value='1''); 
	not(0); 
	not([clickable object]);
	not(function () { return jQuery("a", this).length }); 
	not(null); 
	not(undefined); 
	parent('aside'); 
	parent('body'); 
	parent('div'); 
	parent('div, p'); 
	parent('p'); 
	parent(undefined); 
	parents('div'); 
	parents('p'); 
	parents('p, div'); 
	parents(undefined); 
	parentsUntil('#ap'); 
	parentsUntil('#html'); 
	parentsUntil('#html, #body'); 
	parentsUntil('.foo'); 
	parentsUntil(undefined); 
	prev('div'); 
	prev('p'); 
	prev('p, div'); 
	prev(undefined); 
	prevAll('input'); 
	prevAll('input,select'); 
	prevAll(undefined); 
	prevUntil('#button'); 
	prevUntil('.foo'); 
	prevUntil('label'); 
	prevUntil('label, #search'); 
	prevUntil(undefined); 
	siblings(';has(a)'); 
	siblings(';has(code)'); 
	siblings('form, b'); 
	siblings('option[clickable object]data-attr'); 
	siblings(undefined); 
```