1

I want to be able to debug the client-side Javascript generated by WebForms for, say, a button click.

This should be trivial, but I can't find a simple way to do it.

The generated HTML looks like this:

<input type="submit" name="ctl00$Content$btnUpdate" value="Save" 
    id="ctl00_Content_btnUpdate" class="StandardButton"
    onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(
                    "ctl00$Content$btnUpdate", "", true, "", "", false, false))" 
    >

...and it's generated from this .aspx snippet:

<AGILE:Button ID="btnUpdate" runat="server" CssClass="StandardButton" Text="@Save@"
                    OnClick="btnUpdate_Click"/>

What's the fastest way to attach a debugger to the function WebForm_DoPostBackWithOptions(...) in Visual Studio (2013 FWIW)?

What about in Chrome Dev Tools?

What I've tried:

(see my answer below)

Cristian Diaconescu
  • 34,633
  • 32
  • 143
  • 233

1 Answers1

1

For Chrome Dev Tools:

  1. Ctrl-Shift-C to get in 'find-me-this-DOM-element` mode and click the button.
  2. In the Dev tools, look at what the onclick event points to (see example in the question), copy the function name.
  3. Ctrl-Shift-F for 'find-me-everything-everywhere' mode, and paste the function name (aka WebForm_DoPostBackWithOptions). <Enter>.
  4. Set breakpoint in Chrome Dev tools and go from there.

For Visual Studio

I figured out (from the above steps for Chrome) that the generated javascript lives in a file named WebResource.axd?d=<random> that's generated when the page is accessed.

Update

When using Internet Explorer as the client browser, there's better integration with Visual Studio.

In VS pre-2012, there was, apparently, a Script Editor window under Debug -> Windows (available only when debugging, while attached to IE).

In VS 2012/2013, this was replaced by a node named Script Documents in the Solution Explorer window. This follows the page currently open in the br

enter image description here

It only appears while debugging with IE as the selected browser.

enter image description here

Armed with the knowledge from the Chrome steps above, I opened the WebResource.axd file and sure enough, my function was the first one in the file. I could just add a breakpoint and move on.

enter image description here

However, I couldn't find a way to search for that function from Visual Studio.


The methods I described get the job done, but I still hope there's an easier way...
Cristian Diaconescu
  • 34,633
  • 32
  • 143
  • 233