一个在IE里的debuger工具

在开发javascript程序的时候最讨厌的就是没有相应的调试工具。虽vs 2005已经有了可以debug javascript的功能。可是没有一个可以trace的东西。所以我就写了一个。呵呵。具体的代码如下

< html >

< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
< title > abcdefg </ title >


< script language = " javascript " >

function  DebugerClass()
... {
    var displayDiv = null;
    var outerTable = null;
    this.oldPosition = new Object();
    this.mouseDownPosition = new Object();
    this.mouseDown = false;
    this.oldSize = new Object();
    this.resizeDirection = "";
    this.resize = false;
    this.On = true;
    var createDebuger = function()
    ...{
        if(!this.On)
        ...{
            return;
        }
        displayDiv = document.createElement("div");
        displayDiv.id = "_displayDiv";
        displayDiv.style.overflow = "auto";
        displayDiv.style.width = "150";
        displayDiv.style.height = "150";
        displayDiv.style.fontSize = "9pt";
        displayDiv.style.color = "red";
        displayDiv.style.backgroundColor = 'white';

        
        
        outerTable = document.createElement("table");
        outerTable.style.position = "absolute";
        outerTable.id = "_outerTable"
        outerTable.style.borderCollapse = 'collapse';
        outerTable.style.filter = "alpha(Opacity=50)";
        outerTable.style.top = 0;
        outerTable.style.left = 0;
        outerTable.style.border = "1px solid gray";
        outerTable.style.fontSize = "9pt";
        outerTable.style.color = "white";
        outerTable.attachEvent("onmousedown",onMouseDown);
        outerTable.attachEvent("onmouseup",onMouseUp);
        outerTable.attachEvent("onmousemove",onMouseMove);
        
        outerTable._GetRect = function()
        ...{
            var left = 0;
            var top = 0;
            for(var selfAndParent = this;selfAndParent != document.body; selfAndParent = selfAndParent.parentElement)
            ...{
                left += selfAndParent.offsetLeft;
                top += selfAndParent.offsetTop;
            }
            var returnValue =  
            ...{
                Left:left, 
                   Top:top, Width:this.offsetWidth,
                 Height:this.offsetHeight
            };
            returnValue.Contain = function(x,y)
            ...{
                if(x >= this.Left && x <= this.Left + this.Width)
                ...{
                    if(y >= this.Top && y <= this.Top + this.Height)
                    ...{
                        return true;
                    }
                }
                return false;
            }
            
            return returnValue;
        }
                
        outerTable._GetBorderPosition = function (x,y)
        ...{
            //NEWS
            var str = "";
            var CONST_BORDER = 3;
            var rect = this._GetRect();
            if(rect.Contain(x,y))
            ...{
                    
                if(y < rect.Top + CONST_BORDER)
                ...{
                    str += "N";
                }
                else if(y > rect.Top + rect.Height - CONST_BORDER)
                ...{
                    str += "S";
                }
                
                if(x < rect.Left + CONST_BORDER)
                ...{
                    str += "W";
                }
                else if(x > rect.Left + rect.Width - CONST_BORDER)
                ...{
                    str += "E";
                }
            }
            return str;
        }
        
        outerTable._GetCursorStyle = function (str)
        ...{
            if(str == null || str == "")
            ...{
                return 'auto';
            }
            else
            ...{
                return str + "-resize";
            }
        }
        
        
        
        var rowOne = outerTable.insertRow();
        rowOne.id = "_moveTitle";
        rowOne.innerData = this;
        var cellOne = rowOne.insertCell();
        rowOne.style.backgroundColor = "#808080";
        rowOne.style.textAlign = 'center';
        rowOne.style.cursor = 'move';
        cellOne.innerHTML = "::DEBUGER::";

        var rowTwo = outerTable.insertRow();
        var cellTwo = rowTwo.insertCell();
        cellTwo.style.textAlign = 'right';
        var anchorTag = document.createElement("a");
        anchorTag.innerHTML= 'clear';
        anchorTag.onclick = clear;
        anchorTag.href = "#";
        cellTwo.appendChild(anchorTag);
        var rowThree = outerTable.insertRow();
        var cellThree = rowThree.insertCell();
        cellThree.appendChild(displayDiv);
        
        
        
        document.body.appendChild(outerTable);
    }
    
    
    
    var onMouseDown = function()
    ...{
        var element = document.getElementById("_moveTitle");
        var outerTable = document.getElementById('_outerTable');
        var displayDiv = document.getElementById('_displayDiv');
        
        if(element.innerData == null)
        ...{
            return;
        }
        if(outerTable.style.cursor == 'auto')
        ...{
            for(var tag = event.srcElement; tag != document.body; tag = tag.parentNode)
            ...{
                if(tag == element)//inside the _moveTitle....
                ...{
                    element.innerData.mouseDownPosition.x = new Number(event.clientX + document.body.scrollLeft);
                    element.innerData.mouseDownPosition.y = new Number(event.clientY + document.body.scrollTop);
                    element.innerData.oldPosition.x = new Number((outerTable.style.left).replace(new RegExp("[a-zA-Z]*","g"),""));
                    element.innerData.oldPosition.y = new Number((outerTable.style.top).replace(new RegExp("[a-zA-Z]*","g"),""));
                    element.innerData.mouseDown = true;
                    element.setCapture();
                }
            }
        }
        else
        ...{
            element.innerData.mouseDownPosition.x = new Number(event.clientX + document.body.scrollLeft);
            element.innerData.mouseDownPosition.y = new Number(event.clientY + document.body.scrollTop);
            element.innerData.oldSize.width = new Number((_displayDiv.style.width).replace(new RegExp("[a-zA-Z]*","g"),""));
            element.innerData.oldSize.height = new Number((_displayDiv.style.height).replace(new RegExp("[a-zA-Z]*","g"),""));
            element.innerData.oldPosition.x = new Number((outerTable.style.left).replace(new RegExp("[a-zA-Z]*","g"),""));
            element.innerData.oldPosition.y = new Number((outerTable.style.top).replace(new RegExp("[a-zA-Z]*","g"),""));
            element.innerData.resize = true;
            element.setCapture();
        }
    }
    
    var onMouseUp = function()
    ...{
        
        var element =  document.getElementById("_moveTitle");
        var outerTable = document.getElementById("_outerTable");
        
        if(element.innerData == null)
        ...{
            return;
        }
        if(element.innerData.mouseDown)
        ...{
            element.innerData.mouseDown = false;
        }
        if(element.innerData.resize)
        ...{
            element.innerData.resize = false;
            outerTable.style.cursor = 'auto';
        }
        element.releaseCapture();
       
    }
    
    var onMouseMove = function()
    ...{
        var element = document.getElementById("_moveTitle");
        var outerTable = document.getElementById("_outerTable");
        var displayDiv = document.getElementById("_displayDiv");
        if(element.innerData == null)
        ...{
            return;
        }
        if(element.innerData.mouseDown)
        ...{
            var moveX = document.body.scrollLeft + event.clientX - element.innerData.mouseDownPosition.x;
            var moveY = document.body.scrollTop  + event.clientY - element.innerData.mouseDownPosition.y;
            outerTable.style.left = element.innerData.oldPosition.x + moveX;
            outerTable.style.top = element.innerData.oldPosition.y + moveY;
        }
        else if(element.innerData.resize)
        ...{
            var MINSIZE = 50;
            var cursorStyle = element.innerData.resizeDirection;
           
            var moveX = document.body.scrollLeft + event.clientX - element.innerData.mouseDownPosition.x;
            var moveY = document.body.scrollTop  + event.clientY - element.innerData.mouseDownPosition.y;
            if(cursorStyle.indexOf("N") > -1)//contain N
            ...{
                var newHeight = Math.max(element.innerData.oldSize.height - moveY,MINSIZE);
                var oldHeight = element.innerData.oldSize.height
                displayDiv.style.height = newHeight;
                outerTable.style.top = element.innerData.oldPosition.y + oldHeight - newHeight;
                
            }
            if(cursorStyle.indexOf("S") > -1)
            ...{
                displayDiv.style.height = Math.max(element.innerData.oldSize.height + moveY,MINSIZE);
            }
            if(cursorStyle.indexOf("W") > -1)
            ...{
                var newWidth = Math.max(element.innerData.oldSize.width - moveX,MINSIZE);
                var oldWidth = element.innerData.oldSize.width;
                displayDiv.style.width = newWidth;    
                outerTable.style.left = element.innerData.oldPosition.x + oldWidth - newWidth;
                          
            }
            if(cursorStyle.indexOf("E") > -1)
            ...{
                displayDiv.style.width = Math.max(element.innerData.oldSize.width + moveX,MINSIZE);
            }
        }
        else//move in outerTable
        ...{
            
            var x = event.clientX + document.body.scrollLeft;
            var y = event.clientY + document.body.scrollTop;
            var position = outerTable._GetBorderPosition(x,y);
            element.innerData.resizeDirection = position;
            outerTable.style.cursor = outerTable._GetCursorStyle(position);
            //element.innerData.resizeDirection = ""
        }
         
    }
        
    
    
    var clear = function()
    ...{
        var displayDiv = document.getElementById("_displayDiv");
        displayDiv.innerHTML = "";
    }
    
    this.Write = function(str)
    ...{
        if(!this.On)
        ...{
            return;
        }
        if(displayDiv == null)
        ...{
            createDebuger();
        }
        displayDiv.innerHTML += str;
        displayDiv.scrollTop = displayDiv.scrollHeight;
    }
    this.WriteLine = function(str)
    ...{
        if(!this.On)
        ...{
            return;
        }
        if(displayDiv == null)
        ...{
            createDebuger.call(this);//set the this
        }
        displayDiv.innerHTML += str + '<br/>';
        displayDiv.scrollTop = displayDiv.scrollHeight;
    }
}

