How to debug a Javascript document.ready modal dialog that is defined as a razor?
My web app is one of those one page apps that replaces content <div>
via ajax. In the case when we want to show a modal dialog 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 sampling value for params
is:
params = { content: response, draggable: true, wizard: true };
And response
contains the result from public ActionResult ShowSomePopup
, which returns an object ViewResult
.
So another function makes an ajax request, returns some HTML from the server and passes that response object to OpenWindow
.
This view I am returning is a razor view. The cshtml file looks something like this:
<div id="SomeDiv">
<!-- the rest of the form -->
</div>
<script type="text/javascript">
$(document).ready(function ()
{
//some code
});
</script>
I found:
-
How do I debug my MVC3 site using Chrome? - The accepted answer is 6 years old and my Chrome looks very different. If I download the dev tools and click on the script associated with my page, the content of this file is empty regardless of whether I am using Firebug or the Chrome debugger: https://i.stack.imgur.com/lbjVU.png and the second answer won't help me since mine is
<script type="text/javascript> ... </script>
not "inside" any curly brace for razor code. -
Using JavaScript JavaScript Debugger / How to Break Page Load Events - I don't understand the accepted answer, but the second answer with +100 Bounty doesn't work for me. I checked a checkbox
DOMContentLoaded
that it never fires for me. -
How can I debug the javascript contained in $ (document) .ready ()? - Again, since the script is defined in the cshtml file, which does not appear in the tab
Sources
in the debugger.
The only solution I have found is to simply move the content of the cshtml script to a JS file and call this function from the cshtml $(document).ready
script. But it's a colossal pain in the butt when I have hundreds of view files; I can’t take the time to go through and move everything.
Question: How can I use Chrome to debug the modal dialog's document.ready function that is defined as a razor?
source to share
Write a "debugger" in js in the cshtml file for Chrome to hit the breakpoint, and then you can navigate when the browser developer tools 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 links: https://www.w3schools.com/jsref/jsref_debugger.asp
source to share