西尾泰和のブログ

"TagTrace" is a bookmarklet to make easy to customize CSS.

Feature

• Highlight mouse-overed tag to show its bounds.
• Show the name, class and ID of mouse-overed tag in tooltip text.
• Show tag hierarchy from clicked tag to HTML tag in the bottom of the page.

How to use

Download following script, upload it and make bookmark to

javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://www.nishiohirokazu.org/testJS/tagTrace.js";document.body.appendChild(s)})();

Here "http://www.nishiohirokazu.org/testJS/tagTrace.js" is the position which you upload the script.

Or simply bookmark this.

The latter method use the script on my server, so it will change its behavior or stop its activity.

Known problem

• When you clicked button, link etc. its ORIGINAL function works before the tag trace. The original function must be disabled with some techniques.

Source code

colorArray=new Array();
borderArray=new Array();
currentTag = undefined;
tagTrace = undefined;

tags = document.getElementsByTagName('*');
for(i = 0; i < tags.length; i++){
	tag = tags[i];
	t = tag.tagName;
	if(tag.className != ""){
		t += "." + tag.className;
	}
	if(tag.id != ""){
		t += "#" + tag.id;
	}
	tag.title = t;
	
	tag.onmouseover=function(){
		if(currentTag){
			return;
		}
		currentTag = this;
		t=this;
		colorArray[t]=t.style.background;
		borderArray[t]=t.style.border;
		t.style.background='#DAFADA';
		t.style.border='solid';
	};
	tag.onmouseout = function(){
		t=this;
		t.style.background=colorArray[t];
		t.style.border=borderArray[t];
		currentTag = undefined;
	};
	tag.onclick = function(){
		t = this;
		if(!tagTrace){
			tagTrace = ""
		}
		tagTrace += t.title + "\n";

		var tmp = document.createElement("div");
		tmp.innerHTML = t.title + "\n";
		document.body.appendChild(tmp);

		if(!t.parentNode){
			alert(tagTrace);
			tagTrace = undefined;
		}
	};
}