How can I debug my MVC3 site using Chrome?
I am creating an ASP.NET MVC3 website. I have javascript in my .cshtml file:
<div>hello!</div>
<script type="text/javascript">
$(document).ready(function () { alert("ready!"); })
</script>
Google Chrome's built-in debugger doesn't see this javascript snippet, so I can't debug it.
How do I set a breakpoint in this javascript snippet in Google Chrome's built-in debugger?
Strange, works great for me:
- Go to the tab
Scripts
- You will see a dropdown list of all related javascript files, select the one that matches the inline scripts (
:9038
in my screenshot below) - Set a breakpoint
You can also consider FireBug as an alternative.
In MVC3, by running the razor view engine, I had bindings that really messed up parsing the view.
For example, if you have:
@using(Html.BeginForm()){
<div>hello!</div>
<script type="text/javascript">
$(document).ready(function () { alert("ready!"); });
</script>
}
You may have problems with the script brackets. Try changing it to:
@{ Html.BeginForm(); }
<div>hello!</div>
<script type="text/javascript">
$(document).ready(function () {
alert("ready!");
});
</script>
@{ Html.EndForm(); }
This may or may not be the answer to your question, but it took me forever to figure out what was wrong with some of my forms. I didn't put scripts in them, though .. they were blocks for conditional logic that would break everything for me.
EDIT After doing a little research, I found that one of them led me to a solution: aspnet.codeplex.com/workitem/7551.
My commit post (from a codebase that I don't physically have access to) suggests it might be bad markup. The developer who wrote the offending pages liked to use the header tags even though we used the XHTML 1.1 doctype. It also had a lot of attributes that were conditionally compiled and / or populated. For example:
<div class="something @myHelper(someFlag)"></div>
<div @{ isSomeFlag ? <text>class="asdf"</text> : "" }></div>
My solution should be considered a temporary solution.