How to debug a WebMethod in ASP.NET

Question

I have the following WebMethod in my fileName.asmx.cs file.

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetData(string value)
    {
        //-----
        //Respective code querying the database
        //-----
    }

Here is the respective ajax call using jQuery

getData: function (type) {        
        var response = "";
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "../GetData",
            data: '{value:' + type.toString() + '}',
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                console.log('succes', msg)
                response = msg;
            }
        });
        return response.d;
    }

I add breakpoints in my WebMethod for debugging, however it is not stepping into it. I'm trying to do this my localhost:2133, With reference some SO Answers I also tried attaching the following process but no success.

Without debugging I'm not able to solve errors, Since I already wasted a couple of hours I posted here.

Can someone guide me(couple of screenshots will be more helpful) how to debug a WebMethod in ASP.NET?

Updates 1: I also tried putting Console.WriteLine() in the WebMethod. But nothing shown in the output screen of VS2012.

Updates 2: I'm getting error will building the file, but the site is up in my localhost. Is this error is causing me trouble to debug the WebMethod? or to be clear

Only clean code (without error) can only be debugged?

Solution

I do all of my web site debugging in ASP.NET by inserting data into a debug log in my database. This method is very simple and it always works regardless of how your server was called from the client (because a page load, a call to a web service, and a callback from a page all result in different server functionality and return states).

Also, using the Chrome developer tools Network Tab is extremely useful for debugging web methods.

1. Open a page that is going to make a web request
2. Open Chrome's developer tools, go to the network tab
3. Fire the web request. Now you will see a row added to the results in the network tab with the name of the web method and the URL of it. Click on that name and you will see 5 tabs: Headers, Preview, Response, Cookies, and Timing. If your web method threw an error and you have your site setup to display the stack trace on the aspx page, then the 'Response' page will actually show you the rendered error page that was created.