I develop a web application which displays data in a read-only form, and loads the edit form upon pressing a button
$(function () { $(".btnEdit").click(function () { $.ajax({ url: '@Url.Action("Form", new { id = Model.ID })', type: 'post' }); }); });
Now I needed to debug the JavaScript code loaded by the call to $.ajax(), but Chrome does not seem to display the loaded response in its tree of Sources.
An answer on SO provided me with the solution: Simply add the line
//# sourceURL=@Url.Action("Form", new { id = Model.ID })
inside a <script> block in the AJAX-loaded HTML. This will add the requested URL under the (no domain) node
Now that I have access to the source file, I needed to find all invocations of the jQuery val() function, since I was tracking down a wrong value in an <input>.
Again SO provided a solution, which I added to my code
(function($){ var originalVal = $.fn.val; $.fn.val = function(){ var selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->"); console.log("val( #" + $(this).attr("id") + " " + selectorPath + " , " + JSON.stringify(arguments) + ")"); var result =originalVal.apply(this,arguments); return result; }; })(jQuery);
Now that the calls to val() were logged to the Console, it was easy to find where the wrong value was set.