</ script >

< script >
var  Debuger  =   new  DebugerClass();
function  OnDrag()
... {
    if(CanDrop(event.srcElement))
    ...{
       Debuger.WriteLine("OnDrag Begin"+event.srcElement.innerHTML);
       // return true;
    }
}

function  OnDragStart()
... {
        
        //var Obj = new Object();
        //Obj.text = "hello";
        var a = event.dataTransfer.setData("Text","abcde");

}
function  OnDragEnd()
... {
    if(CanDrop(event.srcElement))
    ...{
        Debuger.WriteLine("Drag End"+event.srcElement.innerHTML);
        return false;
    }
}
function  OnDragEnter()
... {
    if(CanDrop(event.srcElement))
    ...{
        //Debuger.WriteLine("Drag Enter"+event.srcElement.innerHTML);
        event.returnValue = false;
    }
}
function  OnDragOver()
... {
    if(CanDrop(event.srcElement))
    ...{
        //Debuger.WriteLine("Drag Over"+event.srcElement.innerHTML);
        event.returnValue = false;
    }
}

function  OnDrop()
... {
    if(CanDrop(event.srcElement))
    ...{
        var obj = event.dataTransfer.getData("Text");
        Debuger.WriteLine("Drop"+event.srcElement.innerHTML + "obj: " + obj);   
        //event.returnValue = true;
    }
}

function  CanDrop(control)
... {
    if(control.dropable == 'true')
    ...{
        return true;
    }
    return false;
}
function  OnSelectStart()
... {
    for (var e = event.srcElement; e != document.body; e = e.parentNode)
    ...{
        if (e.getAttribute('dragable') == 'true')
        ...{
            e.dragDrop();
            return false;
        }
    }
    
}

function  load()
... {
    var debuger = new DebugerClass();
    debuger.WriteLine("aaaaaa");
    debuger.WriteLine("cccc");
}

window.attachEvent( " onload " ,load);
</ script >

</ head >

< body >
</ body >

</ html >