How to debug a modal dialogue's document.ready Javascript which is defined in a razor view?

Question

My web application is one of those "single page" styled applications which replaces <div> content via ajax. In the case where we wish to show a modal dialogue to the user, this function is called:

function OpenWindow(name, title, params) 
{
    var winParams = SetWindowParameters(name, title, params);
    var container = $('div.k-content[id=\'' + name + '\']');

    if (container.length > 0) 
        container.data("kendoWindow").destroy();

    container = $('<div/>', { id: name }).css('display', 'none');

    container.appendTo($('body'))

    if (params.content) 
        container.html(params.content);

    var window = container.kendoWindow(winParams);

    window.data("kendoWindow").center().open();
}

One sample value for params is such:

params = { content: response, draggable: true, wizard: true };

And response contains the result from public ActionResult ShowSomePopup which returns a ViewResult object.

So another function makes an ajax request, gets some HTML back from the server and then passes that response object to OpenWindow.

This view I'm returning is a Razor View. The cshtml file looks sort of like this:

<div id="SomeDiv">
    <!-- the rest of the form -->
</div>

<script type="text/javascript">
    $(document).ready(function ()
    {
        //some code
    });
</script>

I've found:

How can I debug my MVC3 site with Chrome? - Accepted answer is 6 years old and my Chrome looks very different. If I load up the dev tools and click on the script associated with my page, the content of this file is empty regardless if I use Firebug or Chrome's debugger: https://i.stack.imgur.com/lbjVU.png and the second answer is not helpful for me as my <script type="text/javascript> ... </script> is not 'within' any of the braces for the razor code.
Using Chrome JavaScript Debugger / How to break on page loading events - I don't understand the accepted answer, but the second answer with a +100 Bounty does not work for me. I checked the DOMContentLoaded checkbox it never triggers for me.
How can I debug javascript contained in $(document).ready()? - Again, since the script is defined in a cshtml file it does not show up under the Sources tab in the debugger.

The only solution I've found is to simply move the contents of the cshtml's script into a JS file and call that function from the cshtml's $(document).ready script. But this is a colossal pain in the butt when I have hundreds of view files; I can't really take the time to go through and move everything all around.

The question: How can I use Chrome to debug a modal dialogue's document.ready function which is defined in a razor view?

score 0 · Answer 1 · answered Apr 20 '18 at 22:15

Write "debugger" in your js in a cshtml file so that Chrome hits the breakpoint and then you can step through when your browser developer tools is open.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <script>
    
    $(document).ready(function () {
      debugger;
      alert("Hello world");
    })
  
  </script>
</div>

Other references: https://www.w3schools.com/jsref/jsref_debugger.asp

How to debug a modal dialogue's document.ready Javascript which is defined in a razor view?

1 Answers1