Help Debugging an Ajax Server Control Client Script

I am writing an Ajax Server Control in ASP.NET C# 4.0 in VS 2010.

After writing the javascript prototype class by hand, I don't know of a way to compile and debug file. To see why my "onclick" event doesn't work.

I'm creating an Ajax Server control by inheriting from Control & IScriptControl, and trying to get an onclick event handler to work. The written control is actually a "DIV". Can someone tell me why it doesn't work?

Thanks

public class FrebbleSquare : Control, IScriptControl 
    {
.
.
.
IEnumerable<ScriptReference>开发者_C百科; IScriptControl.GetScriptReferences()
        {
            ScriptReference oRef1 = new ScriptReference("FrebbleAjaxControls.FrebbleSquare.js", this.GetType().Assembly.ToString());
            ScriptReference oRef2 = new ScriptReference("FrebbleAjaxControls.prototype.js", this.GetType().Assembly.ToString());
            ScriptReference oRef3 = new ScriptReference("FrebbleAjaxControls.scriptaculous.js", this.GetType().Assembly.ToString());
            ScriptReference oRef4 = new ScriptReference("FrebbleAjaxControls.effects.js", this.GetType().Assembly.ToString());

            return new ScriptReference[] { oRef1, oRef2, oRef3, oRef4 };
        }


        IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor("FrebblesAjax.FrebbleSquare", this.ClientID);

            return new ScriptDescriptor[] { descriptor };
        }

}


JAVASCRIPT CLIENT FILE :


Type.registerNamespace('FrebblesAjax');

FrebblesAjax.FrebbleSquare = function (element) {

    FrebblesAjax.FrebbleSquare.initializeBase(this, [element]);


}


FrebblesAjax.FrebbleSquare.prototype =
{
    initialize: function () {

        FrebblesAjax.FrebbleSquare.callBaseMethod(this, 'initialize');

        this._onclickHandler = Function.createDelegate(this, this._onClick);

        $addHandlers(this.get_element(),
                     { 'click': this._onClick,
                     },
                     this);

    },

    dispose: function () {

        $clearHandlers(this.get_element());

        FrebblesAjax.FrebbleSquare.callBaseMethod(this, 'dispose');
    },

    _onClick: function (e) {

        alert('it worked!');

    }

}


FrebblesAjax.FrebbleSquare.registerClass('FrebblesAjax.FrebbleSquare', Sys.UI.Control);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

If you can use Firefox, download the Firebug extension. When the page loads, right-click on the element that you created and select "inspect element". This way you can see all the structure, properties, and functions of the DOM as it currently exists. This is usually preferable to "view source" when you're working with JavaScript. You should be able to see which event handlers are bound and set breakpoints in the JavaScript debugger.